Merge branch 'release/4.0.4'

2025-03-21 18:55:06 -07:00
parent 8f39e62570 c2946415c8
commit bc5f1722e1
1054 changed files with 21860 additions and 10575 deletions
--- a/.env.example
+++ b/.env.example
@@ -155,10 +155,6 @@ TWITTER_ENVIRONMENT=
 SLACK_CLIENT_ID=
 SLACK_CLIENT_SECRET=

-#Linear Integration
-LINEAR_CLIENT_ID=
-LINEAR_CLIENT_SECRET=
-
 # Google OAuth
 GOOGLE_OAUTH_CLIENT_ID=
 GOOGLE_OAUTH_CLIENT_SECRET=
--- a/.github/dashboard-screen.png
+++ b/.github/dashboard-screen.png
--- a/.github/screenshots/dashboard-dark.png
+++ b/.github/screenshots/dashboard-dark.png
--- a/.github/screenshots/dashboard.png
+++ b/.github/screenshots/dashboard.png
--- a/.github/screenshots/header-dark.png
+++ b/.github/screenshots/header-dark.png
--- a/.github/screenshots/header.png
+++ b/.github/screenshots/header.png
--- a/.github/workflows/nightly_installer.yml
+++ b/.github/workflows/nightly_installer.yml
@@ -16,7 +16,7 @@ on:

 jobs:
  nightly:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
    steps:

    - name: get installer
--- a/.scss-lint.yml
+++ b/.scss-lint.yml
@@ -283,3 +283,4 @@ exclude:
  - 'app/javascript/widget/assets/scss/sdk.css'
  - 'app/assets/stylesheets/administrate/reset/_normalize.scss'
  - 'app/javascript/shared/assets/stylesheets/*.scss'
+  - 'app/javascript/dashboard/assets/scss/_woot.scss'
--- a/3
+++ b/3
@@ -173,8 +173,11 @@ gem 'pgvector'
 # Convert Website HTML to Markdown
 gem 'reverse_markdown'

+gem 'iso-639'
 gem 'ruby-openai'

+gem 'shopify_api'
+
 ### Gems required only in specific deployment environments ###
 ##############################################################

--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -352,6 +352,7 @@ GEM
      ruby2ruby (~> 2.4)
      ruby_parser (~> 3.10)
    hana (1.3.7)
+    hash_diff (1.1.1)
    hashdiff (1.1.0)
    hashie (5.0.0)
    html2text (0.4.0)
@@ -377,6 +378,8 @@ GEM
    io-console (0.6.0)
    irb (1.7.2)
      reline (>= 0.3.6)
+    iso-639 (0.3.8)
+      csv
    jbuilder (2.11.5)
      actionview (>= 5.0.0)
      activesupport (>= 5.0.0)
@@ -520,6 +523,9 @@ GEM
      rack (>= 1.2, < 4)
      snaky_hash (~> 2.0)
      version_gem (~> 1.1)
+    oj (3.16.10)
+      bigdecimal (>= 3.0)
+      ostruct (>= 0.2)
    omniauth (2.1.2)
      hashie (>= 3.4.6)
      rack (>= 2.2.3)
@@ -561,7 +567,7 @@ GEM
      activesupport (>= 3.0.0)
    raabro (1.4.0)
    racc (1.8.1)
-    rack (2.2.11)
+    rack (2.2.13)
    rack-attack (6.7.0)
      rack (>= 1.0, < 4)
    rack-contrib (2.5.0)
@@ -711,6 +717,7 @@ GEM
      parser
    scss_lint (0.60.0)
      sass (~> 3.5, >= 3.5.5)
+    securerandom (0.4.1)
    seed_dump (3.3.1)
      activerecord (>= 4)
      activesupport (>= 4)
@@ -725,6 +732,17 @@ GEM
      sentry-ruby (~> 5.19.0)
      sidekiq (>= 3.0)
    sexp_processor (4.17.0)
+    shopify_api (14.8.0)
+      activesupport
+      concurrent-ruby
+      hash_diff
+      httparty
+      jwt
+      oj
+      openssl
+      securerandom
+      sorbet-runtime
+      zeitwerk (~> 2.5)
    shoulda-matchers (5.3.0)
      activesupport (>= 5.2.0)
    sidekiq (7.3.1)
@@ -757,6 +775,7 @@ GEM
    snaky_hash (2.0.1)
      hashie
      version_gem (~> 1.1, >= 1.1.1)
+    sorbet-runtime (0.5.11934)
    spring (4.1.1)
    spring-watcher-listen (2.1.0)
      listen (>= 2.7, < 4.0)
@@ -799,7 +818,7 @@ GEM
    unf_ext (0.0.8.2)
    unicode-display_width (2.4.2)
    uniform_notifier (1.16.0)
-    uri (0.13.0)
+    uri (1.0.3)
    uri_template (0.7.0)
    valid_email2 (5.2.6)
      activemodel (>= 3.2)
@@ -896,6 +915,7 @@ DEPENDENCIES
  hashie
  html2text
  image_processing
+  iso-639
  jbuilder
  json_refs
  json_schemer
@@ -950,6 +970,7 @@ DEPENDENCIES
  sentry-rails (>= 5.19.0)
  sentry-ruby
  sentry-sidekiq (>= 5.19.0)
+  shopify_api
  shoulda-matchers
  sidekiq (>= 7.3.1)
  sidekiq-cron (>= 1.12.0)
--- a/README.md
+++ b/README.md
@@ -1,22 +1,11 @@
-## 🚨 Note: This branch is unstable. For the stable branch's source code, please use the branch [3.x](https://github.com/chatwoot/chatwoot/tree/3.x)
-
-
-<img src="https://user-images.githubusercontent.com/2246121/282256557-1570674b-d142-4198-9740-69404cc6a339.png#gh-light-mode-only" width="100%" alt="Chat dashboard dark mode"/>
-<img src="https://user-images.githubusercontent.com/2246121/282256632-87f6a01b-6467-4e0e-8a93-7bbf66d03a17.png#gh-dark-mode-only" width="100%" alt="Chat dashboard"/>
+<img src="./.github/screenshots/header.png#gh-light-mode-only" width="100%" alt="Header light mode"/>
+<img src="./.github/screenshots/header-dark.png#gh-dark-mode-only" width="100%" alt="Header dark mode"/>

 ___

 # Chatwoot

-Customer engagement suite, an open-source alternative to Intercom, Zendesk, Salesforce Service Cloud etc.
-<p>
-  <a href="https://heroku.com/deploy?template=https://github.com/chatwoot/chatwoot/tree/master" alt="Deploy to Heroku">
-     <img width="150" alt="Deploy" src="https://www.herokucdn.com/deploy/button.svg"/>
-  </a>
-  <a href="https://marketplace.digitalocean.com/apps/chatwoot?refcode=f2238426a2a8" alt="Deploy to DigitalOcean">
-     <img width="200" alt="Deploy to DO" src="https://www.deploytodo.com/do-btn-blue.svg"/>
-  </a>
-</p>
+The modern customer support platform, an open-source alternative to Intercom, Zendesk, Salesforce Service Cloud etc.

 <p>
  <a href="https://codeclimate.com/github/chatwoot/chatwoot/maintainability"><img src="https://api.codeclimate.com/v1/badges/e6e3f66332c91e5a4c0c/maintainability" alt="Maintainability"></a>
@@ -31,41 +20,71 @@ Customer engagement suite, an open-source alternative to Intercom, Zendesk, Sale
  <a href="https://artifacthub.io/packages/helm/chatwoot/chatwoot"><img src="https://img.shields.io/endpoint?url=https://artifacthub.io/badge/repository/artifact-hub" alt="Artifact HUB"></a>
 </p>

-<img src="https://user-images.githubusercontent.com/2246121/282255783-ee8a50c9-f42d-4752-8201-2d59965a663d.png#gh-light-mode-only" width="100%" alt="Chat dashboard dark mode"/>
-<img src="https://user-images.githubusercontent.com/2246121/282255784-3d1994ec-d895-4ff5-ac68-d819987e1869.png#gh-dark-mode-only" width="100%" alt="Chat dashboard"/>

-Chatwoot is an open-source, self-hosted customer engagement suite. Chatwoot lets you view and manage your customer data, communicate with them irrespective of which medium they use, and re-engage them based on their profile.
+<p>
+  <a href="https://heroku.com/deploy?template=https://github.com/chatwoot/chatwoot/tree/master" alt="Deploy to Heroku">
+     <img width="150" alt="Deploy" src="https://www.herokucdn.com/deploy/button.svg"/>
+  </a>
+  <a href="https://marketplace.digitalocean.com/apps/chatwoot?refcode=f2238426a2a8" alt="Deploy to DigitalOcean">
+     <img width="200" alt="Deploy to DO" src="https://www.deploytodo.com/do-btn-blue.svg"/>
+  </a>
+</p>

-## Features
+<img src="./.github/screenshots/dashboard.png#gh-light-mode-only" width="100%" alt="Chat dashboard dark mode"/>
+<img src="./.github/screenshots/dashboard-dark.png#gh-dark-mode-only" width="100%" alt="Chat dashboard"/>

-Chatwoot supports the following conversation channels:
+---

- - **Website**: Talk to your customers using our live chat widget and make use of our SDK to identify a user and provide contextual support.
- - **Facebook**: Connect your Facebook pages and start replying to the direct messages to your page.
- - **Instagram**: Connect your Instagram profile and start replying to the direct messages.
- - **Twitter**: Connect your Twitter profiles and reply to direct messages or the tweets where you are mentioned.
- - **Telegram**: Connect your Telegram bot and reply to your customers right from a single dashboard.
- - **WhatsApp**: Connect your WhatsApp business account and manage the conversation in Chatwoot.
- - **Line**: Connect your Line account and manage the conversations in Chatwoot.
- - **SMS**: Connect your Twilio SMS account and reply to the SMS queries in Chatwoot.
- - **API Channel**: Build custom communication channels using our API channel.
- - **Email**: Forward all your email queries to Chatwoot and view it in our integrated dashboard.
+Chatwoot is the modern, open-source, and self-hosted customer support platform designed to help businesses deliver exceptional customer support experience. Built for scale and flexibility, Chatwoot gives you full control over your customer data while providing powerful tools to manage conversations across channels.

-And more.
+### ✨ Captain – AI Agent for Support

-Other features include:
+Supercharge your support with Captain, Chatwoot’s AI agent. Captain helps automate responses, handle common queries, and reduce agent workload—ensuring customers get instant, accurate answers. With Captain, your team can focus on complex conversations while routine questions are resolved automatically. Read more about Captain [here](https://chwt.app/captain-docs).
+
+### 💬 Omnichannel Support Desk
+
+Chatwoot centralizes all customer conversations into one powerful inbox, no matter where your customers reach out from. It supports live chat on your website, email, Facebook, Instagram, Twitter, WhatsApp, Telegram, Line, SMS etc.
+
+### 📚 Help center portal
+
+Publish help articles, FAQs, and guides through the built-in Help Center Portal. Enable customers to find answers on their own, reduce repetitive queries, and keep your support team focused on more complex issues.
+
+### 🗂️ Other features
+
+#### Collaboration & Productivity
+
+- Private Notes and @mentions for internal team discussions.
+- Labels to organize and categorize conversations.
+- Keyboard Shortcuts and a Command Bar for quick navigation.
+- Canned Responses to reply faster to frequently asked questions.
+- Auto-Assignment to route conversations based on agent availability.
+- Multi-lingual Support to serve customers in multiple languages.
+- Custom Views and Filters for better inbox organization.
+- Business Hours and Auto-Responders to manage response expectations.
+- Teams and Automation tools for scaling support workflows.
+- Agent Capacity Management to balance workload across the team.
+
+#### Customer Data & Segmentation
+- Contact Management with profiles and interaction history.
+- Contact Segments and Notes for targeted communication.
+- Campaigns to proactively engage customers.
+- Custom Attributes for storing additional customer data.
+- Pre-Chat Forms to collect user information before starting conversations.
+
+#### Integrations
+- Slack Integration to manage conversations directly from Slack.
+- Dialogflow Integration for chatbot automation.
+- Dashboard Apps to embed internal tools within Chatwoot.
+- Shopify Integration to view and manage customer orders right within Chatwoot.
+- Use Google Translate to translate messages from your customers in realtime.
+- Create and manage Linear tickets within Chatwoot.
+
+#### Reports & Insights
+- Live View of ongoing conversations for real-time monitoring.
+- Conversation, Agent, Inbox, Label, and Team Reports for operational visibility.
+- CSAT Reports to measure customer satisfaction.
+- Downloadable Reports for offline analysis and reporting.

- **CRM**: Save all your customer information right inside Chatwoot, use contact notes to log emails, phone calls, or meeting notes.
- **Custom Attributes**: Define custom attribute attributes to store information about a contact or a conversation and extend the product to match your workflow.
- **Shared multi-brand inboxes**: Manage multiple brands or pages using a shared inbox.
- **Private notes**: Use @mentions and private notes to communicate internally about a conversation.
- **Canned responses (Saved replies)**: Improve the response rate by adding saved replies for frequently asked questions.
- **Conversation Labels**: Use conversation labels to create custom workflows.
- **Auto assignment**: Chatwoot intelligently assigns a ticket to the agents who have access to the inbox depending on their availability and load.
- **Conversation continuity**: If the user has provided an email address through the chat widget, Chatwoot will send an email to the customer under the agent name so that the user can continue the conversation over the email.
- **Multi-lingual support**: Chatwoot supports 10+ languages.
- **Powerful API & Webhooks**: Extend the capability of the software using Chatwoot’s webhooks and APIs.
- **Integrations**: Chatwoot natively integrates with Slack right now. Manage your conversations in Slack without logging into the dashboard.

 ## Documentation

@@ -107,13 +126,11 @@ For other supported options, checkout our [deployment page](https://chatwoot.com

 Looking to report a vulnerability? Please refer our [SECURITY.md](./SECURITY.md) file.

-
-## Community? Questions? Support ?
+## Community

 If you need help or just want to hang out, come, say hi on our [Discord](https://discord.gg/cJXdrwS) server.

-
-## Contributors ✨
+## Contributors

 Thanks goes to all these [wonderful people](https://www.chatwoot.com/docs/contributors):

--- a/app/assets/stylesheets/administrate/components/_buttons.scss
+++ b/app/assets/stylesheets/administrate/components/_buttons.scss
@@ -1,15 +1,15 @@
-button,
-input[type="button"],
-input[type="reset"],
-input[type="submit"],
-.button {
+button:not(.reset-base),
+input[type='button']:not(.reset-base),
+input[type='reset']:not(.reset-base),
+input[type='submit']:not(.reset-base),
+.button:not(.reset-base) {
  appearance: none;
  background-color: $color-woot;
  border: 0;
  border-radius: $base-border-radius;
  color: $white;
  cursor: pointer;
-  display: inline-block;
+  display: inline-flex;
  font-size: $font-size-small;
  -webkit-font-smoothing: antialiased;
  font-weight: $font-weight-medium;
--- a/app/assets/stylesheets/administrate/custom_styles.scss
+++ b/app/assets/stylesheets/administrate/custom_styles.scss
@@ -10,7 +10,6 @@

  .icon-container {
    margin-right: 2px;
-
  }

  .value-container {
--- a/app/builders/contact_inbox_builder.rb
+++ b/app/builders/contact_inbox_builder.rb
@@ -12,50 +12,11 @@ class ContactInboxBuilder
  private

  def generate_source_id
-    case @inbox.channel_type
-    when 'Channel::TwilioSms'
-      twilio_source_id
-    when 'Channel::Whatsapp'
-      wa_source_id
-    when 'Channel::Email'
-      email_source_id
-    when 'Channel::Sms'
-      phone_source_id
-    when 'Channel::Api', 'Channel::WebWidget'
-      SecureRandom.uuid
-    else
-      raise "Unsupported operation for this channel: #{@inbox.channel_type}"
-    end
-  end
-
-  def email_source_id
-    raise ActionController::ParameterMissing, 'contact email' unless @contact.email
-
-    @contact.email
-  end
-
-  def phone_source_id
-    raise ActionController::ParameterMissing, 'contact phone number' unless @contact.phone_number
-
-    @contact.phone_number
-  end
-
-  def wa_source_id
-    raise ActionController::ParameterMissing, 'contact phone number' unless @contact.phone_number
-
-    # whatsapp doesn't want the + in e164 format
-    @contact.phone_number.delete('+').to_s
-  end
-
-  def twilio_source_id
-    raise ActionController::ParameterMissing, 'contact phone number' unless @contact.phone_number
-
-    case @inbox.channel.medium
-    when 'sms'
-      @contact.phone_number
-    when 'whatsapp'
-      "whatsapp:#{@contact.phone_number}"
-    end
+    ContactInbox::SourceIdService.new(
+      contact: @contact,
+      channel_type: @inbox.channel_type,
+      medium: @inbox.channel.try(:medium)
+    ).generate
  end

  def create_contact_inbox
@@ -64,5 +25,40 @@ class ContactInboxBuilder
      inbox_id: @inbox.id,
      source_id: @source_id
    )
+  rescue ActiveRecord::RecordNotUnique
+    Rails.logger.info("[ContactInboxBuilder] RecordNotUnique #{@source_id} #{@contact.id} #{@inbox.id}")
+    update_old_contact_inbox
+    retry
+  end
+
+  def update_old_contact_inbox
+    # The race condition occurs when there’s a contact inbox with the
+    # same source ID but linked to a different contact. This can happen
+    # if the agent updates the contact’s email or phone number, or
+    # if the contact is merged with another.
+    #
+    # We update the old contact inbox source_id to a random value to
+    # avoid disrupting the current flow. However, the root cause of
+    # this issue is a flaw in the contact inbox model design.
+    # Contact inbox is essentially tracking a session and is not
+    # needed for non-live chat channels.
+    raise ActiveRecord::RecordNotUnique unless allowed_channels?
+
+    contact_inbox = ::ContactInbox.find_by(inbox_id: @inbox.id, source_id: @source_id)
+    return if contact_inbox.blank?
+
+    contact_inbox.update!(source_id: new_source_id)
+  end
+
+  def new_source_id
+    if @inbox.whatsapp? || @inbox.sms? || @inbox.twilio?
+      "#{@source_id}#{rand(100)}"
+    else
+      "#{rand(10)}#{@source_id}"
+    end
+  end
+
+  def allowed_channels?
+    @inbox.email? || @inbox.sms? || @inbox.twilio? || @inbox.whatsapp?
  end
 end
--- a/app/channels/room_channel.rb
+++ b/app/channels/room_channel.rb
@@ -2,10 +2,9 @@ class RoomChannel < ApplicationCable::Channel
  def subscribed
    # TODO: should we only do ensure stream  if current account is present?
    # for now going ahead with guard clauses in update_subscription and broadcast_presence
-
-    ensure_stream
    current_user
    current_account
+    ensure_stream
    update_subscription
    broadcast_presence
  end
@@ -22,12 +21,12 @@ class RoomChannel < ApplicationCable::Channel

    data = { account_id: @current_account.id, users: ::OnlineStatusTracker.get_available_users(@current_account.id) }
    data[:contacts] = ::OnlineStatusTracker.get_available_contacts(@current_account.id) if @current_user.is_a? User
-    ActionCable.server.broadcast(@pubsub_token, { event: 'presence.update', data: data })
+    ActionCable.server.broadcast(pubsub_token, { event: 'presence.update', data: data })
  end

  def ensure_stream
-    @pubsub_token = params[:pubsub_token]
-    stream_from @pubsub_token
+    stream_from pubsub_token
+    stream_from "account_#{@current_account.id}" if @current_account.present? && @current_user.is_a?(User)
  end

  def update_subscription
@@ -36,11 +35,15 @@ class RoomChannel < ApplicationCable::Channel
    ::OnlineStatusTracker.update_presence(@current_account.id, @current_user.class.name, @current_user.id)
  end

+  def pubsub_token
+    @pubsub_token ||= params[:pubsub_token]
+  end
+
  def current_user
    @current_user ||= if params[:user_id].blank?
-                        ContactInbox.find_by!(pubsub_token: @pubsub_token).contact
+                        ContactInbox.find_by!(pubsub_token: pubsub_token).contact
                      else
-                        User.find_by!(pubsub_token: @pubsub_token, id: params[:user_id])
+                        User.find_by!(pubsub_token: pubsub_token, id: params[:user_id])
                      end
  end

--- a/app/controllers/api/v1/accounts/contacts/contact_inboxes_controller.rb
+++ b/app/controllers/api/v1/accounts/contacts/contact_inboxes_controller.rb
@@ -9,6 +9,8 @@ class Api::V1::Accounts::Contacts::ContactInboxesController < Api::V1::Accounts:
      source_id: params[:source_id],
      hmac_verified: hmac_verified?
    ).perform
+  rescue ArgumentError => e
+    render json: { error: e.message }, status: :unprocessable_entity
  end

  private
--- a/app/controllers/api/v1/accounts/conversations_controller.rb
+++ b/app/controllers/api/v1/accounts/conversations_controller.rb
@@ -6,6 +6,8 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
  before_action :conversation, except: [:index, :meta, :search, :create, :filter]
  before_action :inbox, :contact, :contact_inbox, only: [:create]

+  ATTACHMENT_RESULTS_PER_PAGE = 100
+
  def index
    result = conversation_finder.perform
    @conversations = result[:conversations]
@@ -24,7 +26,12 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
  end

  def attachments
+    @attachments_count = @conversation.attachments.count
    @attachments = @conversation.attachments
+                                .includes(:message)
+                                .order(created_at: :desc)
+                                .page(attachment_params[:page])
+                                .per(ATTACHMENT_RESULTS_PER_PAGE)
  end

  def show; end
@@ -124,6 +131,10 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
    params.permit(:priority)
  end

+  def attachment_params
+    params.permit(:page)
+  end
+
  def update_last_seen_on_conversation(last_seen_at, update_assignee)
    # rubocop:disable Rails/SkipsModelValidations
    @conversation.update_column(:agent_last_seen_at, last_seen_at)
--- a/app/controllers/api/v1/accounts/integrations/shopify_controller.rb
+++ b/app/controllers/api/v1/accounts/integrations/shopify_controller.rb
@@ -0,0 +1,111 @@
+class Api::V1::Accounts::Integrations::ShopifyController < Api::V1::Accounts::BaseController
+  include Shopify::IntegrationHelper
+  before_action :setup_shopify_context, only: [:orders]
+  before_action :fetch_hook, except: [:auth]
+  before_action :validate_contact, only: [:orders]
+
+  def auth
+    shop_domain = params[:shop_domain]
+    return render json: { error: 'Shop domain is required' }, status: :unprocessable_entity if shop_domain.blank?
+
+    state = generate_shopify_token(Current.account.id)
+
+    auth_url = "https://#{shop_domain}/admin/oauth/authorize?"
+    auth_url += URI.encode_www_form(
+      client_id: client_id,
+      scope: REQUIRED_SCOPES.join(','),
+      redirect_uri: redirect_uri,
+      state: state
+    )
+
+    render json: { redirect_url: auth_url }
+  end
+
+  def orders
+    customers = fetch_customers
+    return render json: { orders: [] } if customers.empty?
+
+    orders = fetch_orders(customers.first['id'])
+    render json: { orders: orders }
+  rescue ShopifyAPI::Errors::HttpResponseError => e
+    render json: { error: e.message }, status: :unprocessable_entity
+  end
+
+  def destroy
+    @hook.destroy!
+    head :ok
+  rescue StandardError => e
+    render json: { error: e.message }, status: :unprocessable_entity
+  end
+
+  private
+
+  def redirect_uri
+    "#{ENV.fetch('FRONTEND_URL', '')}/shopify/callback"
+  end
+
+  def contact
+    @contact ||= Current.account.contacts.find_by(id: params[:contact_id])
+  end
+
+  def fetch_hook
+    @hook = Integrations::Hook.find_by!(account: Current.account, app_id: 'shopify')
+  end
+
+  def fetch_customers
+    query = []
+    query << "email:#{contact.email}" if contact.email.present?
+    query << "phone:#{contact.phone_number}" if contact.phone_number.present?
+
+    shopify_client.get(
+      path: 'customers/search.json',
+      query: {
+        query: query.join(' OR '),
+        fields: 'id,email,phone'
+      }
+    ).body['customers'] || []
+  end
+
+  def fetch_orders(customer_id)
+    orders = shopify_client.get(
+      path: 'orders.json',
+      query: {
+        customer_id: customer_id,
+        status: 'any',
+        fields: 'id,email,created_at,total_price,currency,fulfillment_status,financial_status'
+      }
+    ).body['orders'] || []
+
+    orders.map do |order|
+      order.merge('admin_url' => "https://#{@hook.reference_id}/admin/orders/#{order['id']}")
+    end
+  end
+
+  def setup_shopify_context
+    return if client_id.blank? || client_secret.blank?
+
+    ShopifyAPI::Context.setup(
+      api_key: client_id,
+      api_secret_key: client_secret,
+      api_version: '2025-01'.freeze,
+      scope: REQUIRED_SCOPES.join(','),
+      is_embedded: true,
+      is_private: false
+    )
+  end
+
+  def shopify_session
+    ShopifyAPI::Auth::Session.new(shop: @hook.reference_id, access_token: @hook.access_token)
+  end
+
+  def shopify_client
+    @shopify_client ||= ShopifyAPI::Clients::Rest::Admin.new(session: shopify_session)
+  end
+
+  def validate_contact
+    return unless contact.blank? || (contact.email.blank? && contact.phone_number.blank?)
+
+    render json: { error: 'Contact information missing' },
+           status: :unprocessable_entity
+  end
+end
--- a/app/controllers/api/v1/widget/campaigns_controller.rb
+++ b/app/controllers/api/v1/widget/campaigns_controller.rb
@@ -2,6 +2,10 @@ class Api::V1::Widget::CampaignsController < Api::V1::Widget::BaseController
  skip_before_action :set_contact

  def index
-    @campaigns = @web_widget.inbox.campaigns.where(enabled: true)
+    @campaigns = @web_widget
+                 .inbox
+                 .campaigns
+                 .where(enabled: true, account_id: @web_widget.inbox.account_id)
+                 .includes(:sender)
  end
 end
--- a/app/controllers/api/v1/widget/inbox_members_controller.rb
+++ b/app/controllers/api/v1/widget/inbox_members_controller.rb
@@ -2,6 +2,6 @@ class Api::V1::Widget::InboxMembersController < Api::V1::Widget::BaseController
  skip_before_action :set_contact

  def index
-    @inbox_members = @web_widget.inbox.inbox_members.includes(:user)
+    @inbox_members = @web_widget.inbox.inbox_members.includes(user: { avatar_attachment: :blob })
  end
 end
--- a/app/controllers/concerns/switch_locale.rb
+++ b/app/controllers/concerns/switch_locale.rb
@@ -5,10 +5,11 @@ module SwitchLocale

  def switch_locale(&)
    # priority is for locale set in query string (mostly for widget/from js sdk)
-    locale ||= locale_from_params
+    locale ||= params[:locale]
+
    locale ||= locale_from_custom_domain
    # if locale is not set in account, let's use DEFAULT_LOCALE env variable
-    locale ||= locale_from_env_variable
+    locale ||= ENV.fetch('DEFAULT_LOCALE', nil)
    set_locale(locale, &)
  end

@@ -32,26 +33,30 @@ module SwitchLocale
  end

  def set_locale(locale, &)
-    # if locale is empty, use default_locale
-    locale ||= I18n.default_locale
+    safe_locale = validate_and_get_locale(locale)
    # Ensure locale won't bleed into other requests
    # https://guides.rubyonrails.org/i18n.html#managing-the-locale-across-requests
-    I18n.with_locale(locale, &)
+    I18n.with_locale(safe_locale, &)
  end

-  def locale_from_params
-    I18n.available_locales.map(&:to_s).include?(params[:locale]) ? params[:locale] : nil
+  def validate_and_get_locale(locale)
+    return I18n.default_locale.to_s if locale.blank?
+
+    available_locales = I18n.available_locales.map(&:to_s)
+    locale_without_variant = locale.split('_')[0]
+
+    if available_locales.include?(locale)
+      locale
+    elsif available_locales.include?(locale_without_variant)
+      locale_without_variant
+    else
+      I18n.default_locale.to_s
+    end
  end

  def locale_from_account(account)
    return unless account

-    I18n.available_locales.map(&:to_s).include?(account.locale) ? account.locale : nil
-  end
-
-  def locale_from_env_variable
-    return unless ENV.fetch('DEFAULT_LOCALE', nil)
-
-    I18n.available_locales.map(&:to_s).include?(ENV.fetch('DEFAULT_LOCALE')) ? ENV.fetch('DEFAULT_LOCALE') : nil
+    account.locale
  end
 end
--- a/app/controllers/linear/callbacks_controller.rb
+++ b/app/controllers/linear/callbacks_controller.rb
@@ -16,9 +16,12 @@ class Linear::CallbacksController < ApplicationController
  private

  def oauth_client
+    app_id = GlobalConfigService.load('LINEAR_CLIENT_ID', nil)
+    app_secret = GlobalConfigService.load('LINEAR_CLIENT_SECRET', nil)
+
    OAuth2::Client.new(
-      ENV.fetch('LINEAR_CLIENT_ID', nil),
-      ENV.fetch('LINEAR_CLIENT_SECRET', nil),
+      app_id,
+      app_secret,
      {
        site: 'https://api.linear.app',
        token_url: '/oauth/token',
--- a/app/controllers/public/api/v1/portals/articles_controller.rb
+++ b/app/controllers/public/api/v1/portals/articles_controller.rb
@@ -6,17 +6,25 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
  layout 'portal'

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

  def show; end

  private

+  def limit_results
+    return if list_params[:per_page].blank?
+
+    per_page = [list_params[:per_page].to_i, 100].min
+    per_page = 25 if per_page < 1
+    @articles = @articles.page(list_params[:page]).per(per_page)
+  end
+
  def search_articles
    @articles = @articles.search(list_params) if list_params.present?
  end
@@ -45,7 +53,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
  end

  def list_params
-    params.permit(:query, :locale, :sort, :status, :page)
+    params.permit(:query, :locale, :sort, :status, :page, :per_page)
  end

  def permitted_params
--- a/app/controllers/public/api/v1/portals/base_controller.rb
+++ b/app/controllers/public/api/v1/portals/base_controller.rb
@@ -1,4 +1,6 @@
 class Public::Api::V1::Portals::BaseController < PublicController
+  include SwitchLocale
+
  before_action :show_plain_layout
  before_action :set_color_scheme
  before_action :set_global_config
@@ -27,14 +29,7 @@ class Public::Api::V1::Portals::BaseController < PublicController
  end

  def switch_locale_with_portal(&)
-    locale_without_variant = params[:locale].split('_')[0]
-    is_locale_available = I18n.available_locales.map(&:to_s).include?(params[:locale])
-    is_locale_variant_available = I18n.available_locales.map(&:to_s).include?(locale_without_variant)
-    if is_locale_available
-      @locale = params[:locale]
-    elsif is_locale_variant_available
-      @locale = locale_without_variant
-    end
+    @locale = validate_and_get_locale(params[:locale])

    I18n.with_locale(@locale, &)
  end
@@ -44,12 +39,12 @@ class Public::Api::V1::Portals::BaseController < PublicController
    Rails.logger.info "Article: not found for slug: #{params[:article_slug]}"
    render_404 && return if article.blank?

-    @locale = if article.category.present?
-                article.category.locale
-              else
-                article.portal.default_locale
-              end
-
+    article_locale = if article.category.present?
+                       article.category.locale
+                     else
+                       article.portal.default_locale
+                     end
+    @locale = validate_and_get_locale(article_locale)
    I18n.with_locale(@locale, &)
  end

--- a/app/controllers/shopify/callbacks_controller.rb
+++ b/app/controllers/shopify/callbacks_controller.rb
@@ -0,0 +1,72 @@
+class Shopify::CallbacksController < ApplicationController
+  include Shopify::IntegrationHelper
+
+  def show
+    verify_account!
+
+    @response = oauth_client.auth_code.get_token(
+      params[:code],
+      redirect_uri: '/shopify/callback'
+    )
+
+    handle_response
+  rescue StandardError => e
+    Rails.logger.error("Shopify callback error: #{e.message}")
+    redirect_to "#{redirect_uri}?error=true"
+  end
+
+  private
+
+  def verify_account!
+    @account_id = verify_shopify_token(params[:state])
+    raise StandardError, 'Invalid state parameter' if account.blank?
+  end
+
+  def handle_response
+    account.hooks.create!(
+      app_id: 'shopify',
+      access_token: parsed_body['access_token'],
+      status: 'enabled',
+      reference_id: params[:shop],
+      settings: {
+        scope: parsed_body['scope']
+      }
+    )
+
+    redirect_to shopify_integration_url
+  end
+
+  def parsed_body
+    @parsed_body ||= @response.response.parsed
+  end
+
+  def oauth_client
+    OAuth2::Client.new(
+      client_id,
+      client_secret,
+      {
+        site: "https://#{params[:shop]}",
+        authorize_url: '/admin/oauth/authorize',
+        token_url: '/admin/oauth/access_token'
+      }
+    )
+  end
+
+  def account
+    @account ||= Account.find(@account_id)
+  end
+
+  def account_id
+    @account_id ||= params[:state].split('_').first
+  end
+
+  def shopify_integration_url
+    "#{ENV.fetch('FRONTEND_URL', nil)}/app/accounts/#{account.id}/settings/integrations/shopify"
+  end
+
+  def redirect_uri
+    return shopify_integration_url if account
+
+    ENV.fetch('FRONTEND_URL', nil)
+  end
+end
--- a/app/controllers/super_admin/app_configs_controller.rb
+++ b/app/controllers/super_admin/app_configs_controller.rb
@@ -35,10 +35,14 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
    @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]
                       else
                         %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS]
                       end
--- a/app/controllers/twilio/callback_controller.rb
+++ b/app/controllers/twilio/callback_controller.rb
@@ -1,6 +1,6 @@
 class Twilio::CallbackController < ApplicationController
  def create
-    ::Twilio::IncomingMessageService.new(params: permitted_params).perform
+    Webhooks::TwilioEventsJob.perform_later(permitted_params.to_unsafe_hash)

    head :no_content
  end
--- a/app/controllers/twilio/delivery_status_controller.rb
+++ b/app/controllers/twilio/delivery_status_controller.rb
@@ -1,6 +1,6 @@
 class Twilio::DeliveryStatusController < ApplicationController
  def create
-    ::Twilio::DeliveryStatusService.new(params: permitted_params).perform
+    Webhooks::TwilioDeliveryStatusJob.perform_later(permitted_params.to_unsafe_hash)

    head :no_content
  end
--- a/app/controllers/webhooks/whatsapp_controller.rb
+++ b/app/controllers/webhooks/whatsapp_controller.rb
@@ -2,6 +2,12 @@ class Webhooks::WhatsappController < ActionController::API
  include MetaTokenVerifyConcern

  def process_payload
+    if inactive_whatsapp_number?
+      Rails.logger.warn("Rejected webhook for inactive WhatsApp number: #{params[:phone_number]}")
+      render json: { error: 'Inactive WhatsApp number' }, status: :unprocessable_entity
+      return
+    end
+
    Webhooks::WhatsappEventsJob.perform_later(params.to_unsafe_hash)
    head :ok
  end
@@ -13,4 +19,15 @@ class Webhooks::WhatsappController < ActionController::API
    whatsapp_webhook_verify_token = channel.provider_config['webhook_verify_token'] if channel.present?
    token == whatsapp_webhook_verify_token if whatsapp_webhook_verify_token.present?
  end
+
+  def inactive_whatsapp_number?
+    phone_number = params[:phone_number]
+    return false if phone_number.blank?
+
+    inactive_numbers = GlobalConfig.get_value('INACTIVE_WHATSAPP_NUMBERS').to_s
+    return false if inactive_numbers.blank?
+
+    inactive_numbers_array = inactive_numbers.split(',').map(&:strip)
+    inactive_numbers_array.include?(phone_number)
+  end
 end
--- a/app/dashboards/account_dashboard.rb
+++ b/app/dashboards/account_dashboard.rb
@@ -78,7 +78,11 @@ class AccountDashboard < Administrate::BaseDashboard
  #   COLLECTION_FILTERS = {
  #     open: ->(resources) { resources.where(open: true) }
  #   }.freeze
-  COLLECTION_FILTERS = {}.freeze
+  COLLECTION_FILTERS = {
+    active: ->(resources) { resources.where(status: :active) },
+    suspended: ->(resources) { resources.where(status: :suspended) },
+    recent: ->(resources) { resources.where('created_at > ?', 30.days.ago) }
+  }.freeze

  # Overwrite this method to customize how accounts are displayed
  # across all pages of the admin dashboard.
--- a/app/dashboards/user_dashboard.rb
+++ b/app/dashboards/user_dashboard.rb
@@ -94,7 +94,12 @@ class UserDashboard < Administrate::BaseDashboard
  #   COLLECTION_FILTERS = {
  #     open: ->(resources) { resources.where(open: true) }
  #   }.freeze
-  COLLECTION_FILTERS = {}.freeze
+  COLLECTION_FILTERS = {
+    super_admin: ->(resources) { resources.where(type: 'SuperAdmin') },
+    confirmed: ->(resources) { resources.where.not(confirmed_at: nil) },
+    unconfirmed: ->(resources) { resources.where(confirmed_at: nil) },
+    recent: ->(resources) { resources.where('created_at > ?', 30.days.ago) }
+  }.freeze

  # Overwrite this method to customize how users are displayed
  # across all pages of the admin dashboard.
--- a/app/helpers/filters/filter_helper.rb
+++ b/app/helpers/filters/filter_helper.rb
@@ -1,4 +1,4 @@
-module FilterHelper
+module Filters::FilterHelper
  def build_condition_query(model_filters, query_hash, current_index)
    current_filter = model_filters[query_hash['attribute_key']]

@@ -89,4 +89,18 @@ module FilterHelper
    operator = condition['query_operator'].upcase
    raise CustomExceptions::CustomFilter::InvalidQueryOperator.new({}) unless %w[AND OR].include?(operator)
  end
+
+  def conversation_status_values(values)
+    return Conversation.statuses.values if values.include?('all')
+
+    values.map { |x| Conversation.statuses[x.to_sym] }
+  end
+
+  def conversation_priority_values(values)
+    values.map { |x| Conversation.priorities[x.to_sym] }
+  end
+
+  def message_type_values(values)
+    values.map { |x| Message.message_types[x.to_sym] }
+  end
 end
--- a/app/helpers/linear/integration_helper.rb
+++ b/app/helpers/linear/integration_helper.rb
@@ -32,7 +32,7 @@ module Linear::IntegrationHelper
  private

  def client_secret
-    @client_secret ||= ENV.fetch('LINEAR_CLIENT_SECRET', nil)
+    @client_secret ||= GlobalConfigService.load('LINEAR_CLIENT_SECRET', nil)
  end

  def decode_token(token, secret)
--- a/app/helpers/shopify/integration_helper.rb
+++ b/app/helpers/shopify/integration_helper.rb
@@ -0,0 +1,58 @@
+module Shopify::IntegrationHelper
+  REQUIRED_SCOPES = %w[read_customers read_orders read_fulfillments].freeze
+
+  # Generates a signed JWT token for Shopify integration
+  #
+  # @param account_id [Integer] The account ID to encode in the token
+  # @return [String, nil] The encoded JWT token or nil if client secret is missing
+  def generate_shopify_token(account_id)
+    return if client_secret.blank?
+
+    JWT.encode(token_payload(account_id), client_secret, 'HS256')
+  rescue StandardError => e
+    Rails.logger.error("Failed to generate Shopify token: #{e.message}")
+    nil
+  end
+
+  def token_payload(account_id)
+    {
+      sub: account_id,
+      iat: Time.current.to_i
+    }
+  end
+
+  # Verifies and decodes a Shopify JWT token
+  #
+  # @param token [String] The JWT token to verify
+  # @return [Integer, nil] The account ID from the token or nil if invalid
+  def verify_shopify_token(token)
+    return if token.blank? || client_secret.blank?
+
+    decode_token(token, client_secret)
+  end
+
+  private
+
+  def client_id
+    @client_id ||= GlobalConfigService.load('SHOPIFY_CLIENT_ID', nil)
+  end
+
+  def client_secret
+    @client_secret ||= GlobalConfigService.load('SHOPIFY_CLIENT_SECRET', nil)
+  end
+
+  def decode_token(token, secret)
+    JWT.decode(
+      token,
+      secret,
+      true,
+      {
+        algorithm: 'HS256',
+        verify_expiration: true
+      }
+    ).first['sub']
+  rescue StandardError => e
+    Rails.logger.error("Unexpected error verifying Shopify token: #{e.message}")
+    nil
+  end
+end
--- a/app/javascript/dashboard/api/inbox/conversation.js
+++ b/app/javascript/dashboard/api/inbox/conversation.js
@@ -137,6 +137,10 @@ class ConversationApi extends ApiClient {
  requestCopilot(conversationId, body) {
    return axios.post(`${this.url}/${conversationId}/copilot`, body);
  }
+
+  getInboxAssistant(conversationId) {
+    return axios.get(`${this.url}/${conversationId}/inbox_assistant`);
+  }
 }

 export default new ConversationApi();
--- a/app/javascript/dashboard/api/integrations.js
+++ b/app/javascript/dashboard/api/integrations.js
@@ -32,6 +32,12 @@ class IntegrationsAPI extends ApiClient {
  deleteHook(hookId) {
    return axios.delete(`${this.baseUrl()}/integrations/hooks/${hookId}`);
  }
+
+  connectShopify({ shopDomain }) {
+    return axios.post(`${this.baseUrl()}/integrations/shopify/auth`, {
+      shop_domain: shopDomain,
+    });
+  }
 }

 export default new IntegrationsAPI();
--- a/app/javascript/dashboard/api/integrations/shopify.js
+++ b/app/javascript/dashboard/api/integrations/shopify.js
@@ -0,0 +1,17 @@
+/* global axios */
+
+import ApiClient from '../ApiClient';
+
+class ShopifyAPI extends ApiClient {
+  constructor() {
+    super('integrations/shopify', { accountScoped: true });
+  }
+
+  getOrders(contactId) {
+    return axios.get(`${this.url}/orders`, {
+      params: { contact_id: contactId },
+    });
+  }
+}
+
+export default new ShopifyAPI();
--- a/app/javascript/dashboard/api/liveReports.js
+++ b/app/javascript/dashboard/api/liveReports.js
@@ -0,0 +1,20 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class LiveReportsAPI extends ApiClient {
+  constructor() {
+    super('live_reports', { accountScoped: true, apiVersion: 'v2' });
+  }
+
+  getConversationMetric(params = {}) {
+    return axios.get(`${this.url}/conversation_metrics`, { params });
+  }
+
+  getGroupedConversations({ groupBy } = { groupBy: 'assignee_id' }) {
+    return axios.get(`${this.url}/grouped_conversation_metrics`, {
+      params: { group_by: groupBy },
+    });
+  }
+}
+
+export default new LiveReportsAPI();
--- a/app/javascript/dashboard/assets/scss/_date-picker.scss
+++ b/app/javascript/dashboard/assets/scss/_date-picker.scss
@@ -10,7 +10,7 @@

  &.no-margin {
    .mx-input {
-      @apply mb-0;
+      margin-bottom: 0 !important;
    }
  }

--- a/app/javascript/dashboard/assets/scss/_helper-classes.scss
+++ b/app/javascript/dashboard/assets/scss/_helper-classes.scss
@@ -4,7 +4,6 @@
  @apply inline-block h-6 py-0 px-6 relative align-middle w-6;

  &.message {
-    @include normal-shadow;
    @apply bg-white dark:bg-slate-800 rounded-full left-0 my-3 mx-auto p-4 top-0;

    &::before {
--- a/app/javascript/dashboard/assets/scss/_mixins.scss
+++ b/app/javascript/dashboard/assets/scss/_mixins.scss
@@ -1,79 +1,7 @@
@import 'dashboard/assets/scss/variables';
-@import 'widget/assets/scss/mixins';

 $spinner-before-border-color: rgba(255, 255, 255, 0.7);

-//borders
-@mixin border-nil() {
-  border-color: transparent;
-  border: 0;
-}
-
-@mixin thin-border($color) {
-  border: 1px solid $color;
-}
-
-@mixin custom-border-bottom($size, $color) {
-  border-bottom: $size solid $color;
-}
-
-@mixin custom-border-top($size, $color) {
-  border-top: $size solid $color;
-}
-
-@mixin border-normal() {
-  @apply border border-slate-50 dark:border-slate-700;
-}
-
-@mixin border-normal-left() {
-  @apply border-l border-slate-50 dark:border-slate-700;
-}
-
-@mixin border-normal-top() {
-  @apply border-t border-slate-50 dark:border-slate-700;
-}
-
-@mixin border-normal-right() {
-  @apply border-r border-slate-50 dark:border-slate-700;
-}
-
-@mixin border-normal-bottom() {
-  @apply border-b border-slate-50 dark:border-slate-700;
-}
-
-@mixin border-light() {
-  @apply border border-slate-25 dark:border-slate-700;
-}
-
-@mixin border-light-left() {
-  @apply border-l border-slate-25 dark:border-slate-700;
-}
-
-@mixin border-light-top() {
-  @apply border-t border-slate-25 dark:border-slate-700;
-}
-
-@mixin border-light-right() {
-  @apply border-r border-slate-25 dark:border-slate-700;
-}
-
-@mixin border-light-bottom() {
-  @apply border-b border-slate-25 dark:border-slate-700;
-}
-
-// background
-@mixin background-gray() {
-  background: $color-background;
-}
-
-@mixin background-light() {
-  @apply bg-slate-50 dark:bg-slate-800;
-}
-
-@mixin background-white() {
-  @apply bg-white dark:bg-slate-900;
-}
-
 // input form
@mixin ghost-input() {
  box-shadow: none;
@@ -87,65 +15,6 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
  }
 }

-// flex-layout
-@mixin space-between() {
-  display: flex;
-  justify-content: space-between;
-}
-
-@mixin space-between-column() {
-  @include space-between;
-  flex-direction: column;
-}
-
-@mixin space-between-row() {
-  @include space-between;
-  flex-direction: row;
-}
-
-@mixin flex-shrink() {
-  flex: 0 0 auto;
-  max-width: 100%;
-}
-
-@mixin flex-weight($value) {
-  // Grab flex-grow for older browsers.
-  $flex-grow: nth($value, 1);
-
-  // 2009
-  @include prefixer(box-flex, $flex-grow, webkit moz spec);
-
-  // 2011 (IE 10), 2012
-  @include prefixer(flex, $value, webkit moz ms spec);
-}
-
-// full height
-@mixin full-height() {
-  height: 100%;
-}
-
-@mixin round-corner() {
-  border-radius: 1000px;
-}
-
-@mixin scroll-on-hover() {
-  overflow: hidden;
-
-  &:hover {
-    overflow-y: auto;
-  }
-}
-
-
-@mixin horizontal-scroll() {
-  overflow-y: auto;
-}
-
-@mixin elegant-card() {
-  @include normal-shadow;
-  border-radius: $space-small;
-}
-
@mixin color-spinner() {
  @keyframes spinner {
    to {
@@ -230,17 +99,3 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
    border-left: $size solid transparent;
  }
 }
-
-@mixin text-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-@mixin three-column-grid($column-one-width: 16rem,
-  $column-three-width: 16rem) {
-  width: 100%;
-  height: 100%;
-  display: grid;
-  grid-template-columns: minmax($column-one-width, 6fr) 10fr minmax($column-three-width, 6fr);
-}
--- a/app/javascript/dashboard/assets/scss/_next-colors.scss
+++ b/app/javascript/dashboard/assets/scss/_next-colors.scss
@@ -0,0 +1,208 @@
+// scss-lint:disable PropertySortOrder
+@layer base {
+  // NEXT COLORS START
+  :root {
+    // slate
+    --slate-1: 252 252 253;
+    --slate-2: 249 249 251;
+    --slate-3: 240 240 243;
+    --slate-4: 232 232 236;
+    --slate-5: 224 225 230;
+    --slate-6: 217 217 224;
+    --slate-7: 205 206 214;
+    --slate-8: 185 187 198;
+    --slate-9: 139 141 152;
+    --slate-10: 128 131 141;
+    --slate-11: 96 100 108;
+    --slate-12: 28 32 36;
+
+    --iris-1: 253 253 255;
+    --iris-2: 248 248 255;
+    --iris-3: 240 241 254;
+    --iris-4: 230 231 255;
+    --iris-5: 218 220 255;
+    --iris-6: 203 205 255;
+    --iris-7: 184 186 248;
+    --iris-8: 155 158 240;
+    --iris-9: 91 91 214;
+    --iris-10: 81 81 205;
+    --iris-11: 87 83 198;
+    --iris-12: 39 41 98;
+
+    --ruby-1: 255 252 253;
+    --ruby-2: 255 247 248;
+    --ruby-3: 254 234 237;
+    --ruby-4: 255 220 225;
+    --ruby-5: 255 206 214;
+    --ruby-6: 248 191 200;
+    --ruby-7: 239 172 184;
+    --ruby-8: 229 146 163;
+    --ruby-9: 229 70 102;
+    --ruby-10: 220 59 93;
+    --ruby-11: 202 36 77;
+    --ruby-12: 100 23 43;
+
+    --amber-1: 254 253 251;
+    --amber-2: 254 251 233;
+    --amber-3: 255 247 194;
+    --amber-4: 255 238 156;
+    --amber-5: 251 229 119;
+    --amber-6: 243 214 115;
+    --amber-7: 233 193 98;
+    --amber-8: 226 163 54;
+    --amber-9: 255 197 61;
+    --amber-10: 255 186 24;
+    --amber-11: 171 100 0;
+    --amber-12: 79 52 34;
+
+    --teal-1: 250 254 253;
+    --teal-2: 243 251 249;
+    --teal-3: 224 248 243;
+    --teal-4: 204 243 234;
+    --teal-5: 184 234 224;
+    --teal-6: 161 222 210;
+    --teal-7: 131 205 193;
+    --teal-8: 83 185 171;
+    --teal-9: 18 165 148;
+    --teal-10: 13 155 138;
+    --teal-11: 0 133 115;
+    --teal-12: 13 61 56;
+
+    --gray-1: 252 252 252;
+    --gray-2: 249 249 249;
+    --gray-3: 240 240 240;
+    --gray-4: 232 232 232;
+    --gray-5: 224 224 224;
+    --gray-6: 217 217 217;
+    --gray-7: 206 206 206;
+    --gray-8: 187 187 187;
+    --gray-9: 141 141 141;
+    --gray-10: 131 131 131;
+    --gray-11: 100 100 100;
+    --gray-12: 32 32 32;
+
+    --background-color: 253 253 253;
+    --text-blue: 8 109 224;
+    --border-container: 236 236 236;
+    --border-strong: 235 235 235;
+    --border-weak: 234 234 234;
+    --solid-1: 255 255 255;
+    --solid-2: 255 255 255;
+    --solid-3: 255 255 255;
+    --solid-active: 255 255 255;
+    --solid-amber: 252 232 193;
+    --solid-blue: 218 236 255;
+    --solid-iris: 230 231 255;
+
+    --alpha-1: 67, 67, 67, 0.06;
+    --alpha-2: 201, 202, 207, 0.15;
+    --alpha-3: 255, 255, 255, 0.96;
+    --black-alpha-1: 0, 0, 0, 0.12;
+    --black-alpha-2: 0, 0, 0, 0.04;
+    --border-blue: 39, 129, 246, 0.5;
+    --white-alpha: 255, 255, 255, 0.8;
+  }
+
+  .dark {
+    // slate
+    --slate-1: 17 17 19;
+    --slate-2: 24 25 27;
+    --slate-3: 33 34 37;
+    --slate-4: 39 42 45;
+    --slate-5: 46 49 53;
+    --slate-6: 54 58 63;
+    --slate-7: 67 72 78;
+    --slate-8: 90 97 105;
+    --slate-9: 105 110 119;
+    --slate-10: 119 123 132;
+    --slate-11: 176 180 186;
+    --slate-12: 237 238 240;
+
+    --iris-1: 19 19 30;
+    --iris-2: 23 22 37;
+    --iris-3: 32 34 72;
+    --iris-4: 38 42 101;
+    --iris-5: 48 51 116;
+    --iris-6: 61 62 130;
+    --iris-7: 74 74 149;
+    --iris-8: 89 88 177;
+    --iris-9: 91 91 214;
+    --iris-10: 84 114 228;
+    --iris-11: 158 177 255;
+    --iris-12: 224 223 254;
+
+    --ruby-1: 25 17 19;
+    --ruby-2: 30 21 23;
+    --ruby-3: 58 20 30;
+    --ruby-4: 78 19 37;
+    --ruby-5: 94 26 46;
+    --ruby-6: 111 37 57;
+    --ruby-7: 136 52 71;
+    --ruby-8: 179 68 90;
+    --ruby-9: 229 70 102;
+    --ruby-10: 236 90 114;
+    --ruby-11: 255 148 157;
+    --ruby-12: 254 210 225;
+
+    --amber-1: 22 18 12;
+    --amber-2: 29 24 15;
+    --amber-3: 48 32 8;
+    --amber-4: 63 39 0;
+    --amber-5: 77 48 0;
+    --amber-6: 92 61 5;
+    --amber-7: 113 79 25;
+    --amber-8: 143 100 36;
+    --amber-9: 255 197 61;
+    --amber-10: 255 214 10;
+    --amber-11: 255 202 22;
+    --amber-12: 255 231 179;
+
+    --teal-1: 13 21 20;
+    --teal-2: 17 28 27;
+    --teal-3: 13 45 42;
+    --teal-4: 2 59 55;
+    --teal-5: 8 72 67;
+    --teal-6: 20 87 80;
+    --teal-7: 28 105 97;
+    --teal-8: 32 126 115;
+    --teal-9: 18 165 148;
+    --teal-10: 14 179 158;
+    --teal-11: 11 216 182;
+    --teal-12: 173 240 221;
+
+    --gray-1: 17 17 17;
+    --gray-2: 25 25 25;
+    --gray-3: 34 34 34;
+    --gray-4: 42 42 42;
+    --gray-5: 49 49 49;
+    --gray-6: 58 58 58;
+    --gray-7: 72 72 72;
+    --gray-8: 96 96 96;
+    --gray-9: 110 110 110;
+    --gray-10: 123 123 123;
+    --gray-11: 180 180 180;
+    --gray-12: 238 238 238;
+
+    --background-color: 18 18 19;
+    --border-strong: 52 52 52;
+    --border-weak: 38 38 42;
+    --solid-1: 23 23 26;
+    --solid-2: 29 30 36;
+    --solid-3: 44 45 54;
+    --solid-active: 53 57 66;
+    --solid-amber: 42 37 30;
+    --solid-blue: 16 49 91;
+    --solid-iris: 38 42 101;
+    --text-blue: 126 182 255;
+
+    --alpha-1: 36, 36, 36, 0.8;
+    --alpha-2: 139, 147, 182, 0.15;
+    --alpha-3: 36, 38, 45, 0.9;
+    --black-alpha-1: 0, 0, 0, 0.3;
+    --black-alpha-2: 0, 0, 0, 0.2;
+    --border-blue: 39, 129, 246, 0.5;
+    --border-container: 236, 236, 236, 0;
+    --white-alpha: 255, 255, 255, 0.1;
+  }
+}
+// NEXT COLORS END
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -5,6 +5,9 @@
@import 'shared/assets/fonts/InterDisplay/inter-display';
@import 'shared/assets/fonts/inter';

+// Next Colors
+@import 'next-colors';
+
@import 'shared/assets/stylesheets/animations';
@import 'shared/assets/stylesheets/colors';
@import 'shared/assets/stylesheets/spacing';
@@ -54,214 +57,19 @@
  @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;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.dark .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='%23343434' stroke-width='2' stroke-dasharray='6, 8' stroke-dashoffset='0' stroke-linecap='round'/%3E%3C/svg%3E");
+}
+
 // scss-lint:disable PropertySortOrder
@layer base {
-  /* NEXT COLORS START */
-  :root {
-    /* slate */
-    --slate-1: 252 252 253;
-    --slate-2: 249 249 251;
-    --slate-3: 240 240 243;
-    --slate-4: 232 232 236;
-    --slate-5: 224 225 230;
-    --slate-6: 217 217 224;
-    --slate-7: 205 206 214;
-    --slate-8: 185 187 198;
-    --slate-9: 139 141 152;
-    --slate-10: 128 131 141;
-    --slate-11: 96 100 108;
-    --slate-12: 28 32 36;
-
-    --iris-1: 253 253 255;
-    --iris-2: 248 248 255;
-    --iris-3: 240 241 254;
-    --iris-4: 230 231 255;
-    --iris-5: 218 220 255;
-    --iris-6: 203 205 255;
-    --iris-7: 184 186 248;
-    --iris-8: 155 158 240;
-    --iris-9: 91 91 214;
-    --iris-10: 81 81 205;
-    --iris-11: 87 83 198;
-    --iris-12: 39 41 98;
-
-    --ruby-1: 255 252 253;
-    --ruby-2: 255 247 248;
-    --ruby-3: 254 234 237;
-    --ruby-4: 255 220 225;
-    --ruby-5: 255 206 214;
-    --ruby-6: 248 191 200;
-    --ruby-7: 239 172 184;
-    --ruby-8: 229 146 163;
-    --ruby-9: 229 70 102;
-    --ruby-10: 220 59 93;
-    --ruby-11: 202 36 77;
-    --ruby-12: 100 23 43;
-
-    --amber-1: 254 253 251;
-    --amber-2: 254 251 233;
-    --amber-3: 255 247 194;
-    --amber-4: 255 238 156;
-    --amber-5: 251 229 119;
-    --amber-6: 243 214 115;
-    --amber-7: 233 193 98;
-    --amber-8: 226 163 54;
-    --amber-9: 255 197 61;
-    --amber-10: 255 186 24;
-    --amber-11: 171 100 0;
-    --amber-12: 79 52 34;
-
-    --teal-1: 250 254 253;
-    --teal-2: 243 251 249;
-    --teal-3: 224 248 243;
-    --teal-4: 204 243 234;
-    --teal-5: 184 234 224;
-    --teal-6: 161 222 210;
-    --teal-7: 131 205 193;
-    --teal-8: 83 185 171;
-    --teal-9: 18 165 148;
-    --teal-10: 13 155 138;
-    --teal-11: 0 133 115;
-    --teal-12: 13 61 56;
-
-    --gray-1: 252 252 252;
-    --gray-2: 249 249 249;
-    --gray-3: 240 240 240;
-    --gray-4: 232 232 232;
-    --gray-5: 224 224 224;
-    --gray-6: 217 217 217;
-    --gray-7: 206 206 206;
-    --gray-8: 187 187 187;
-    --gray-9: 141 141 141;
-    --gray-10: 131 131 131;
-    --gray-11: 100 100 100;
-    --gray-12: 32 32 32;
-
-    --background-color: 253 253 253;
-    --text-blue: 8 109 224;
-    --border-container: 236 236 236;
-    --border-strong: 235 235 235;
-    --border-weak: 234 234 234;
-    --solid-1: 255 255 255;
-    --solid-2: 255 255 255;
-    --solid-3: 255 255 255;
-    --solid-active: 255 255 255;
-    --solid-amber: 252 232 193;
-    --solid-blue: 218 236 255;
-    --solid-iris: 230 231 255;
-
-    --alpha-1: 67, 67, 67, 0.06;
-    --alpha-2: 201, 202, 207, 0.15;
-    --alpha-3: 255, 255, 255, 0.96;
-    --black-alpha-1: 0, 0, 0, 0.12;
-    --black-alpha-2: 0, 0, 0, 0.04;
-    --border-blue: 39, 129, 246, 0.5;
-    --white-alpha: 255, 255, 255, 0.8;
-  }
-
-  .dark {
-    /* slate */
-    --slate-1: 17 17 19;
-    --slate-2: 24 25 27;
-    --slate-3: 33 34 37;
-    --slate-4: 39 42 45;
-    --slate-5: 46 49 53;
-    --slate-6: 54 58 63;
-    --slate-7: 67 72 78;
-    --slate-8: 90 97 105;
-    --slate-9: 105 110 119;
-    --slate-10: 119 123 132;
-    --slate-11: 176 180 186;
-    --slate-12: 237 238 240;
-
-    --iris-1: 19 19 30;
-    --iris-2: 23 22 37;
-    --iris-3: 32 34 72;
-    --iris-4: 38 42 101;
-    --iris-5: 48 51 116;
-    --iris-6: 61 62 130;
-    --iris-7: 74 74 149;
-    --iris-8: 89 88 177;
-    --iris-9: 91 91 214;
-    --iris-10: 84 114 228;
-    --iris-11: 158 177 255;
-    --iris-12: 224 223 254;
-
-    --ruby-1: 25 17 19;
-    --ruby-2: 30 21 23;
-    --ruby-3: 58 20 30;
-    --ruby-4: 78 19 37;
-    --ruby-5: 94 26 46;
-    --ruby-6: 111 37 57;
-    --ruby-7: 136 52 71;
-    --ruby-8: 179 68 90;
-    --ruby-9: 229 70 102;
-    --ruby-10: 236 90 114;
-    --ruby-11: 255 148 157;
-    --ruby-12: 254 210 225;
-
-    --amber-1: 22 18 12;
-    --amber-2: 29 24 15;
-    --amber-3: 48 32 8;
-    --amber-4: 63 39 0;
-    --amber-5: 77 48 0;
-    --amber-6: 92 61 5;
-    --amber-7: 113 79 25;
-    --amber-8: 143 100 36;
-    --amber-9: 255 197 61;
-    --amber-10: 255 214 10;
-    --amber-11: 255 202 22;
-    --amber-12: 255 231 179;
-
-    --teal-1: 13 21 20;
-    --teal-2: 17 28 27;
-    --teal-3: 13 45 42;
-    --teal-4: 2 59 55;
-    --teal-5: 8 72 67;
-    --teal-6: 20 87 80;
-    --teal-7: 28 105 97;
-    --teal-8: 32 126 115;
-    --teal-9: 18 165 148;
-    --teal-10: 14 179 158;
-    --teal-11: 11 216 182;
-    --teal-12: 173 240 221;
-
-    --gray-1: 17 17 17;
-    --gray-2: 25 25 25;
-    --gray-3: 34 34 34;
-    --gray-4: 42 42 42;
-    --gray-5: 49 49 49;
-    --gray-6: 58 58 58;
-    --gray-7: 72 72 72;
-    --gray-8: 96 96 96;
-    --gray-9: 110 110 110;
-    --gray-10: 123 123 123;
-    --gray-11: 180 180 180;
-    --gray-12: 238 238 238;
-
-    --background-color: 18 18 19;
-    --border-strong: 52 52 52;
-    --border-weak: 38 38 42;
-    --solid-1: 23 23 26;
-    --solid-2: 29 30 36;
-    --solid-3: 44 45 54;
-    --solid-active: 53 57 66;
-    --solid-amber: 42 37 30;
-    --solid-blue: 16 49 91;
-    --solid-iris: 38 42 101;
-    --text-blue: 126 182 255;
-
-    --alpha-1: 36, 36, 36, 0.8;
-    --alpha-2: 139, 147, 182, 0.15;
-    --alpha-3: 36, 38, 45, 0.9;
-    --black-alpha-1: 0, 0, 0, 0.3;
-    --black-alpha-2: 0, 0, 0, 0.2;
-    --border-blue: 39, 129, 246, 0.5;
-    --border-container: 236, 236, 236, 0;
-    --white-alpha: 255, 255, 255, 0.1;
-  }
-  /* NEXT COLORS END */
-
  :root {
    --color-amber-25: 254 253 251;
    --color-amber-50: 255 249 237;
--- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
@@ -1,13 +1,13 @@
@mixin label-multiselect-hover {
  &::after {
-    @apply text-woot-600 dark:text-woot-600;
+    @apply text-n-brand;
  }

  &:hover {
-    @apply bg-slate-50 dark:bg-slate-700;
+    @apply bg-n-slate-3;

    &::after {
-      @apply text-woot-500 dark:text-woot-500;
+      @apply text-n-blue-text;
    }
  }
 }
@@ -18,20 +18,16 @@
  }

  &.multiselect--disabled {
-    @apply opacity-50 border border-slate-200 dark:border-slate-600 rounded-md cursor-not-allowed;
+    @apply opacity-50  rounded-lg cursor-not-allowed pointer-events-auto;

    .multiselect__select {
-      @apply cursor-not-allowed bg-white dark:bg-slate-900 rounded-md;
-    }
-
-    .multiselect__tags {
-      @apply border-0;
+      @apply cursor-not-allowed bg-transparent rounded-lg;
    }
  }

  .multiselect--active {
    > .multiselect__tags {
-      @apply border-woot-500 dark:border-woot-500;
+      @apply outline-n-blue-border;
    }
  }

@@ -44,7 +40,7 @@
  }

  .multiselect__content-wrapper {
-    @apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 text-slate-800 dark:text-slate-100;
+    @apply bg-n-alpha-black2 text-n-slate-12 backdrop-blur-[100px] border-0 border-none outline outline-1 outline-n-weak rounded-b-lg;
  }

  .multiselect__content {
@@ -61,15 +57,19 @@
        @apply mb-0;
      }

+      &::after {
+        @apply bottom-0 flex items-center justify-center text-center;
+      }
+
      &.multiselect__option--highlight {
-        @apply bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100;
+        @apply bg-n-alpha-black2 text-n-slate-12;
      }

      &.multiselect__option--highlight:hover {
-        @apply bg-woot-50 dark:bg-woot-600 text-slate-800 dark:text-slate-100;
+        @apply bg-n-brand/10 text-n-slate-12;

        &::after {
-          @apply bg-woot-50 dark:bg-woot-600 text-slate-600 dark:text-slate-200;
+          @apply bg-transparent text-center text-n-slate-12;
        }
      }

@@ -78,17 +78,17 @@
      }

      &.multiselect__option--selected {
-        @apply bg-woot-50 dark:bg-woot-600 text-slate-800 dark:text-slate-100;
+        @apply bg-n-brand/20 text-n-slate-12;
+
+        &::after {
+          @apply bg-transparent;
+        }

        &.multiselect__option--highlight:hover {
-          @apply bg-woot-75 dark:bg-woot-600;
-
-          &::after {
-            @apply bg-transparent;
-          }
+          @apply bg-transparent;

          &::after:hover {
-            @apply text-slate-800 dark:text-slate-100;
+            @apply text-n-slate-12 bg-transparent;
          }
        }
      }
@@ -96,23 +96,27 @@
  }

  .multiselect__tags {
-    @apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 m-0 min-h-[2.875rem] pt-0;
+    @apply bg-n-alpha-black2 border-0 grid items-center w-full border-none outline-1 outline outline-n-weak hover:outline-n-slate-6 m-0 min-h-[2.875rem] rounded-lg pt-0;

    input {
-      @apply border-0 border-none;
+      @apply border-0 border-none bg-transparent dark:bg-transparent text-n-slate-12 placeholder:text-n-slate-10;
    }
  }

+  .multiselect__spinner {
+    background-color: transparent;
+  }
+
  .multiselect__tags-wrap {
    @apply inline-block leading-none mt-1;
  }

  .multiselect__placeholder {
-    @apply text-slate-400 dark:text-slate-400 font-normal pt-3;
+    @apply text-n-slate-10 font-normal pt-3;
  }

  .multiselect__tag {
-    @apply bg-slate-50 dark:bg-slate-800 mt-1 text-slate-800 dark:text-slate-100 pr-6 pl-2.5 py-1.5;
+    @apply bg-n-alpha-white mt-1 text-n-slate-12 pr-6 pl-2.5 py-1.5;
  }

  .multiselect__tag-icon {
@@ -125,7 +129,7 @@
  }

  .multiselect__single {
-    @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 inline-block mb-0 py-3 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis;
+    @apply bg-transparent text-n-slate-12 inline-block mb-0 py-3 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis;
  }
 }

@@ -143,11 +147,11 @@
    }

    > .multiselect__tags {
-      @apply border-transparent;
+      @apply outline-transparent;
    }

    &.multiselect--active > .multiselect__tags {
-      @apply border-woot-500 dark:border-woot-500;
+      @apply outline-n-blue-border;
    }
  }
 }
@@ -179,7 +183,7 @@
  .multiselect__tags,
  .multiselect__input,
  .multiselect {
-    @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 rounded-[5px] text-sm  min-h-[2.5rem];
+    @apply text-n-slate-12 rounded-lg text-sm  min-h-[2.5rem];
  }

  .multiselect__input {
@@ -187,7 +191,7 @@
  }

  .multiselect__single {
-    @apply items-center flex m-0 text-sm max-h-[2.375rem] text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-900 py-3 px-0.5;
+    @apply items-center flex m-0 text-sm max-h-[2.375rem] bg-transparent text-n-slate-12 py-3 px-0.5;
  }

  .multiselect__placeholder {
@@ -208,6 +212,24 @@
  }
 }

+.multiselect--disabled {
+  background-color: rgba(var(--black-alpha-2)) !important;
+
+  .multiselect__tags {
+    @apply hover:outline-n-weak;
+  }
+}
+
+.multiselect--active {
+  .multiselect__select::before {
+    @apply top-[62%];
+  }
+}
+
+.multiselect__select::before {
+  top: 60% !important;
+}
+
 .multiselect-wrap--medium {
  .multiselect__tags,
  .multiselect__input {
@@ -217,16 +239,16 @@
  .multiselect__tags,
  .multiselect__input,
  .multiselect {
-    @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 text-sm h-12 min-h-[3rem];
+    @apply bg-n-alpha-black2 text-n-slate-12 text-sm h-12 min-h-[3rem];
  }

  .multiselect__input {
    @apply h-[2.875rem] min-h-[2.875rem];
-    margin-bottom: 0px !important;
+    margin-bottom: 0 !important;
  }

  .multiselect__single {
-    @apply items-center flex m-0 text-sm py-1 px-0.5 text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-900;
+    @apply items-center flex m-0 text-sm py-1 px-0.5 bg-transparent text-n-slate-12;
  }

  .multiselect__placeholder {
--- a/app/javascript/dashboard/assets/scss/widgets/_base.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_base.scss
@@ -1,22 +1,22 @@
 // scss-lint:disable QualifyingElement

 // Base typography
+// -------------------------
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  @apply font-medium text-slate-800 dark:text-slate-50;
+  @apply font-medium text-n-slate-12;
 }

 p {
  text-rendering: optimizeLegibility;
-
  @apply mb-2 leading-[1.65] text-sm;

  a {
-    @apply text-woot-500 dark:text-woot-500 cursor-pointer;
+    @apply text-n-brand dark:text-n-brand cursor-pointer;
  }
 }

@@ -41,64 +41,82 @@ dl:not(.reset-base) {
 }

 // Form elements
+// -------------------------
 label {
-  @apply text-slate-800 dark:text-slate-200 block m-0 leading-7 text-sm font-medium;
-
-  &.error {
-    input {
-      @apply mb-1;
-    }
-  }
+  @apply text-n-slate-12 block m-0 leading-7 text-sm font-medium;
 }

 .input-wrap,
 .help-text {
-  @apply text-slate-800 dark:text-slate-100 text-sm font-medium;
-
-  .help-text {
-    @apply font-normal text-slate-600 dark:text-slate-400;
-  }
+  @apply text-n-slate-11 text-sm font-medium;
 }

 // Focus outline removal
 .button,
-textarea,
-input:focus {
+textarea {
  outline: none;
 }

-// Inputs
-input[type='text']:not(.reset-base),
-input[type='number']:not(.reset-base),
-input[type='password']:not(.reset-base),
-input[type='date']:not(.reset-base),
-input[type='email']:not(.reset-base),
-input[type='url']:not(.reset-base) {
-  @apply block box-border w-full transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] h-10 appearance-none mx-0 mt-0 mb-4 p-2 rounded-md text-base font-normal bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
+// Field base styles (Input, TextArea, Select)
+@layer components {
+  .field-base {
+    @apply block box-border w-full transition-colors duration-[0.25s] ease-[ease-in-out] focus:outline-n-brand dark:focus:outline-n-brand appearance-none mx-0 mt-0 mb-4 py-2 px-3 rounded-lg text-base font-normal bg-n-alpha-black2 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 text-n-slate-12 border-none outline outline-1 outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6;
+  }

-  &[disabled] {
-    @apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600 cursor-not-allowed;
+  .field-disabled {
+    @apply opacity-50 outline-n-weak dark:outline-n-weak cursor-not-allowed;
+  }
+
+  .field-error {
+    @apply 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;
  }
 }

-input[type='file'] {
-  @apply bg-white dark:bg-n-solid-1 leading-[1.15] mb-4;
+$form-input-selector: "input[type]:not([type='file']):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='button']):not([type='submit']):not([type='reset']):not([type='color']):not([type='image']):not([type='hidden']):not(.reset-base):not(.multiselect__input):not(.no-margin)";
+
+#{$form-input-selector} {
+  @apply field-base h-10;
+
+  &[disabled] {
+    @apply field-disabled;
+  }
+
+  &.error {
+    @apply field-error mb-1;
+  }
+}
+
+input[type='file']:not(.multiselect__input) {
+  @apply leading-[1.15] mb-4 border-0 bg-transparent text-sm;
 }

 // Select
 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-position: right -1rem center;
  background-size: 9px 6px;
-  @apply h-10 mx-0 mt-0 mb-4 bg-origin-content focus-visible:outline-none bg-no-repeat py-2 pr-6 pl-2 rounded-md w-full text-base font-normal appearance-none transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
+
+  @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;
+
+  &[disabled] {
+    @apply field-disabled;
+  }
 }

 // Textarea
 textarea {
-  @apply block box-border w-full transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] h-16 appearance-none mx-0 mt-0 mb-4 p-2 rounded-md text-base font-normal bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
+  @apply field-base h-16;

  &[disabled] {
-    @apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600 cursor-not-allowed;
+    @apply field-disabled;
+  }
+}
+
+// Add mb-1 when .help-text exists within the same label container
+label:has(.help-text) {
+  input,
+  textarea,
+  select {
+    margin-bottom: 0.25rem !important;
  }
 }

@@ -109,18 +127,41 @@ textarea {
  }
 }

+// FormKit support
+.formkit-outer[data-invalid='true'] {
+  #{$form-input-selector},
+  textarea,
+  select {
+    @apply field-error;
+  }
+
+  .formkit-message {
+    @apply text-n-ruby-9 dark:text-n-ruby-9 block text-sm mb-2.5 w-full;
+  }
+}
+
 .error {
-  input,
+  #{$form-input-selector},
  input:not([type]),
  textarea,
  select,
  .multiselect > .multiselect__tags,
  .multiselect:not(.no-margin) {
-    @apply border border-solid border-red-400 dark:border-red-400 mb-1;
+    @apply field-error;
+  }
+
+  // Only add mb-1 when .message exists within the same .error container
+  // And exclude no-margin from the margin-bottom
+  &:has(.message) {
+    input:not(.no-margin),
+    textarea,
+    select {
+      margin-bottom: 0.25rem !important;
+    }
  }

  .message {
-    @apply text-red-400 dark:text-red-400 block text-sm mb-2.5 w-full;
+    @apply text-n-ruby-9 dark:text-n-ruby-9 block text-sm mb-2.5 w-full;
  }
 }

@@ -130,7 +171,7 @@ textarea {
  }

  .error {
-    @apply border-red-400 dark:border-red-400;
+    @apply text-n-ruby-9 dark:text-n-ruby-9;
  }
 }

@@ -141,11 +182,11 @@ code {
  @apply text-xs border-0;

  &.hljs {
-    @apply bg-n-slate-3 dark:bg-n-solid-3 text-slate-800 dark:text-slate-50 rounded-lg p-5;
+    @apply bg-n-slate-3 dark:bg-n-solid-3 text-n-slate-12 rounded-lg p-5;

    .hljs-number,
    .hljs-string {
-      @apply text-red-800 dark:text-red-400;
+      @apply text-n-ruby-9 dark:text-n-ruby-9;
    }

    .hljs-name,
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -42,7 +42,7 @@ button {
    }
  }

-  &:hover:not(.secondary):not(.success):not(.alert):not(.warning):not(
+  &:hover:not(:disabled):not(.success):not(.alert):not(.warning):not(
      .clear
    ):not(.smooth):not(.hollow) {
    @apply bg-n-brand/80 dark:bg-n-brand/80;
@@ -117,63 +117,63 @@ button {
  }

  &.hollow {
-    @apply border border-n-brand/40 bg-transparent text-n-blue-text hover:bg-n-brand/20;
+    @apply border border-n-brand/40 bg-transparent text-n-blue-text hover:enabled:bg-n-brand/20;

    &.secondary {
-      @apply text-n-slate-12 border-n-slate-5 hover:bg-n-slate-5;
+      @apply text-n-slate-12 border-n-slate-5 hover:enabled:bg-n-slate-5;
    }

    &.success {
-      @apply text-n-teal-9 border-n-teal-8 hover:bg-n-teal-5;
+      @apply text-n-teal-9 border-n-teal-8 hover:enabled:bg-n-teal-5;
    }

    &.alert {
-      @apply text-n-ruby-9 border-n-ruby-8 hover:bg-n-ruby-5;
+      @apply text-n-ruby-9 border-n-ruby-8 hover:enabled:bg-n-ruby-5;
    }

    &.warning {
-      @apply text-n-amber-9 border-n-amber-8 hover:bg-n-amber-5;
+      @apply text-n-amber-9 border-n-amber-8 hover:enabled:bg-n-amber-5;
    }
  }

  // Smooth style
  &.smooth {
-    @apply bg-n-brand/10 dark:bg-n-brand/30 text-n-blue-text hover:bg-n-brand/20 dark:hover:bg-n-brand/40;
+    @apply bg-n-brand/10 dark:bg-n-brand/30 text-n-blue-text hover:enabled:bg-n-brand/20 dark:hover:enabled:bg-n-brand/40;

    &.secondary {
-      @apply bg-n-slate-4 text-n-slate-11 hover:text-n-slate-11 hover:bg-n-slate-5;
+      @apply bg-n-slate-4 text-n-slate-11 hover:enabled:text-n-slate-11 hover:enabled:bg-n-slate-5;
    }

    &.success {
-      @apply bg-n-teal-4 text-n-teal-11 hover:text-n-teal-11 hover:bg-n-teal-5;
+      @apply bg-n-teal-4 text-n-teal-11 hover:enabled:text-n-teal-11 hover:enabled:bg-n-teal-5;
    }

    &.alert {
-      @apply bg-n-ruby-4 text-n-ruby-11 hover:text-n-ruby-11 hover:bg-n-ruby-5;
+      @apply bg-n-ruby-4 text-n-ruby-11 hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-5;
    }

    &.warning {
-      @apply bg-n-amber-4 text-n-amber-11 hover:text-n-amber-11 hover:bg-n-amber-5;
+      @apply bg-n-amber-4 text-n-amber-11 hover:enabled:text-n-amber-11 hover:enabled:bg-n-amber-5;
    }
  }

  &.clear {
-    @apply text-n-blue-text hover:bg-n-brand/10 dark:hover:bg-n-brand/30;
+    @apply text-n-blue-text hover:enabled:bg-n-brand/10 dark:hover:enabled:bg-n-brand/30;

    &.secondary {
-      @apply text-n-slate-12 hover:bg-n-slate-4;
+      @apply text-n-slate-12 hover:enabled:bg-n-slate-4;
    }

    &.success {
-      @apply text-n-teal-10 hover:bg-n-teal-4;
+      @apply text-n-teal-10 hover:enabled:bg-n-teal-4;
    }

    &.alert {
-      @apply text-n-ruby-11 hover:bg-n-ruby-4;
+      @apply text-n-ruby-11 hover:enabled:bg-n-ruby-4;
    }

    &.warning {
-      @apply text-n-amber-11 hover:bg-n-amber-4;
+      @apply text-n-amber-11 hover:enabled:bg-n-amber-4;
    }

    &:active {
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
@@ -247,10 +247,9 @@ defineExpose({
            :placeholder="item.placeholder"
            class="[&>div>button]:h-8"
            :class="{
-              '[&>div>button]:bg-n-alpha-black2 [&>div>button]:!outline-transparent':
+              '[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:!outline-transparent':
                !isDetailsView,
-              '[&>div>button]:!outline-n-weak [&>div>button]:hover:!outline-n-strong [&>div>button]:!bg-n-alpha-black2':
-                isDetailsView,
+              '[&>div>button]:!bg-n-alpha-black2': isDetailsView,
            }"
            @update:model-value="handleCountrySelection"
          />
@@ -266,7 +265,9 @@ defineExpose({
            :placeholder="item.placeholder"
            :message-type="getMessageType(item.key)"
            :custom-input-class="`h-8 !pt-1 !pb-1 ${
-              !isDetailsView ? '[&:not(.error,.focus)]:!border-transparent' : ''
+              !isDetailsView
+                ? '[&:not(.error,.focus)]:!outline-transparent'
+                : ''
            }`"
            class="w-full"
            @input="
@@ -303,7 +304,7 @@ defineExpose({
            v-model="
              state.additionalAttributes.socialProfiles[item.key.toLowerCase()]
            "
-            class="w-auto min-w-[100px] text-sm bg-transparent reset-base text-n-slate-12 dark:text-n-slate-12 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10"
+            class="w-auto min-w-[100px] text-sm bg-transparent outline-none reset-base text-n-slate-12 dark:text-n-slate-12 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10"
            :placeholder="item.placeholder"
            :size="item.placeholder.length"
            @input="emit('update', state)"
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue
@@ -55,13 +55,13 @@ defineExpose({ dialogRef, contactsFormRef, onSuccess });
          @click="closeDialog"
        />
        <Button
+          type="submit"
          :label="
            t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.SAVE_CONTACT')
          "
          color="blue"
          :disabled="contactsFormRef?.isFormInvalid"
          :is-loading="isCreatingContact"
-          @click="handleDialogConfirm"
        />
      </div>
    </template>
--- a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue
@@ -135,7 +135,7 @@ const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
          :placeholder="
            t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.SEARCH_PLACEHOLDER')
          "
-          class="w-full h-8 py-2 pl-10 pr-2 text-sm border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+          class="w-full h-8 py-2 pl-10 pr-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
        />
      </div>
      <div
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
@@ -75,7 +75,7 @@ onMounted(() => {
      <div>
        <div class="flex justify-between w-full gap-4 py-2">
          <label
-            class="text-sm font-medium whitespace-nowrap min-w-[6.25rem] text-slate-900 dark:text-slate-50"
+            class="text-sm font-medium whitespace-nowrap min-w-[6.25rem] text-n-slate-12"
          >
            {{
              t(
@@ -113,7 +113,7 @@ onMounted(() => {
        </div>
        <div class="flex justify-between w-full gap-3 py-2">
          <label
-            class="text-sm font-medium whitespace-nowrap min-w-[7.5rem] text-slate-900 dark:text-slate-50"
+            class="text-sm font-medium whitespace-nowrap min-w-[7.5rem] text-n-slate-12"
          >
            {{
              t('HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TAGS')
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue
@@ -95,7 +95,7 @@ defineExpose({ dialogRef });
        :placeholder="
          t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.COMBOBOX.PLACEHOLDER')
        "
-        class="[&>div>button]:!border-n-slate-5 [&>div>button]:dark:!border-n-slate-5"
+        class="[&>div>button:not(.focused)]:!outline-n-slate-5 [&>div>button:not(.focused)]:dark:!outline-n-slate-5"
      />
    </div>
  </Dialog>
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
@@ -303,7 +303,7 @@ const handleAvatarDelete = () => {
          :message="
            t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.HELP_TEXT')
          "
-          class="[&>div>button]:!outline-n-weak"
+          class="[&>div>button:not(.focused)]:!outline-n-weak"
        />
      </div>
      <div class="flex items-start justify-between w-full gap-2">
--- a/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
@@ -27,8 +27,14 @@ const props = defineProps({
    type: String,
    default: null,
  },
+  isModal: {
+    type: Boolean,
+    default: false,
+  },
 });

+const emit = defineEmits(['close']);
+
 const store = useStore();
 const { t } = useI18n();

@@ -61,6 +67,8 @@ const directUploadsEnabled = computed(
 const activeContact = computed(() => contactById.value(props.contactId));

 const composePopoverClass = computed(() => {
+  if (props.isModal) return '';
+
  return props.alignPosition === 'right'
    ? 'absolute ltr:left-0 ltr:right-[unset] rtl:right-0 rtl:left-[unset]'
    : 'absolute rtl:left-0 rtl:right-[unset] ltr:right-0 ltr:left-[unset]';
@@ -131,9 +139,14 @@ const clearSelectedContact = () => {

 const closeCompose = () => {
  showComposeNewConversation.value = false;
-  selectedContact.value = null;
+  if (!props.contactId) {
+    // If contactId is passed as prop
+    // Then don't allow to remove the selected contact
+    selectedContact.value = null;
+  }
  targetInbox.value = null;
  resetContacts();
+  emit('close');
 };

 const createConversation = async ({ payload, isFromWhatsApp }) => {
@@ -182,7 +195,15 @@ watch(
 );

 const handleClickOutside = () => {
+  if (!showComposeNewConversation.value) return;
+
  showComposeNewConversation.value = false;
+  emit('close');
+};
+
+const onModalBackdropClick = () => {
+  if (!props.isModal) return;
+  handleClickOutside();
 };

 onMounted(() => resetContacts());
@@ -205,7 +226,7 @@ useKeyboardEvents(keyboardEvents);
    v-on-click-outside="[
      handleClickOutside,
      // Fixed and edge case https://github.com/chatwoot/chatwoot/issues/10785
-      // This will prevent closing the compose conversation modal when the editor Create link popup is open.
+      // This will prevent closing the compose conversation modal when the editor Create link popup is open
      { ignore: ['div.ProseMirror-prompt'] },
    ]"
    class="relative"
@@ -218,29 +239,37 @@ useKeyboardEvents(keyboardEvents);
      :is-open="showComposeNewConversation"
      :toggle="toggle"
    />
-    <ComposeNewConversationForm
+    <div
      v-if="showComposeNewConversation"
-      :contacts="contacts"
-      :contact-id="contactId"
-      :is-loading="isSearching"
-      :current-user="currentUser"
-      :selected-contact="selectedContact"
-      :target-inbox="targetInbox"
-      :is-creating-contact="isCreatingContact"
-      :is-fetching-inboxes="isFetchingInboxes"
-      :is-direct-uploads-enabled="directUploadsEnabled"
-      :contact-conversations-ui-flags="uiFlags"
-      :contacts-ui-flags="contactsUiFlags"
-      :class="composePopoverClass"
-      :message-signature="messageSignature"
-      :send-with-signature="sendWithSignature"
-      @search-contacts="onContactSearch"
-      @reset-contact-search="resetContacts"
-      @update-selected-contact="handleSelectedContact"
-      @update-target-inbox="handleTargetInbox"
-      @clear-selected-contact="clearSelectedContact"
-      @create-conversation="createConversation"
-      @discard="closeCompose"
-    />
+      :class="{
+        'fixed z-50 bg-n-alpha-black1 backdrop-blur-[4px] flex items-start pt-[clamp(3rem,15vh,12rem)] justify-center inset-0':
+          isModal,
+      }"
+      @click.self="onModalBackdropClick"
+    >
+      <ComposeNewConversationForm
+        :class="[{ 'mt-2': !isModal }, composePopoverClass]"
+        :contacts="contacts"
+        :contact-id="contactId"
+        :is-loading="isSearching"
+        :current-user="currentUser"
+        :selected-contact="selectedContact"
+        :target-inbox="targetInbox"
+        :is-creating-contact="isCreatingContact"
+        :is-fetching-inboxes="isFetchingInboxes"
+        :is-direct-uploads-enabled="directUploadsEnabled"
+        :contact-conversations-ui-flags="uiFlags"
+        :contacts-ui-flags="contactsUiFlags"
+        :message-signature="messageSignature"
+        :send-with-signature="sendWithSignature"
+        @search-contacts="onContactSearch"
+        @reset-contact-search="resetContacts"
+        @update-selected-contact="handleSelectedContact"
+        @update-target-inbox="handleTargetInbox"
+        @clear-selected-contact="clearSelectedContact"
+        @create-conversation="createConversation"
+        @discard="closeCompose"
+      />
+    </div>
  </div>
 </template>
--- a/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
@@ -232,4 +232,20 @@ useKeyboardEvents(keyboardEvents);
 .emoji-dialog::before {
  @apply hidden;
 }
+
+// The <label> tag inside the file-upload component overlaps the button due to its position.
+// This causes the button's hover state to not work, as it's positioned below the label (z-index).
+// Increasing the button's z-index would break the file upload functionality.
+// This style ensures the label remains clickable while preserving the button's hover effect.
+:deep() {
+  .file-uploads.file-uploads-html5 {
+    label {
+      @apply hover:cursor-pointer;
+    }
+
+    &:hover button {
+      @apply dark:bg-n-solid-2 bg-n-alpha-2;
+    }
+  }
+}
 </style>
--- a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
@@ -265,7 +265,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {

 <template>
  <div
-    class="w-[42rem] mt-2 divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl"
+    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl"
  >
    <ContactSelector
      :contacts="contacts"
--- a/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
@@ -113,7 +113,8 @@ const handleInput = value => {
      </div>
      <div
        v-else-if="selectedContact"
-        class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 px-3 min-h-7 min-w-0"
+        class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 min-h-7 min-w-0"
+        :class="!contactId ? 'ltr:pl-3 rtl:pr-3 ltr:pr-1 rtl:pl-1' : 'px-3'"
      >
        <span class="text-sm truncate text-n-slate-12">
          {{
@@ -123,6 +124,7 @@ const handleInput = value => {
          }}
        </span>
        <Button
+          v-if="!contactId"
          variant="ghost"
          icon="i-lucide-x"
          color="slate"
--- a/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
@@ -52,7 +52,7 @@ const targetInboxLabel = computed(() => {
    </label>
    <div
      v-if="targetInbox"
-      class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 truncate px-3 h-7 min-w-0"
+      class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 truncate ltr:pl-3 rtl:pr-3 ltr:pr-1 rtl:pl-1 h-7 min-w-0"
    >
      <span class="text-sm truncate text-n-slate-12">
        {{ targetInboxLabel }}
--- a/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue
@@ -84,7 +84,7 @@ const handleSendMessage = template => {
    />
    <div
      v-if="showTemplatesMenu"
-      class="absolute top-full mt-1.5 max-h-96 overflow-y-auto left-0 flex flex-col gap-2 p-4 items-center w-[350px] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+      class="absolute top-full mt-1.5 max-h-96 overflow-y-auto left-0 flex flex-col gap-2 p-4 items-center w-[21.875rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
    >
      <div class="relative w-full">
        <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
@@ -96,7 +96,7 @@ const handleSendMessage = template => {
              'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.SEARCH_PLACEHOLDER'
            )
          "
-          class="w-full h-8 py-2 pl-10 pr-2 text-sm border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+          class="w-full h-8 py-2 pl-10 pr-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
        />
      </div>
      <div
--- a/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue
@@ -106,7 +106,7 @@ onMounted(() => {

 <template>
  <div
-    class="absolute top-full mt-1.5 max-h-[500px] overflow-y-auto left-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[460px] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+    class="absolute top-full mt-1.5 max-h-[30rem] overflow-y-auto left-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[28.75rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
  >
    <span class="text-sm text-n-slate-12">
      {{
--- a/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
+++ b/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
@@ -25,6 +25,11 @@ export const generateLabelForContactableInboxesList = ({
    channelType === INBOX_TYPES.TWILIO ||
    channelType === INBOX_TYPES.WHATSAPP
  ) {
+    // Handled separately for Twilio Inbox where phone number is  not mandatory.
+    // You can send message to a contact with Messaging Service Id.
+    if (!phoneNumber) {
+      return name;
+    }
    return `${name} (${phoneNumber})`;
  }
  return name;
--- a/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
+++ b/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
@@ -8,8 +8,8 @@ vi.mock('dashboard/api/contacts');
 describe('composeConversationHelper', () => {
  describe('generateLabelForContactableInboxesList', () => {
    const contact = {
-      name: 'John Doe',
-      email: 'john@example.com',
+      name: 'Priority Inbox',
+      email: 'hello@example.com',
      phoneNumber: '+1234567890',
    };

@@ -19,7 +19,7 @@ describe('composeConversationHelper', () => {
          ...contact,
          channelType: INBOX_TYPES.EMAIL,
        })
-      ).toBe('John Doe (john@example.com)');
+      ).toBe('Priority Inbox (hello@example.com)');
    });

    it('generates label for twilio inbox', () => {
@@ -28,7 +28,14 @@ describe('composeConversationHelper', () => {
          ...contact,
          channelType: INBOX_TYPES.TWILIO,
        })
-      ).toBe('John Doe (+1234567890)');
+      ).toBe('Priority Inbox (+1234567890)');
+
+      expect(
+        helpers.generateLabelForContactableInboxesList({
+          name: 'Priority Inbox',
+          channelType: INBOX_TYPES.TWILIO,
+        })
+      ).toBe('Priority Inbox');
    });

    it('generates label for whatsapp inbox', () => {
@@ -37,7 +44,7 @@ describe('composeConversationHelper', () => {
          ...contact,
          channelType: INBOX_TYPES.WHATSAPP,
        })
-      ).toBe('John Doe (+1234567890)');
+      ).toBe('Priority Inbox (+1234567890)');
    });

    it('generates label for other inbox types', () => {
@@ -46,7 +53,7 @@ describe('composeConversationHelper', () => {
          ...contact,
          channelType: 'Channel::Api',
        })
-      ).toBe('John Doe');
+      ).toBe('Priority Inbox');
    });
  });

--- a/app/javascript/dashboard/components-next/banner/Banner.vue
+++ b/app/javascript/dashboard/components-next/banner/Banner.vue
@@ -30,11 +30,11 @@ const bannerClass = computed(() => {

 const buttonClass = computed(() => {
  const classMap = {
-    slate: 'bg-n-slate-4 text-n-slate-11',
-    amber: 'bg-n-amber-4 text-n-amber-11',
-    teal: 'bg-n-teal-4 text-n-teal-11',
-    ruby: 'bg-n-ruby-4 text-n-ruby-11',
-    blue: 'bg-n-blue-4 text-n-blue-11',
+    slate: 'bg-n-slate-4 hover:bg-n-slate-5 text-n-slate-11',
+    amber: 'bg-n-amber-4 hover:bg-n-amber-5 text-n-amber-11',
+    teal: 'bg-n-teal-4 hover:bg-n-teal-5 text-n-teal-11',
+    ruby: 'bg-n-ruby-4 hover:bg-n-ruby-5 text-n-ruby-11',
+    blue: 'bg-n-blue-4 hover:bg-n-blue-5 text-n-blue-11',
  };

  return classMap[props.color];
--- a/app/javascript/dashboard/components-next/button/Button.vue
+++ b/app/javascript/dashboard/components-next/button/Button.vue
@@ -100,49 +100,57 @@ const STYLE_CONFIG = {
  colors: {
    blue: {
      solid:
-        'bg-n-brand text-white hover:enabled:brightness-110 outline-transparent',
+        'bg-n-brand text-white hover:enabled:brightness-110 focus-visible:brightness-110 outline-transparent',
      faded:
-        'bg-n-brand/10 text-n-blue-text hover:enabled:bg-n-brand/20 outline-transparent',
-      outline: 'text-n-blue-text outline-n-blue-border',
-      ghost: 'text-n-blue-text hover:enabled:bg-n-alpha-2 outline-transparent',
-      link: 'text-n-blue-text hover:enabled:underline outline-transparent',
+        'bg-n-brand/10 text-n-blue-text hover:enabled:bg-n-brand/20 focus-visible:bg-n-brand/20 outline-transparent',
+      outline: 'text-n-blue-text outline-n-brand',
+      ghost:
+        'text-n-blue-text hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
+      link: 'text-n-blue-text hover:enabled:underline focus-visible:underline outline-transparent',
    },
    ruby: {
      solid:
-        'bg-n-ruby-9 text-white hover:enabled:bg-n-ruby-10 outline-transparent',
+        'bg-n-ruby-9 text-white hover:enabled:bg-n-ruby-10 focus-visible:bg-n-ruby-10 outline-transparent',
      faded:
-        'bg-n-ruby-9/10 text-n-ruby-11 hover:enabled:bg-n-ruby-9/20 outline-transparent',
-      outline: 'text-n-ruby-11 hover:enabled:bg-n-ruby-9/10 outline-n-ruby-8',
-      ghost: 'text-n-ruby-11 hover:enabled:bg-n-alpha-2 outline-transparent',
-      link: 'text-n-ruby-9 hover:enabled:underline outline-transparent',
+        'bg-n-ruby-9/10 text-n-ruby-11 hover:enabled:bg-n-ruby-9/20 focus-visible:bg-n-ruby-9/20 outline-transparent',
+      outline:
+        'text-n-ruby-11 hover:enabled:bg-n-ruby-9/10 focus-visible:bg-n-ruby-9/10 outline-n-ruby-8',
+      ghost:
+        'text-n-ruby-11 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
+      link: 'text-n-ruby-9 hover:enabled:underline focus-visible:underline outline-transparent',
    },
    amber: {
      solid:
-        'bg-n-amber-9 text-white hover:enabled:bg-n-amber-10 outline-transparent',
+        'bg-n-amber-9 text-white hover:enabled:bg-n-amber-10 focus-visible:bg-n-amber-10 outline-transparent',
      faded:
-        'bg-n-amber-9/10 text-n-slate-12 hover:enabled:bg-n-amber-9/20 outline-transparent',
+        'bg-n-amber-9/10 text-n-slate-12 hover:enabled:bg-n-amber-9/20 focus-visible:bg-n-amber-9/20 outline-transparent',
      outline:
-        'text-n-amber-11 hover:enabled:bg-n-amber-9/10 outline-n-amber-9',
-      link: 'text-n-amber-9 hover:enabled:underline outline-transparent',
-      ghost: 'text-n-amber-9 hover:enabled:bg-n-alpha-2 outline-transparent',
+        'text-n-amber-11 hover:enabled:bg-n-amber-9/10 focus-visible:bg-n-amber-9/10 outline-n-amber-9',
+      link: 'text-n-amber-9 hover:enabled:underline focus-visible:underline outline-transparent',
+      ghost:
+        'text-n-amber-9 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
    },
    slate: {
      solid:
-        'bg-n-solid-3 dark:hover:enabled:bg-n-solid-2 hover:enabled:bg-n-alpha-2 text-n-slate-12 outline-n-container',
+        'bg-n-solid-3 dark:hover:enabled:bg-n-solid-2 dark:focus-visible:bg-n-solid-2 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 text-n-slate-12 outline-n-container',
      faded:
-        'bg-n-slate-9/10 text-n-slate-12 hover:enabled:bg-n-slate-9/20 outline-transparent',
-      outline: 'text-n-slate-11 outline-n-strong hover:enabled:bg-n-slate-9/10',
-      link: 'text-n-slate-11 hover:enabled:text-n-slate-12 hover:enabled:underline outline-transparent',
-      ghost: 'text-n-slate-12 hover:enabled:bg-n-alpha-2 outline-transparent',
+        'bg-n-slate-9/10 text-n-slate-12 hover:enabled:bg-n-slate-9/20 focus-visible:bg-n-slate-9/20 outline-transparent',
+      outline:
+        'text-n-slate-11 outline-n-strong hover:enabled:bg-n-slate-9/10 focus-visible:bg-n-slate-9/10',
+      link: 'text-n-slate-11 hover:enabled:text-n-slate-12 focus-visible:text-n-slate-12 hover:enabled:underline focus-visible:underline outline-transparent',
+      ghost:
+        'text-n-slate-12 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
    },
    teal: {
      solid:
-        'bg-n-teal-9 text-white hover:enabled:bg-n-teal-10 outline-transparent',
+        'bg-n-teal-9 text-white hover:enabled:bg-n-teal-10 focus-visible:bg-n-teal-10 outline-transparent',
      faded:
-        'bg-n-teal-9/10 text-n-slate-12 hover:enabled:bg-n-teal-9/20 outline-transparent',
-      outline: 'text-n-teal-11 hover:enabled:bg-n-teal-9/10 outline-n-teal-9',
-      link: 'text-n-teal-9 hover:enabled:underline outline-transparent',
-      ghost: 'text-n-teal-9 hover:enabled:bg-n-alpha-2 outline-transparent',
+        'bg-n-teal-9/10 text-n-slate-12 hover:enabled:bg-n-teal-9/20 focus-visible:bg-n-teal-9/20 outline-transparent',
+      outline:
+        'text-n-teal-11 hover:enabled:bg-n-teal-9/10 focus-visible:bg-n-teal-9/10 outline-n-teal-9',
+      link: 'text-n-teal-9 hover:enabled:underline focus-visible:underline outline-transparent',
+      ghost:
+        'text-n-teal-9 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
    },
  },
  sizes: {
@@ -182,7 +190,7 @@ const STYLE_CONFIG = {
 const variantClasses = computed(() => {
  const variantMap = {
    ghost: `${STYLE_CONFIG.colors[computedColor.value].ghost}`,
-    link: `${STYLE_CONFIG.colors[computedColor.value].link} p-0 font-medium underline-offset-4`,
+    link: `${STYLE_CONFIG.colors[computedColor.value].link} p-0 font-medium underline-offset-2`,
    outline: STYLE_CONFIG.colors[computedColor.value].outline,
    faded: STYLE_CONFIG.colors[computedColor.value].faded,
    solid: STYLE_CONFIG.colors[computedColor.value].solid,
--- a/app/javascript/dashboard/components-next/captain/PageLayout.vue
+++ b/app/javascript/dashboard/components-next/captain/PageLayout.vue
@@ -72,10 +72,18 @@ const handlePageChange = event => {
        <div
          class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
        >
-          <span class="text-xl font-medium text-n-slate-12">
-            {{ headerTitle }}
-            <slot name="headerTitle" />
-          </span>
+          <div class="flex gap-4 items-center">
+            <slot name="headerTitle">
+              <span class="text-xl font-medium text-n-slate-12">
+                {{ headerTitle }}
+              </span>
+            </slot>
+            <div v-if="!isEmpty" class="flex items-center gap-2">
+              <div class="w-0.5 h-4 rounded-2xl bg-n-weak" />
+              <slot name="knowMore" />
+            </div>
+          </div>
+
          <div
            v-if="!showPaywall"
            v-on-clickaway="() => emit('close')"
--- a/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/AssistantPageEmptyState.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/AssistantPageEmptyState.vue
@@ -2,6 +2,7 @@
 import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import AssistantCard from 'dashboard/components-next/captain/assistant/AssistantCard.vue';
+import FeatureSpotlight from 'dashboard/components-next/feature-spotlight/FeatureSpotlight.vue';
 import { assistantsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';

 const emit = defineEmits(['click']);
@@ -12,6 +13,14 @@ const onClick = () => {
 </script>

 <template>
+  <FeatureSpotlight
+    :title="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
+    :note="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
+    fallback-thumbnail="/assets/images/dashboard/captain/assistant-light.svg"
+    fallback-thumbnail-dark="/assets/images/dashboard/captain/assistant-dark.svg"
+    learn-more-url="https://chwt.app/captain-assistant"
+    class="mb-8"
+  />
  <EmptyStateLayout
    :title="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.TITLE')"
    :subtitle="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.SUBTITLE')"
--- a/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/DocumentPageEmptyState.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/DocumentPageEmptyState.vue
@@ -2,6 +2,7 @@
 import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DocumentCard from 'dashboard/components-next/captain/assistant/DocumentCard.vue';
+import FeatureSpotlight from 'dashboard/components-next/feature-spotlight/FeatureSpotlight.vue';
 import { documentsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';

 const emit = defineEmits(['click']);
@@ -12,6 +13,14 @@ const onClick = () => {
 </script>

 <template>
+  <FeatureSpotlight
+    :title="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
+    :note="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
+    fallback-thumbnail="/assets/images/dashboard/captain/document-light.svg"
+    fallback-thumbnail-dark="/assets/images/dashboard/captain/document-dark.svg"
+    learn-more-url="https://chwt.app/captain-document"
+    class="mb-8"
+  />
  <EmptyStateLayout
    :title="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.TITLE')"
    :subtitle="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.SUBTITLE')"
--- a/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/ResponsePageEmptyState.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/ResponsePageEmptyState.vue
@@ -2,6 +2,7 @@
 import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import ResponseCard from 'dashboard/components-next/captain/assistant/ResponseCard.vue';
+import FeatureSpotlight from 'dashboard/components-next/feature-spotlight/FeatureSpotlight.vue';
 import { responsesList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';

 const emit = defineEmits(['click']);
@@ -12,6 +13,14 @@ const onClick = () => {
 </script>

 <template>
+  <FeatureSpotlight
+    :title="$t('CAPTAIN.RESPONSES.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
+    :note="$t('CAPTAIN.RESPONSES.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
+    fallback-thumbnail="/assets/images/dashboard/captain/faqs-light.svg"
+    fallback-thumbnail-dark="/assets/images/dashboard/captain/faqs-dark.svg"
+    learn-more-url="https://chwt.app/captain-faq"
+    class="mb-8"
+  />
  <EmptyStateLayout
    :title="$t('CAPTAIN.RESPONSES.EMPTY_STATE.TITLE')"
    :subtitle="$t('CAPTAIN.RESPONSES.EMPTY_STATE.SUBTITLE')"
--- a/app/javascript/dashboard/components-next/combobox/ComboBox.vue
+++ b/app/javascript/dashboard/components-next/combobox/ComboBox.vue
@@ -96,7 +96,7 @@ watch(
        :label="selectedLabel"
        trailing-icon
        :disabled="disabled"
-        class="justify-between w-full !px-3 !py-2.5 text-n-slate-12 font-normal group-hover/combobox:border-n-slate-6"
+        class="justify-between w-full !px-3 !py-2.5 text-n-slate-12 font-normal group-hover/combobox:border-n-slate-6 [&:not(.focused)]:hover:enabled:outline-n-slate-6 [&:not(.focused)]:dark:hover:enabled:outline-n-slate-6 [&:not(.focused)]:dark:outline-n-weak focus:outline-n-brand"
        :class="{ focused: open }"
        :icon="open ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
        @click="toggleDropdown"
--- a/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
+++ b/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
@@ -69,7 +69,7 @@ defineExpose({
        :value="searchValue"
        type="search"
        :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
-        class="w-full py-2 pl-10 pr-2 text-sm border-none rounded-t-md bg-n-solid-1 text-slate-900 dark:text-slate-50"
+        class="reset-base w-full py-2 pl-10 pr-2 text-sm focus:outline-none border-none rounded-t-md bg-n-solid-1 text-slate-900 dark:text-slate-50"
        @input="onInputSearch"
      />
    </div>
--- a/app/javascript/dashboard/components-next/copilot/Copilot.vue
+++ b/app/javascript/dashboard/components-next/copilot/Copilot.vue
@@ -7,6 +7,7 @@ import CopilotInput from './CopilotInput.vue';
 import CopilotLoader from './CopilotLoader.vue';
 import CopilotAgentMessage from './CopilotAgentMessage.vue';
 import CopilotAssistantMessage from './CopilotAssistantMessage.vue';
+import ToggleCopilotAssistant from './ToggleCopilotAssistant.vue';
 import Icon from '../icon/Icon.vue';

 const props = defineProps({
@@ -26,9 +27,17 @@ const props = defineProps({
    type: String,
    required: true,
  },
+  assistants: {
+    type: Array,
+    default: () => [],
+  },
+  activeAssistant: {
+    type: Object,
+    default: () => ({}),
+  },
 });

-const emit = defineEmits(['sendMessage', 'reset']);
+const emit = defineEmits(['sendMessage', 'reset', 'setAssistant']);

 const COPILOT_USER_ROLES = ['assistant', 'system'];

@@ -97,14 +106,18 @@ watch(

      <CopilotLoader v-if="isCaptainTyping" />
    </div>
-    <div>
-      <div v-if="!messages.length" class="flex-1 px-3 py-3 space-y-1">
+
+    <div
+      v-if="!messages.length"
+      class="h-full w-full flex items-center justify-center"
+    >
+      <div class="h-fit px-3 py-3 space-y-1">
        <span class="text-xs text-n-slate-10">
          {{ $t('COPILOT.TRY_THESE_PROMPTS') }}
        </span>
        <button
          v-for="prompt in promptOptions"
-          :key="prompt"
+          :key="prompt.label"
          class="px-2 py-1 rounded-md border border-n-weak bg-n-slate-2 text-n-slate-11 flex items-center gap-1"
          @click="() => useSuggestion(prompt)"
        >
@@ -112,7 +125,17 @@ watch(
          <Icon icon="i-lucide-chevron-right" />
        </button>
      </div>
-      <div class="mx-3 mt-px mb-2 flex flex-col items-end flex-1">
+    </div>
+
+    <div class="mx-3 mt-px mb-2">
+      <div class="flex items-center gap-2 justify-between w-full mb-1">
+        <ToggleCopilotAssistant
+          v-if="assistants.length"
+          :assistants="assistants"
+          :active-assistant="activeAssistant"
+          @set-assistant="$event => emit('setAssistant', $event)"
+        />
+        <div v-else />
        <button
          v-if="messages.length"
          class="text-xs flex items-center gap-1 hover:underline"
@@ -121,8 +144,8 @@ watch(
          <i class="i-lucide-refresh-ccw" />
          <span>{{ $t('CAPTAIN.COPILOT.RESET') }}</span>
        </button>
-        <CopilotInput class="mb-1 flex-1 w-full" @send="sendMessage" />
      </div>
+      <CopilotInput class="mb-1 w-full" @send="sendMessage" />
    </div>
  </div>
 </template>
--- a/app/javascript/dashboard/components-next/copilot/ToggleCopilotAssistant.vue
+++ b/app/javascript/dashboard/components-next/copilot/ToggleCopilotAssistant.vue
@@ -0,0 +1,81 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownContainer from 'next/dropdown-menu/base/DropdownContainer.vue';
+import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
+import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
+import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
+
+const props = defineProps({
+  assistants: {
+    type: Array,
+    required: true,
+  },
+  activeAssistant: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['setAssistant']);
+
+const { t } = useI18n();
+
+const activeAssistantLabel = computed(() => {
+  return props.activeAssistant
+    ? props.activeAssistant.name
+    : t('CAPTAIN.COPILOT.SELECT_ASSISTANT');
+});
+</script>
+
+<template>
+  <div>
+    <DropdownContainer>
+      <template #trigger="{ toggle, isOpen }">
+        <Button
+          :label="activeAssistantLabel"
+          icon="i-woot-captain"
+          ghost
+          slate
+          xs
+          :class="{ 'bg-n-alpha-2': isOpen }"
+          @click="toggle"
+        />
+      </template>
+      <DropdownBody class="bottom-9 min-w-64 z-50" strong>
+        <DropdownSection class="max-h-80 overflow-scroll">
+          <DropdownItem
+            v-for="assistant in assistants"
+            :key="assistant.id"
+            class="!items-start !gap-1 flex-col cursor-pointer"
+            @click="() => emit('setAssistant', assistant)"
+          >
+            <template #label>
+              <div class="flex gap-1 justify-between w-full">
+                <div class="items-start flex gap-1 flex-col">
+                  <span class="text-n-slate-12 text-sm">
+                    {{ assistant.name }}
+                  </span>
+                  <span class="line-clamp-2 text-n-slate-11 text-xs">
+                    {{ assistant.description }}
+                  </span>
+                </div>
+
+                <div
+                  v-if="assistant.id === activeAssistant?.id"
+                  class="flex items-center justify-center flex-shrink-0 w-4 h-4 rounded-full bg-n-slate-12 dark:bg-n-slate-11"
+                >
+                  <i
+                    class="i-lucide-check text-white dark:text-n-slate-1 size-3"
+                  />
+                </div>
+              </div>
+            </template>
+          </DropdownItem>
+        </DropdownSection>
+      </DropdownBody>
+    </DropdownContainer>
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/dialog/Dialog.vue
+++ b/app/javascript/dashboard/components-next/dialog/Dialog.vue
@@ -80,10 +80,12 @@ const maxWidthClass = computed(() => {
 const open = () => {
  dialogRef.value?.showModal();
 };
+
 const close = () => {
  emit('close');
  dialogRef.value?.close();
 };
+
 const confirm = () => {
  emit('confirm');
 };
@@ -104,9 +106,10 @@ defineExpose({ open, close });
      @close="close"
    >
      <OnClickOutside @trigger="close">
-        <div
+        <form
          ref="dialogContentRef"
          class="flex flex-col w-full h-auto gap-6 p-6 overflow-visible text-left align-middle transition-all duration-300 ease-in-out transform bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
+          @submit.prevent="confirm"
          @click.stop
        >
          <div v-if="title || description" class="flex flex-col gap-2">
@@ -129,6 +132,7 @@ defineExpose({ open, close });
                color="slate"
                :label="cancelButtonLabel || t('DIALOG.BUTTONS.CANCEL')"
                class="w-full"
+                type="button"
                @click="close"
              />
              <Button
@@ -138,11 +142,11 @@ defineExpose({ open, close });
                class="w-full"
                :is-loading="isLoading"
                :disabled="disableConfirmButton || isLoading"
-                @click="confirm"
+                type="submit"
              />
            </div>
          </slot>
-        </div>
+        </form>
      </OnClickOutside>
    </dialog>
  </Teleport>
--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
@@ -29,6 +29,10 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
+  labelClass: {
+    type: String,
+    default: '',
+  },
 });

 const emit = defineEmits(['action']);
@@ -71,7 +75,7 @@ onMounted(() => {
        :placeholder="
          searchPlaceholder || t('DROPDOWN_MENU.SEARCH_PLACEHOLDER')
        "
-        class="w-full h-8 py-2 pl-10 pr-2 text-sm border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+        class="reset-base w-full h-8 py-2 pl-10 pr-2 text-sm focus:outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
      />
    </div>
    <button
@@ -97,9 +101,13 @@ onMounted(() => {
      </slot>
      <Icon v-if="item.icon" :icon="item.icon" class="flex-shrink-0 size-3.5" />
      <span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
-      <span v-if="item.label" class="min-w-0 text-sm truncate">{{
-        item.label
-      }}</span>
+      <span
+        v-if="item.label"
+        class="min-w-0 text-sm truncate"
+        :class="labelClass"
+      >
+        {{ item.label }}
+      </span>
    </button>
    <div
      v-if="filteredMenuItems.length === 0"
--- a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue
@@ -19,7 +19,7 @@ const beforeClass = computed(() => {

  // Add extra blur layer only when strong prop is true, as a hack for Chrome's stacked backdrop-blur limitation
  // https://issues.chromium.org/issues/40835530
-  return "before:content-['\x00A0'] before:absolute before:bottom-0 before:left-0 before:w-full before:h-full before:backdrop-contrast-70 before:backdrop-blur-sm before:z-0 [&>*]:relative";
+  return "before:content-['\x00A0'] before:absolute before:bottom-0 before:left-0 before:w-full before:h-full before:rounded-xl before:backdrop-contrast-70 before:backdrop-blur-sm before:z-0 [&>*]:relative";
 });
 </script>

--- a/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlight.story.vue
+++ b/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlight.story.vue
@@ -0,0 +1,38 @@
+<script setup>
+import FeatureSpotlight from './FeatureSpotlight.vue';
+</script>
+
+<template>
+  <Story
+    title="Components/FeatureSpotlight/Default"
+    :layout="{ type: 'grid', width: '1000px' }"
+  >
+    <Variant title="Default with learn more URL">
+      <div class="p-6 bg-n-background">
+        <FeatureSpotlight
+          title="Captain Assistant"
+          note="Captain Assistant engages directly with customers, learns from your help docs and past conversations, and delivers instant, accurate responses. It handles the initial queries, providing quick resolutions before transferring to an agent when needed."
+          video-url=""
+          thumbnail=""
+          fallback-thumbnail="/assets/images/dashboard/captain/assistant-light.svg"
+          fallback-thumbnail-dark="/assets/images/dashboard/captain/assistant-dark.svg"
+          learn-more-url="https://www.chatwoot.com/hc/user-guide/articles/1738101547-creating-an-assistant-with-captain"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Video URL and Thumbnail">
+      <div class="p-6 bg-n-background">
+        <FeatureSpotlight
+          title="Captain Assistant"
+          note="Captain Assistant engages directly with customers, learns from your help docs and past conversations, and delivers instant, accurate responses. It handles the initial queries, providing quick resolutions before transferring to an agent when needed."
+          video-url="https://www.youtube.com/watch?v=E4xUHyAAktY"
+          thumbnail="https://i.ytimg.com/an_webp/E4xUHyAAktY/mqdefault_6s.webp?du=3000&sqp=CJaKmL4G&rs=AOn4CLCmfy1TMOcW4UsjQTgyKRp4TSGZgg"
+          fallback-thumbnail="/assets/images/dashboard/captain/assistant-light.svg"
+          fallback-thumbnail-dark="/assets/images/dashboard/captain/assistant-dark.svg"
+          learn-more-url="https://www.chatwoot.com/hc/user-guide/articles/1738101547-creating-an-assistant-with-captain"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlight.vue
+++ b/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlight.vue
@@ -0,0 +1,95 @@
+<script setup>
+import { ref } from 'vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  title: { type: String, default: '' },
+  note: { type: String, default: '' },
+  videoUrl: { type: String, default: '' },
+  thumbnail: { type: String, default: '' },
+  fallbackThumbnail: { type: String, default: '' },
+  fallbackThumbnailDark: { type: String, default: '' },
+  learnMoreUrl: { type: String, default: '' },
+});
+
+const imageError = ref(false);
+
+const handleImageError = () => {
+  imageError.value = true;
+};
+
+const openLink = link => {
+  if (link) {
+    window.open(link, '_blank');
+  }
+};
+</script>
+
+<template>
+  <section class="custom-dashed-border rounded-2xl py-5 px-6">
+    <div class="flex flex-col md:flex-row items-start md:items-center gap-6">
+      <div
+        class="flex-shrink-0 bg-gray-800 w-[7.5rem] h-[6.5rem] rounded-lg flex items-center justify-center overflow-hidden"
+      >
+        <img
+          v-if="!imageError && thumbnail"
+          :src="thumbnail"
+          :alt="title"
+          draggable="false"
+          class="w-full h-full object-cover rounded-lg"
+          loading="lazy"
+          @error="handleImageError"
+        />
+
+        <template v-else>
+          <img
+            v-if="fallbackThumbnailDark"
+            :src="fallbackThumbnailDark"
+            :alt="title"
+            draggable="false"
+            class="w-full h-full object-cover hidden dark:block rounded-lg"
+            loading="lazy"
+          />
+
+          <img
+            v-if="fallbackThumbnail"
+            :src="fallbackThumbnail"
+            :alt="title"
+            draggable="false"
+            class="w-full h-full object-cover block dark:hidden rounded-lg"
+            loading="lazy"
+          />
+        </template>
+      </div>
+
+      <div class="flex flex-col flex-1 gap-3 ltr:pr-8 rtl:pl-8">
+        <p v-if="note" class="text-n-slate-12 text-sm mb-0">{{ note }}</p>
+
+        <div class="flex gap-3">
+          <slot name="actions">
+            <Button
+              v-if="videoUrl"
+              :label="$t('FEATURE_SPOTLIGHT.WATCH_VIDEO')"
+              sm
+              faded
+              slate
+              icon="i-lucide-circle-play"
+              @click="openLink(videoUrl)"
+            />
+
+            <Button
+              v-if="learnMoreUrl"
+              :label="$t('FEATURE_SPOTLIGHT.LEARN_MORE')"
+              sm
+              faded
+              slate
+              trailing-icon
+              icon="i-lucide-arrow-up-right"
+              @click="openLink(learnMoreUrl)"
+            />
+          </slot>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
--- a/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.story.vue
+++ b/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.story.vue
@@ -0,0 +1,44 @@
+<script setup>
+import FeatureSpotlightPopover from './FeatureSpotlightPopover.vue';
+</script>
+
+<template>
+  <Story
+    title="Components/FeatureSpotlight/Popup"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Default with learn more URL">
+      <div class="p-6 h-[450px] bg-n-background">
+        <div class="flex gap-8">
+          <FeatureSpotlightPopover
+            button-label="Learn about Assistant"
+            title="Captain Assistant"
+            note="Captain Assistant engages directly with customers, learns from your help docs and past conversations, and delivers instant, accurate responses. It handles the initial queries, providing quick resolutions before transferring to an agent when needed."
+            video-url=""
+            thumbnail=""
+            fallback-thumbnail="/assets/images/dashboard/captain/assistant-popover-light.svg"
+            fallback-thumbnail-dark="/assets/images/dashboard/captain/assistant-popover-dark.svg"
+            learn-more-url="https://www.chatwoot.com/hc/user-guide/articles/1738101547-creating-an-assistant-with-captain"
+          />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="With Video Thumbnail and URL">
+      <div class="p-6 h-[450px] bg-n-background">
+        <div class="flex gap-8">
+          <FeatureSpotlightPopover
+            button-label="Learn about Assistant"
+            title="Captain Assistant"
+            note="Captain Assistant engages directly with customers, learns from your help docs and past conversations, and delivers instant, accurate responses. It handles the initial queries, providing quick resolutions before transferring to an agent when needed."
+            video-url="https://www.youtube.com/watch?v=E4xUHyAAktY"
+            thumbnail="https://i.ytimg.com/an_webp/E4xUHyAAktY/mqdefault_6s.webp?du=3000&sqp=CJaKmL4G&rs=AOn4CLCmfy1TMOcW4UsjQTgyKRp4TSGZgg"
+            fallback-thumbnail="/assets/images/dashboard/captain/assistant-popover-light.svg"
+            fallback-thumbnail-dark="/assets/images/dashboard/captain/assistant-popover-dark.svg"
+            learn-more-url="https://www.chatwoot.com/hc/user-guide/articles/1738101547-creating-an-assistant-with-captain"
+          />
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.vue
+++ b/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.vue
@@ -0,0 +1,125 @@
+<script setup>
+import { ref } from 'vue';
+import { useToggle } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  buttonLabel: { type: String, default: '' },
+  title: { type: String, default: '' },
+  note: { type: String, default: '' },
+  videoUrl: { type: String, default: '' },
+  thumbnail: { type: String, default: '' },
+  fallbackThumbnail: { type: String, default: '' },
+  fallbackThumbnailDark: { type: String, default: '' },
+  learnMoreUrl: { type: String, default: '' },
+});
+
+const imageError = ref(false);
+const [isPopupVisible, togglePopup] = useToggle();
+
+const handleImageError = () => {
+  imageError.value = true;
+};
+
+const openLink = link => {
+  if (link) {
+    window.open(link, '_blank');
+  }
+};
+</script>
+
+<template>
+  <div class="relative">
+    <Button
+      id="togglePopup"
+      :label="buttonLabel"
+      slate
+      ghost
+      sm
+      :class="{ 'bg-n-alpha-2': isPopupVisible }"
+      @click="togglePopup(!isPopupVisible)"
+    />
+
+    <div
+      v-if="isPopupVisible"
+      v-on-click-outside="[
+        () => isPopupVisible && (isPopupVisible = false),
+        { ignore: ['#togglePopup'] },
+      ]"
+    >
+      <section
+        class="absolute top-full mt-6 ltr:left-0 rtl:right-0 outline outline-1 outline-n-weak bg-n-alpha-3 backdrop-blur-[100px] rounded-xl p-4 w-80"
+      >
+        <div
+          class="absolute -top-[0.77rem] ltr:left-12 rtl:right-12 w-6 h-6 ltr:rotate-45 rtl:-rotate-45 rtl:rounded-tr ltr:rounded-tl rtl:border-r ltr:border-l border-t border-n-weak bg-n-alpha-3 z-10"
+        />
+
+        <div class="relative flex flex-col items-start gap-4 z-20">
+          <div class="flex-shrink-0 bg-gray-800 w-full h-[7.5rem] rounded-lg">
+            <img
+              v-if="!imageError && thumbnail"
+              :src="thumbnail"
+              :alt="title"
+              draggable="false"
+              loading="lazy"
+              class="w-full h-full object-cover rounded-lg"
+              @error="handleImageError"
+            />
+
+            <template v-else>
+              <img
+                v-if="fallbackThumbnailDark"
+                :src="fallbackThumbnailDark"
+                :alt="title"
+                draggable="false"
+                loading="lazy"
+                class="w-full h-full object-cover hidden dark:block"
+              />
+
+              <img
+                v-if="fallbackThumbnail"
+                :src="fallbackThumbnail"
+                :alt="title"
+                draggable="false"
+                loading="lazy"
+                class="w-full h-full object-cover block dark:hidden"
+              />
+            </template>
+          </div>
+
+          <p v-if="note" class="text-n-slate-12 text-start text-sm mb-0">
+            {{ note }}
+          </p>
+
+          <div class="flex gap-3 justify-between w-full">
+            <slot name="actions">
+              <Button
+                v-if="videoUrl"
+                :label="$t('FEATURE_SPOTLIGHT.WATCH_VIDEO')"
+                sm
+                faded
+                slate
+                icon="i-lucide-circle-play"
+                class="w-full"
+                @click="openLink(videoUrl)"
+              />
+
+              <Button
+                v-if="learnMoreUrl"
+                :label="$t('FEATURE_SPOTLIGHT.LEARN_MORE')"
+                sm
+                faded
+                slate
+                trailing-icon
+                class="w-full"
+                icon="i-lucide-arrow-up-right"
+                @click="openLink(learnMoreUrl)"
+              />
+            </slot>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/filter/contactProvider.js
+++ b/app/javascript/dashboard/components-next/filter/contactProvider.js
@@ -2,7 +2,10 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useOperators } from './operators';
 import { useMapGetter } from 'dashboard/composables/store.js';
-import { buildAttributesFilterTypes } from './helper/filterHelper.js';
+import {
+  buildAttributesFilterTypes,
+  CONTACT_ATTRIBUTES,
+} from './helper/filterHelper.js';
 import countries from 'shared/constants/countries.js';

 /**
@@ -59,7 +62,11 @@ export function useContactFilterContext() {
   * @type {import('vue').ComputedRef<FilterType[]>}
   */
  const customFilterTypes = computed(() =>
-    buildAttributesFilterTypes(contactAttributes.value, getOperatorTypes)
+    buildAttributesFilterTypes(
+      contactAttributes.value,
+      getOperatorTypes,
+      'contact'
+    )
  );

  /**
@@ -67,8 +74,8 @@ export function useContactFilterContext() {
   */
  const filterTypes = computed(() => [
    {
-      attributeKey: 'name',
-      value: 'name',
+      attributeKey: CONTACT_ATTRIBUTES.NAME,
+      value: CONTACT_ATTRIBUTES.NAME,
      attributeName: t('CONTACTS_LAYOUT.FILTER.NAME'),
      label: t('CONTACTS_LAYOUT.FILTER.NAME'),
      inputType: 'plainText',
@@ -77,8 +84,8 @@ export function useContactFilterContext() {
      attributeModel: 'standard',
    },
    {
-      attributeKey: 'email',
-      value: 'email',
+      attributeKey: CONTACT_ATTRIBUTES.EMAIL,
+      value: CONTACT_ATTRIBUTES.EMAIL,
      attributeName: t('CONTACTS_LAYOUT.FILTER.EMAIL'),
      label: t('CONTACTS_LAYOUT.FILTER.EMAIL'),
      inputType: 'plainText',
@@ -87,8 +94,8 @@ export function useContactFilterContext() {
      attributeModel: 'standard',
    },
    {
-      attributeKey: 'phone_number',
-      value: 'phone_number',
+      attributeKey: CONTACT_ATTRIBUTES.PHONE_NUMBER,
+      value: CONTACT_ATTRIBUTES.PHONE_NUMBER,
      attributeName: t('CONTACTS_LAYOUT.FILTER.PHONE_NUMBER'),
      label: t('CONTACTS_LAYOUT.FILTER.PHONE_NUMBER'),
      inputType: 'plainText',
@@ -97,8 +104,8 @@ export function useContactFilterContext() {
      attributeModel: 'standard',
    },
    {
-      attributeKey: 'identifier',
-      value: 'identifier',
+      attributeKey: CONTACT_ATTRIBUTES.IDENTIFIER,
+      value: CONTACT_ATTRIBUTES.IDENTIFIER,
      attributeName: t('CONTACTS_LAYOUT.FILTER.IDENTIFIER'),
      label: t('CONTACTS_LAYOUT.FILTER.IDENTIFIER'),
      inputType: 'plainText',
@@ -107,8 +114,8 @@ export function useContactFilterContext() {
      attributeModel: 'standard',
    },
    {
-      attributeKey: 'country_code',
-      value: 'country_code',
+      attributeKey: CONTACT_ATTRIBUTES.COUNTRY_CODE,
+      value: CONTACT_ATTRIBUTES.COUNTRY_CODE,
      attributeName: t('FILTER.ATTRIBUTES.COUNTRY_NAME'),
      label: t('FILTER.ATTRIBUTES.COUNTRY_NAME'),
      inputType: 'searchSelect',
@@ -118,8 +125,8 @@ export function useContactFilterContext() {
      attributeModel: 'additional',
    },
    {
-      attributeKey: 'city',
-      value: 'city',
+      attributeKey: CONTACT_ATTRIBUTES.CITY,
+      value: CONTACT_ATTRIBUTES.CITY,
      attributeName: t('CONTACTS_LAYOUT.FILTER.CITY'),
      label: t('CONTACTS_LAYOUT.FILTER.CITY'),
      inputType: 'plainText',
@@ -128,8 +135,8 @@ export function useContactFilterContext() {
      attributeModel: 'standard',
    },
    {
-      attributeKey: 'created_at',
-      value: 'created_at',
+      attributeKey: CONTACT_ATTRIBUTES.CREATED_AT,
+      value: CONTACT_ATTRIBUTES.CREATED_AT,
      attributeName: t('CONTACTS_LAYOUT.FILTER.CREATED_AT'),
      label: t('CONTACTS_LAYOUT.FILTER.CREATED_AT'),
      inputType: 'date',
@@ -138,8 +145,8 @@ export function useContactFilterContext() {
      attributeModel: 'standard',
    },
    {
-      attributeKey: 'last_activity_at',
-      value: 'last_activity_at',
+      attributeKey: CONTACT_ATTRIBUTES.LAST_ACTIVITY_AT,
+      value: CONTACT_ATTRIBUTES.LAST_ACTIVITY_AT,
      attributeName: t('CONTACTS_LAYOUT.FILTER.LAST_ACTIVITY'),
      label: t('CONTACTS_LAYOUT.FILTER.LAST_ACTIVITY'),
      inputType: 'date',
@@ -148,8 +155,8 @@ export function useContactFilterContext() {
      attributeModel: 'standard',
    },
    {
-      attributeKey: 'referer',
-      value: 'referer',
+      attributeKey: CONTACT_ATTRIBUTES.REFERER,
+      value: CONTACT_ATTRIBUTES.REFERER,
      attributeName: t('CONTACTS_LAYOUT.FILTER.REFERER_LINK'),
      label: t('CONTACTS_LAYOUT.FILTER.REFERER_LINK'),
      inputType: 'plainText',
@@ -158,8 +165,8 @@ export function useContactFilterContext() {
      attributeModel: 'standard',
    },
    {
-      attributeKey: 'blocked',
-      value: 'blocked',
+      attributeKey: CONTACT_ATTRIBUTES.BLOCKED,
+      value: CONTACT_ATTRIBUTES.BLOCKED,
      attributeName: t('CONTACTS_LAYOUT.FILTER.BLOCKED'),
      label: t('CONTACTS_LAYOUT.FILTER.BLOCKED'),
      inputType: 'searchSelect',
--- a/app/javascript/dashboard/components-next/filter/helper/filterHelper.js
+++ b/app/javascript/dashboard/components-next/filter/helper/filterHelper.js
@@ -1,3 +1,35 @@
+/**
+ * Standard attributes of the conversation model
+ */
+export const CONVERSATION_ATTRIBUTES = {
+  STATUS: 'status',
+  PRIORITY: 'priority',
+  ASSIGNEE_ID: 'assignee_id',
+  INBOX_ID: 'inbox_id',
+  TEAM_ID: 'team_id',
+  DISPLAY_ID: 'display_id',
+  CAMPAIGN_ID: 'campaign_id',
+  LABELS: 'labels',
+  BROWSER_LANGUAGE: 'browser_language',
+  COUNTRY_CODE: 'country_code',
+  REFERER: 'referer',
+  CREATED_AT: 'created_at',
+  LAST_ACTIVITY_AT: 'last_activity_at',
+};
+
+export const CONTACT_ATTRIBUTES = {
+  NAME: 'name',
+  EMAIL: 'email',
+  PHONE_NUMBER: 'phone_number',
+  IDENTIFIER: 'identifier',
+  COUNTRY_CODE: 'country_code',
+  CITY: 'city',
+  CREATED_AT: 'created_at',
+  LAST_ACTIVITY_AT: 'last_activity_at',
+  REFERER: 'referer',
+  BLOCKED: 'blocked',
+};
+
 /**
 * Determines the input type for a custom attribute based on its key
 * @param {string} key - The attribute display type key
@@ -20,24 +52,37 @@ export const getCustomAttributeInputType = key => {

 /**
 * Builds filter types for custom attributes
+ * This also removes any conflicting attributes
 * @param {Array} attributes - The attributes array
 * @param {Function} getOperatorTypes - Function to get operator types
 * @returns {Array} Array of filter types
 */
-export const buildAttributesFilterTypes = (attributes, getOperatorTypes) => {
-  return attributes.map(attr => ({
-    attributeKey: attr.attributeKey,
-    value: attr.attributeKey,
-    attributeName: attr.attributeDisplayName,
-    label: attr.attributeDisplayName,
-    inputType: getCustomAttributeInputType(attr.attributeDisplayType),
-    filterOperators: getOperatorTypes(attr.attributeDisplayType),
-    options:
-      attr.attributeDisplayType === 'list'
-        ? attr.attributeValues.map(item => ({ id: item, name: item }))
-        : [],
-    attributeModel: 'customAttributes',
-  }));
+export const buildAttributesFilterTypes = (
+  attributes,
+  getOperatorTypes,
+  filterModel = 'conversation'
+) => {
+  const standardAttributes = Object.values(
+    filterModel === 'conversation'
+      ? CONVERSATION_ATTRIBUTES
+      : CONTACT_ATTRIBUTES
+  );
+
+  return attributes
+    .filter(attr => !standardAttributes.includes(attr.attributeKey))
+    .map(attr => ({
+      attributeKey: attr.attributeKey,
+      value: attr.attributeKey,
+      attributeName: attr.attributeDisplayName,
+      label: attr.attributeDisplayName,
+      inputType: getCustomAttributeInputType(attr.attributeDisplayType),
+      filterOperators: getOperatorTypes(attr.attributeDisplayType),
+      options:
+        attr.attributeDisplayType === 'list'
+          ? attr.attributeValues.map(item => ({ id: item, name: item }))
+          : [],
+      attributeModel: 'customAttributes',
+    }));
 };

 /**
--- a/app/javascript/dashboard/components-next/filter/provider.js
+++ b/app/javascript/dashboard/components-next/filter/provider.js
@@ -3,7 +3,10 @@ import { useI18n } from 'vue-i18n';
 import { useOperators } from './operators';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import { useChannelIcon } from 'next/icon/provider';
-import { buildAttributesFilterTypes } from './helper/filterHelper';
+import {
+  buildAttributesFilterTypes,
+  CONVERSATION_ATTRIBUTES,
+} from './helper/filterHelper';
 import countries from 'shared/constants/countries.js';
 import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages.js';

@@ -70,7 +73,11 @@ export function useConversationFilterContext() {
   * @type {import('vue').ComputedRef<FilterType[]>}
   */
  const customFilterTypes = computed(() =>
-    buildAttributesFilterTypes(conversationAttributes.value, getOperatorTypes)
+    buildAttributesFilterTypes(
+      conversationAttributes.value,
+      getOperatorTypes,
+      'conversation'
+    )
  );

  /**
@@ -78,8 +85,8 @@ export function useConversationFilterContext() {
   */
  const filterTypes = computed(() => [
    {
-      attributeKey: 'status',
-      value: 'status',
+      attributeKey: CONVERSATION_ATTRIBUTES.STATUS,
+      value: CONVERSATION_ATTRIBUTES.STATUS,
      attributeName: t('FILTER.ATTRIBUTES.STATUS'),
      label: t('FILTER.ATTRIBUTES.STATUS'),
      inputType: 'multiSelect',
@@ -94,8 +101,24 @@ export function useConversationFilterContext() {
      attributeModel: 'standard',
    },
    {
-      attributeKey: 'assignee_id',
-      value: 'assignee_id',
+      attributeKey: CONVERSATION_ATTRIBUTES.PRIORITY,
+      value: CONVERSATION_ATTRIBUTES.PRIORITY,
+      attributeName: t('FILTER.ATTRIBUTES.PRIORITY'),
+      label: t('FILTER.ATTRIBUTES.PRIORITY'),
+      inputType: 'multiSelect',
+      options: ['low', 'medium', 'high', 'urgent'].map(id => {
+        return {
+          id,
+          name: t(`CONVERSATION.PRIORITY.OPTIONS.${id.toUpperCase()}`),
+        };
+      }),
+      dataType: 'text',
+      filterOperators: equalityOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: CONVERSATION_ATTRIBUTES.ASSIGNEE_ID,
+      value: CONVERSATION_ATTRIBUTES.ASSIGNEE_ID,
      attributeName: t('FILTER.ATTRIBUTES.ASSIGNEE_NAME'),
      label: t('FILTER.ATTRIBUTES.ASSIGNEE_NAME'),
      inputType: 'searchSelect',
@@ -110,8 +133,8 @@ export function useConversationFilterContext() {
      attributeModel: 'standard',
    },
    {
-      attributeKey: 'inbox_id',
-      value: 'inbox_id',
+      attributeKey: CONVERSATION_ATTRIBUTES.INBOX_ID,
+      value: CONVERSATION_ATTRIBUTES.INBOX_ID,
      attributeName: t('FILTER.ATTRIBUTES.INBOX_NAME'),
      label: t('FILTER.ATTRIBUTES.INBOX_NAME'),
      inputType: 'searchSelect',
@@ -126,8 +149,8 @@ export function useConversationFilterContext() {
      attributeModel: 'standard',
    },
    {
-      attributeKey: 'team_id',
-      value: 'team_id',
+      attributeKey: CONVERSATION_ATTRIBUTES.TEAM_ID,
+      value: CONVERSATION_ATTRIBUTES.TEAM_ID,
      attributeName: t('FILTER.ATTRIBUTES.TEAM_NAME'),
      label: t('FILTER.ATTRIBUTES.TEAM_NAME'),
      inputType: 'searchSelect',
@@ -137,8 +160,8 @@ export function useConversationFilterContext() {
      attributeModel: 'standard',
    },
    {
-      attributeKey: 'display_id',
-      value: 'display_id',
+      attributeKey: CONVERSATION_ATTRIBUTES.DISPLAY_ID,
+      value: CONVERSATION_ATTRIBUTES.DISPLAY_ID,
      attributeName: t('FILTER.ATTRIBUTES.CONVERSATION_IDENTIFIER'),
      label: t('FILTER.ATTRIBUTES.CONVERSATION_IDENTIFIER'),
      inputType: 'plainText',
@@ -147,8 +170,8 @@ export function useConversationFilterContext() {
      attributeModel: 'standard',
    },
    {
-      attributeKey: 'campaign_id',
-      value: 'campaign_id',
+      attributeKey: CONVERSATION_ATTRIBUTES.CAMPAIGN_ID,
+      value: CONVERSATION_ATTRIBUTES.CAMPAIGN_ID,
      attributeName: t('FILTER.ATTRIBUTES.CAMPAIGN_NAME'),
      label: t('FILTER.ATTRIBUTES.CAMPAIGN_NAME'),
      inputType: 'searchSelect',
@@ -161,8 +184,8 @@ export function useConversationFilterContext() {
      attributeModel: 'standard',
    },
    {
-      attributeKey: 'labels',
-      value: 'labels',
+      attributeKey: CONVERSATION_ATTRIBUTES.LABELS,
+      value: CONVERSATION_ATTRIBUTES.LABELS,
      attributeName: t('FILTER.ATTRIBUTES.LABELS'),
      label: t('FILTER.ATTRIBUTES.LABELS'),
      inputType: 'multiSelect',
@@ -185,8 +208,8 @@ export function useConversationFilterContext() {
      attributeModel: 'standard',
    },
    {
-      attributeKey: 'browser_language',
-      value: 'browser_language',
+      attributeKey: CONVERSATION_ATTRIBUTES.BROWSER_LANGUAGE,
+      value: CONVERSATION_ATTRIBUTES.BROWSER_LANGUAGE,
      attributeName: t('FILTER.ATTRIBUTES.BROWSER_LANGUAGE'),
      label: t('FILTER.ATTRIBUTES.BROWSER_LANGUAGE'),
      inputType: 'searchSelect',
@@ -196,8 +219,8 @@ export function useConversationFilterContext() {
      attributeModel: 'additional',
    },
    {
-      attributeKey: 'country_code',
-      value: 'country_code',
+      attributeKey: CONVERSATION_ATTRIBUTES.COUNTRY_CODE,
+      value: CONVERSATION_ATTRIBUTES.COUNTRY_CODE,
      attributeName: t('FILTER.ATTRIBUTES.COUNTRY_NAME'),
      label: t('FILTER.ATTRIBUTES.COUNTRY_NAME'),
      inputType: 'searchSelect',
@@ -207,8 +230,8 @@ export function useConversationFilterContext() {
      attributeModel: 'additional',
    },
    {
-      attributeKey: 'referer',
-      value: 'referer',
+      attributeKey: CONVERSATION_ATTRIBUTES.REFERER,
+      value: CONVERSATION_ATTRIBUTES.REFERER,
      attributeName: t('FILTER.ATTRIBUTES.REFERER_LINK'),
      label: t('FILTER.ATTRIBUTES.REFERER_LINK'),
      inputType: 'plainText',
@@ -217,8 +240,8 @@ export function useConversationFilterContext() {
      attributeModel: 'additional',
    },
    {
-      attributeKey: 'created_at',
-      value: 'created_at',
+      attributeKey: CONVERSATION_ATTRIBUTES.CREATED_AT,
+      value: CONVERSATION_ATTRIBUTES.CREATED_AT,
      attributeName: t('FILTER.ATTRIBUTES.CREATED_AT'),
      label: t('FILTER.ATTRIBUTES.CREATED_AT'),
      inputType: 'date',
@@ -227,8 +250,8 @@ export function useConversationFilterContext() {
      attributeModel: 'standard',
    },
    {
-      attributeKey: 'last_activity_at',
-      value: 'last_activity_at',
+      attributeKey: CONVERSATION_ATTRIBUTES.LAST_ACTIVITY_AT,
+      value: CONVERSATION_ATTRIBUTES.LAST_ACTIVITY_AT,
      attributeName: t('FILTER.ATTRIBUTES.LAST_ACTIVITY'),
      label: t('FILTER.ATTRIBUTES.LAST_ACTIVITY'),
      inputType: 'date',
--- a/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
+++ b/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
@@ -83,7 +83,7 @@ defineExpose({
      v-if="label"
      :for="id"
      :class="customLabelClass"
-      class="mb-0.5 text-sm font-medium text-n-slate-11"
+      class="mb-0.5 text-sm font-medium text-n-slate-12"
    >
      {{ label }}
    </label>
@@ -97,7 +97,7 @@ defineExpose({
      :placeholder="placeholder"
      :disabled="disabled"
      :class="customInputClass"
-      class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-none bg-transparent dark:bg-transparent placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 dark:text-n-slate-12 transition-all duration-500 ease-in-out"
+      class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-none outline-none outline-0 bg-transparent dark:bg-transparent placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 dark:text-n-slate-12 transition-all duration-500 ease-in-out"
      @input="handleInput"
      @focus="handleFocus"
      @blur="handleBlur"
--- a/app/javascript/dashboard/components-next/input/Input.vue
+++ b/app/javascript/dashboard/components-next/input/Input.vue
@@ -70,12 +70,12 @@ const messageClass = computed(() => {
  }
 });

-const inputBorderClass = computed(() => {
+const inputOutlineClass = computed(() => {
  switch (props.messageType) {
    case 'error':
-      return 'border-n-ruby-8 dark:border-n-ruby-8 hover:border-n-ruby-9 dark:hover:border-n-ruby-9 disabled:border-n-ruby-8 dark:disabled:border-n-ruby-8';
+      return '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';
    default:
-      return 'border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 disabled:border-n-weak dark:disabled:border-n-weak focus:border-n-brand dark:focus:border-n-brand';
+      return 'outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 disabled:outline-n-weak dark:disabled:outline-n-weak focus:outline-n-brand dark:focus:outline-n-brand';
  }
 });

@@ -124,7 +124,7 @@ onMounted(() => {
      :value="modelValue"
      :class="[
        customInputClass,
-        inputBorderClass,
+        inputOutlineClass,
        {
          error: messageType === 'error',
          focus: isFocused,
@@ -134,7 +134,7 @@ onMounted(() => {
      :placeholder="placeholder"
      :disabled="disabled"
      :min="['date', 'datetime-local', 'time'].includes(type) ? min : undefined"
-      class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 border rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out"
+      class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out"
      @input="handleInput"
      @focus="handleFocus"
      @blur="handleBlur"
--- a/app/javascript/dashboard/components-next/message/MessageError.vue
+++ b/app/javascript/dashboard/components-next/message/MessageError.vue
@@ -26,7 +26,7 @@ const { t } = useI18n();
        />
      </div>
      <div
-        class="absolute bg-n-alpha-3 px-4 py-3 border rounded-xl border-n-strong text-n-slate-12 bottom-6 w-52 text-xs backdrop-blur-[100px] shadow-[0px_0px_24px_0px_rgba(0,0,0,0.12)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all"
+        class="absolute bg-n-alpha-3 px-4 py-3 border rounded-xl border-n-strong text-n-slate-12 bottom-6 w-52 text-xs backdrop-blur-[100px] shadow-[0px_0px_24px_0px_rgba(0,0,0,0.12)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all break-all"
        :class="{
          'ltr:left-0 rtl:right-0': orientation === ORIENTATION.LEFT,
          'ltr:right-0 rtl:left-0': orientation === ORIENTATION.RIGHT,
--- a/app/javascript/dashboard/components-next/message/MessageMeta.vue
+++ b/app/javascript/dashboard/components-next/message/MessageMeta.vue
@@ -102,6 +102,7 @@ const statusToShow = computed(() => {
  if (isRead.value) return MESSAGE_STATUS.READ;
  if (isDelivered.value) return MESSAGE_STATUS.DELIVERED;
  if (isSent.value) return MESSAGE_STATUS.SENT;
+  if (status.value === MESSAGE_STATUS.FAILED) return MESSAGE_STATUS.FAILED;

  return MESSAGE_STATUS.PROGRESS;
 });
--- a/app/javascript/dashboard/components-next/message/bubbles/Audio.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Audio.vue
@@ -13,6 +13,9 @@ const attachment = computed(() => {

 <template>
  <BaseBubble class="bg-transparent" data-bubble-name="audio">
-    <AudioChip :attachment="attachment" class="p-2 text-n-slate-12" />
+    <AudioChip
+      :attachment="attachment"
+      class="p-2 text-n-slate-12 skip-context-menu"
+    />
  </BaseBubble>
 </template>
--- a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
@@ -93,7 +93,7 @@ const hasQuotedMessage = computed(() => {
        <template v-else>
          <Letter
            v-if="showQuotedMessage"
-            class-name="prose prose-bubble !max-w-none"
+            class-name="prose prose-bubble !max-w-none letter-render"
            :allowed-css-properties="[
              ...allowedCssProperties,
              'transform',
@@ -104,7 +104,7 @@ const hasQuotedMessage = computed(() => {
          />
          <Letter
            v-else
-            class-name="prose prose-bubble !max-w-none"
+            class-name="prose prose-bubble !max-w-none letter-render"
            :html="unquotedHTML"
            :allowed-css-properties="[
              ...allowedCssProperties,
@@ -143,3 +143,21 @@ const hasQuotedMessage = computed(() => {
    </section>
  </BaseBubble>
 </template>
+
+<style lang="scss">
+// Tailwind resets break the rendering of google drive link in Gmail messages
+// This fixes it using https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
+
+.letter-render [class*='gmail_drive_chip'] {
+  box-sizing: initial;
+  @apply bg-n-slate-4 border-n-slate-6 rounded-md !important;
+
+  a {
+    @apply text-n-slate-12 !important;
+
+    img {
+      display: inline-block;
+    }
+  }
+}
+</style>
--- a/app/javascript/dashboard/components-next/message/bubbles/Image.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Image.vue
@@ -56,6 +56,7 @@ const downloadAttachment = async () => {
    </div>
    <div v-else class="relative group rounded-lg overflow-hidden">
      <img
+        class="skip-context-menu"
        :src="attachment.dataUrl"
        :width="attachment.width"
        :height="attachment.height"
@@ -63,8 +64,9 @@ const downloadAttachment = async () => {
        @error="handleError"
      />
      <div
-        class="inset-0 p-2 absolute bg-gradient-to-tl from-n-slate-12/30 dark:from-n-slate-1/50 via-transparent to-transparent hidden group-hover:flex items-end justify-end gap-1.5"
-      >
+        class="inset-0 p-2 pointer-events-none absolute bg-gradient-to-tl from-n-slate-12/30 dark:from-n-slate-1/50 via-transparent to-transparent hidden group-hover:flex"
+      />
+      <div class="absolute right-2 bottom-2 hidden group-hover:flex gap-2">
        <Button xs solid slate icon="i-lucide-expand" class="opacity-60" />
        <Button
          xs
--- a/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
@@ -41,13 +41,13 @@ const onVideoLoadError = () => {
    <div v-if="content" v-dompurify-html="formattedContent" class="mb-2" />
    <img
      v-if="!hasImgStoryError"
-      class="rounded-lg max-w-80"
+      class="rounded-lg max-w-80 skip-context-menu"
      :src="attachment.dataUrl"
      @error="onImageLoadError"
    />
    <video
      v-else-if="!hasVideoStoryError"
-      class="rounded-lg max-w-80"
+      class="rounded-lg max-w-80 skip-context-menu"
      controls
      :src="attachment.dataUrl"
      @error="onVideoLoadError"
--- a/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import BaseBubble from 'next/message/bubbles/Base.vue';
 import FormattedContent from './FormattedContent.vue';
 import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
@@ -9,6 +9,26 @@ import { useMessageContext } from '../../provider.js';
 const { content, attachments, contentAttributes, messageType } =
  useMessageContext();

+const hasTranslations = computed(() => {
+  const { translations = {} } = contentAttributes.value;
+  return Object.keys(translations || {}).length > 0;
+});
+
+const renderOriginal = ref(false);
+
+const renderContent = computed(() => {
+  if (renderOriginal.value) {
+    return content.value;
+  }
+
+  if (hasTranslations.value) {
+    const translations = contentAttributes.value.translations;
+    return translations[Object.keys(translations)[0]];
+  }
+
+  return content.value;
+});
+
 const isTemplate = computed(() => {
  return messageType.value === MESSAGE_TYPES.TEMPLATE;
 });
@@ -16,6 +36,16 @@ const isTemplate = computed(() => {
 const isEmpty = computed(() => {
  return !content.value && !attachments.value?.length;
 });
+
+const viewToggleKey = computed(() => {
+  return renderOriginal.value
+    ? 'CONVERSATION.VIEW_TRANSLATED'
+    : 'CONVERSATION.VIEW_ORIGINAL';
+});
+
+const handleSeeOriginal = () => {
+  renderOriginal.value = !renderOriginal.value;
+};
 </script>

 <template>
@@ -24,7 +54,16 @@ const isEmpty = computed(() => {
      <span v-if="isEmpty" class="text-n-slate-11">
        {{ $t('CONVERSATION.NO_CONTENT') }}
      </span>
-      <FormattedContent v-if="content" :content="content" />
+      <FormattedContent v-if="renderContent" :content="renderContent" />
+      <span class="-mt-3">
+        <span
+          v-if="hasTranslations"
+          class="text-xs text-n-slate-11 cursor-pointer hover:underline"
+          @click="handleSeeOriginal"
+        >
+          {{ $t(viewToggleKey) }}
+        </span>
+      </span>
      <AttachmentChips :attachments="attachments" class="gap-2" />
      <template v-if="isTemplate">
        <div
--- a/app/javascript/dashboard/components-next/message/bubbles/Video.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Video.vue
@@ -35,13 +35,13 @@ const isReel = computed(() => {
    <div class="relative group rounded-lg overflow-hidden">
      <div
        v-if="isReel"
-        class="absolute p-2 flex items-start justify-end right-0"
+        class="absolute p-2 flex items-start justify-end right-0 pointer-events-none"
      >
        <Icon icon="i-lucide-instagram" class="text-white shadow-lg" />
      </div>
      <video
        controls
-        class="rounded-lg"
+        class="rounded-lg skip-context-menu"
        :src="attachment.dataUrl"
        :class="{
          'max-w-48': isReel,
--- a/app/javascript/dashboard/components-next/message/chips/Image.vue
+++ b/app/javascript/dashboard/components-next/message/chips/Image.vue
@@ -36,7 +36,7 @@ const handleError = () => {
    </div>
    <img
      v-else
-      class="object-cover w-full h-full"
+      class="object-cover w-full h-full skip-context-menu"
      :src="attachment.dataUrl"
      @error="handleError"
    />
--- a/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue
+++ b/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue
@@ -90,19 +90,19 @@ const activeCountry = computed(() =>

 const inputBorderClass = computed(() => {
  const errorClass =
-    'border-n-ruby-8 dark:border-n-ruby-8 hover:border-n-ruby-9 dark:hover:border-n-ruby-9 disabled:border-n-ruby-8 dark:disabled:border-n-ruby-8';
+    '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';
  const focusClass =
-    'has-[:focus]:border-n-brand dark:has-[:focus]:border-n-brand';
+    'has-[:focus]:outline-n-brand dark:has-[:focus]:outline-n-brand';

  if (!props.showBorder) {
    if (hasError.value) return errorClass;
-    return `border-transparent ${focusClass}`;
+    return `outline-transparent ${focusClass}`;
  }

  if (hasError.value) {
    return errorClass;
  }
-  return `${focusClass} border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 disabled:border-n-weak dark:disabled:border-n-weak`;
+  return `${focusClass} outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 disabled:outline-n-weak dark:disabled:outline-n-weak`;
 });

 const phoneNumberError = computed(() => {
@@ -163,7 +163,7 @@ watch(
  <div>
    <div
      v-on-clickaway="() => closeCountryDropdown()"
-      class="relative flex items-center h-8 transition-all duration-500 ease-in-out border rounded-lg bg-n-alpha-black2"
+      class="relative flex items-center h-8 transition-all duration-500 ease-in-out outline outline-1 outline-offset-[-1px] rounded-lg bg-n-alpha-black2"
      :class="[inputBorderClass, { 'cursor-not-allowed opacity-50': disabled }]"
    >
      <Input
@@ -171,7 +171,7 @@ watch(
        type="tel"
        :placeholder="placeholder"
        :disabled="disabled"
-        custom-input-class="!border-0 h-8 !py-0.5 !bg-transparent ltr:!pl-1 rtl:!pr-1"
+        custom-input-class="!border-0 !outline-none h-8 !py-0.5 !bg-transparent ltr:!pl-1 rtl:!pr-1"
        class="w-full !flex-row"
      >
        <template #prefix>
@@ -185,7 +185,7 @@ watch(
              "
              trailing-icon
              :disabled="disabled"
-              class="!h-[1.875rem] top-1 !px-2 outline-0 !outline-none !rounded-lg border-0 ltr:!rounded-r-none rtl:!rounded-l-none"
+              class="!h-[1.875rem] top-1 ltr:ml-px rtl:mr-px !px-2 outline-0 !outline-none !rounded-lg border-0 ltr:!rounded-r-none rtl:!rounded-l-none"
              @click="toggleCountryDropdown"
            >
              <span
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -90,7 +90,7 @@ const sortedInboxes = computed(() =>
  inboxes.value.slice().sort((a, b) => a.name.localeCompare(b.name))
 );

-const newReportRoutes = [
+const newReportRoutes = () => [
  {
    name: 'Reports Agent',
    label: t('SIDEBAR.REPORTS_AGENT'),
@@ -116,7 +116,7 @@ const newReportRoutes = [
  },
 ];

-const oldReportRoutes = [
+const oldReportRoutes = () => [
  {
    name: 'Reports Agent',
    label: t('SIDEBAR.REPORTS_AGENT'),
@@ -140,7 +140,7 @@ const oldReportRoutes = [
 ];

 const reportRoutes = computed(() =>
-  showV4Routes.value ? newReportRoutes : oldReportRoutes
+  showV4Routes.value ? newReportRoutes() : oldReportRoutes()
 );

 const menuItems = computed(() => {
--- a/app/javascript/dashboard/components-next/textarea/TextArea.vue
+++ b/app/javascript/dashboard/components-next/textarea/TextArea.vue
@@ -179,7 +179,7 @@ onMounted(() => {
        }"
        :disabled="disabled"
        rows="1"
-        class="flex w-full reset-base text-sm p-0 !rounded-none !bg-transparent dark:!bg-transparent !border-0 !mb-0 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 text-n-slate-12 dark:text-n-slate-12 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-25 dark:disabled:bg-slate-900"
+        class="flex w-full reset-base text-sm p-0 !rounded-none !bg-transparent dark:!bg-transparent !border-0 !outline-0 !mb-0 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 text-n-slate-12 dark:text-n-slate-12 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-25 dark:disabled:bg-slate-900"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -353,10 +353,11 @@ function setFiltersFromUISettings() {
  const { conversations_filter_by: filterBy = {} } = uiSettings.value;
  const { status, order_by: orderBy } = filterBy;
  activeStatus.value = status || wootConstants.STATUS_TYPE.OPEN;
-  activeSortBy.value =
-    Object.keys(wootConstants.SORT_BY_TYPE).find(
-      sortField => sortField === orderBy
-    ) || wootConstants.SORT_BY_TYPE.LAST_ACTIVITY_AT_DESC;
+  activeSortBy.value = Object.values(wootConstants.SORT_BY_TYPE).includes(
+    orderBy
+  )
+    ? orderBy
+    : wootConstants.SORT_BY_TYPE.LAST_ACTIVITY_AT_DESC;
 }

 function emitConversationLoaded() {
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -9,12 +9,15 @@ import { getRegexp } from 'shared/helpers/Validators';
 import { useVuelidate } from '@vuelidate/core';
 import { emitter } from 'shared/helpers/mitt';

+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 const DATE_FORMAT = 'yyyy-MM-dd';

 export default {
  components: {
    MultiselectDropdown,
    HelperTextPopup,
+    NextButton,
  },
  props: {
    label: { type: String, required: true },
@@ -219,14 +222,13 @@ export default {
              class="mt-0.5"
            />
          </span>
-          <woot-button
+          <NextButton
            v-if="showActions && value"
            v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
-            variant="link"
-            size="medium"
-            color-scheme="secondary"
-            icon="delete"
-            class-names="flex justify-end !w-fit"
+            slate
+            sm
+            link
+            icon="i-lucide-trash-2"
            @click="onDelete"
          />
        </div>
@@ -246,10 +248,10 @@ export default {
            @keyup.enter="onUpdate"
          />
          <div>
-            <woot-button
-              size="small"
-              icon="checkmark"
-              class="ltr:rounded-l-none rtl:rounded-r-none"
+            <NextButton
+              sm
+              icon="i-lucide-check"
+              class="ltr:rounded-l-none rtl:rounded-r-none h-[34px]"
              @click="onUpdate"
            />
          </div>
@@ -281,25 +283,27 @@ export default {
        >
          {{ displayValue || '---' }}
        </p>
-        <div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
-          <woot-button
+        <div
+          class="flex items-center max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0"
+        >
+          <NextButton
            v-if="showActions && value"
            v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
-            variant="link"
-            size="small"
-            color-scheme="secondary"
-            icon="clipboard"
-            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
+            xs
+            slate
+            ghost
+            icon="i-lucide-clipboard"
+            class="hidden group-hover:flex flex-shrink-0"
            @click="onCopy"
          />
-          <woot-button
+          <NextButton
            v-if="showActions"
            v-tooltip.right="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
-            variant="link"
-            size="small"
-            color-scheme="secondary"
-            icon="edit"
-            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
+            xs
+            slate
+            ghost
+            icon="i-lucide-pen"
+            class="hidden group-hover:flex flex-shrink-0"
            @click="onEdit"
          />
        </div>
--- a/app/javascript/dashboard/components/CustomSnoozeModal.vue
+++ b/app/javascript/dashboard/components/CustomSnoozeModal.vue
@@ -1,9 +1,11 @@
 <script>
 import DatePicker from 'vue-datepicker-next';
+import NextButton from 'dashboard/components-next/button/Button.vue';

 export default {
  components: {
    DatePicker,
+    NextButton,
  },
  emits: ['close', 'chooseTime'],

@@ -52,18 +54,23 @@ export default {
        v-model:value="snoozeTime"
        type="datetime"
        inline
-        input-class="mx-input reset-base"
+        input-class="mx-input "
        :lang="lang"
        :disabled-date="disabledDate"
        :disabled-time="disabledTime"
      />
      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
-        </woot-button>
-        <woot-button>
-          {{ $t('CONVERSATION.CUSTOM_SNOOZE.APPLY') }}
-        </woot-button>
+        <NextButton
+          faded
+          slate
+          type="reset"
+          :label="$t('CONVERSATION.CUSTOM_SNOOZE.CANCEL')"
+          @click.prevent="onClose"
+        />
+        <NextButton
+          type="submit"
+          :label="$t('CONVERSATION.CUSTOM_SNOOZE.APPLY')"
+        />
      </div>
    </form>
  </div>
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -2,6 +2,7 @@
 // [TODO] Use Teleport to move the modal to the end of the body
 import { ref, computed, defineEmits, onMounted } from 'vue';
 import { useEventListener } from '@vueuse/core';
+import Button from 'dashboard/components-next/button/Button.vue';

 const { modalType, closeOnBackdropClick, onClose } = defineProps({
  closeOnBackdropClick: { type: Boolean, default: true },
@@ -85,11 +86,11 @@ onMounted(() => {
        @mouse.stop
        @mousedown="event => event.stopPropagation()"
      >
-        <woot-button
+        <Button
          v-if="showCloseButton"
-          color-scheme="secondary"
-          icon="dismiss"
-          variant="clear"
+          ghost
+          slate
+          icon="i-lucide-x"
          class="absolute z-10 ltr:right-2 rtl:left-2 top-2"
          @click="close"
        />
--- a/app/javascript/dashboard/components/NetworkNotification.vue
+++ b/app/javascript/dashboard/components/NetworkNotification.vue
@@ -11,6 +11,8 @@ import {
 } from 'dashboard/helper/routeHelpers';
 import { useEventListener } from '@vueuse/core';

+import Button from 'dashboard/components-next/button/Button.vue';
+
 const { t } = useI18n();
 const route = useRoute();

@@ -107,34 +109,31 @@ onBeforeUnmount(() => {

 <template>
  <transition name="network-notification-fade" tag="div">
-    <div v-show="showNotification" class="fixed z-50 top-4 left-2 group">
+    <div v-show="showNotification" class="fixed z-50 top-2 left-2 group">
      <div
-        class="relative flex items-center justify-between w-full px-2 py-1 bg-yellow-200 rounded-lg shadow-lg dark:bg-yellow-700"
+        class="relative flex items-center justify-between w-full px-2 py-1 bg-n-amber-4 dark:bg-n-amber-8 rounded-lg shadow-lg"
      >
-        <fluent-icon
-          :icon="iconName"
-          class="text-yellow-700/50 dark:text-yellow-50"
-          size="18"
-        />
-        <span
-          class="px-2 text-xs font-medium tracking-wide text-yellow-700/70 dark:text-yellow-50"
-        >
+        <fluent-icon :icon="iconName" class="text-n-amber-12" size="18" />
+        <span class="px-2 text-xs font-medium tracking-wide text-n-amber-12">
          {{ bannerText }}
        </span>
-        <woot-button
+        <Button
          v-if="canRefresh"
+          ghost
+          sm
+          amber
+          icon="i-lucide-refresh-ccw"
          :title="$t('NETWORK.BUTTON.REFRESH')"
-          variant="clear"
-          size="small"
-          color-scheme="warning"
-          icon="arrow-clockwise"
+          class="!text-n-amber-12 dark:!text-n-amber-9"
          @click="refreshPage"
        />
-        <woot-button
-          variant="clear"
-          size="small"
-          color-scheme="warning"
-          icon="dismiss"
+
+        <Button
+          ghost
+          sm
+          amber
+          icon="i-lucide-x"
+          class="!text-n-amber-12 dark:!text-n-amber-9"
          @click="closeNotification"
        />
      </div>
--- a/Show More
+++ b/Show More