fix: Instead of blocking every content type, block only json requests

.github/workflows/frontend-fe.yml

@@ -10,7 +10,7 @@ on:
 
 jobs:
   test:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-20.04
 
     steps:
       - uses: actions/checkout@v4

.github/workflows/nightly_installer.yml

@@ -2,7 +2,7 @@
 # #
 # # Linux nightly installer action
 # # This action will try to install and setup
-# # chatwoot on an Ubuntu 22.04 machine using
+# # chatwoot on an Ubuntu 20.04 machine using
 # # the linux installer script.
 # #
 # # This is set to run daily at midnight.

.github/workflows/run_foss_spec.yml

@@ -9,7 +9,7 @@ on:
 
 jobs:
   test:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-20.04
     services:
       postgres:
         image: pgvector/pgvector:pg15

.github/workflows/size-limit.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   test:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-20.04
 
     steps:
       - uses: actions/checkout@v4

.gitignore

@@ -91,6 +91,3 @@ yarn-debug.log*
 # Vite uses dotenv and suggests to ignore local-only env files. See
 # https://vitejs.dev/guide/env-and-mode.html#env-files
 *.local
-
-# Claude.ai config file
-CLAUDE.md

Gemfile.lock

@@ -501,14 +501,14 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.3)
-    nokogiri (1.18.4)
+    nokogiri (1.18.3)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.18.4-arm64-darwin)
+    nokogiri (1.18.3-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.4-x86_64-darwin)
+    nokogiri (1.18.3-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.4-x86_64-linux-gnu)
+    nokogiri (1.18.3-x86_64-linux-gnu)
       racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)

README.md

@@ -1,11 +1,22 @@
-<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"/>
+## 🚨 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"/>
 
 ___
 
 # Chatwoot
 
-The modern customer support platform, an open-source alternative to Intercom, Zendesk, Salesforce Service Cloud etc.
+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>
 
 <p>
   <a href="https://codeclimate.com/github/chatwoot/chatwoot/maintainability"><img src="https://api.codeclimate.com/v1/badges/e6e3f66332c91e5a4c0c/maintainability" alt="Maintainability"></a>
@@ -20,71 +31,41 @@ The modern customer support platform, an open-source alternative to Intercom, Ze
   <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"/>
 
-<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>
+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.
 
-<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"/>
+## Features
 
----
+Chatwoot supports the following conversation channels:
 
-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.
+ - **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.
 
-### ✨ Captain – AI Agent for Support
+And more.
 
-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.
+Other features include:
 
+- **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
 
@@ -126,11 +107,13 @@ 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
+
+## Community? Questions? Support ?
 
 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):
 

app/builders/contact_inbox_builder.rb

@@ -64,40 +64,5 @@ 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?
-      "whatsapp:#{@source_id}#{rand(100)}"
-    else
-      "#{rand(10)}#{@source_id}"
-    end
-  end
-
-  def allowed_channels?
-    @inbox.email? || @inbox.sms? || @inbox.twilio? || @inbox.whatsapp?
   end
 end

app/builders/contact_inbox_with_contact_builder.rb

@@ -63,33 +63,9 @@ class ContactInboxWithContactBuilder
     contact = find_contact_by_identifier(contact_attributes[:identifier])
     contact ||= find_contact_by_email(contact_attributes[:email])
     contact ||= find_contact_by_phone_number(contact_attributes[:phone_number])
-    contact ||= find_contact_by_instagram_source_id(source_id) if instagram_channel?
-
     contact
   end
 
-  def instagram_channel?
-    inbox.channel_type == 'Channel::Instagram'
-  end
-
-  # There might be existing contact_inboxes created through Channel::FacebookPage
-  # with the same Instagram source_id. New Instagram interactions should create fresh contact_inboxes
-  # while still reusing contacts if found in Facebook channels so that we can create
-  # new conversations with the same contact.
-  def find_contact_by_instagram_source_id(instagram_id)
-    return if instagram_id.blank?
-
-    existing_contact_inbox = ContactInbox.joins(:inbox)
-                                         .where(source_id: instagram_id)
-                                         .where(
-                                           'inboxes.channel_type = ? AND inboxes.account_id = ?',
-                                           'Channel::FacebookPage',
-                                           account.id
-                                         ).first
-
-    existing_contact_inbox&.contact
-  end
-
   def find_contact_by_identifier(identifier)
     return if identifier.blank?
 

app/builders/messages/instagram/base_message_builder.rb

@@ -1,179 +0,0 @@
-class Messages::Instagram::BaseMessageBuilder < Messages::Messenger::MessageBuilder
-  attr_reader :messaging
-
-  def initialize(messaging, inbox, outgoing_echo: false)
-    super()
-    @messaging = messaging
-    @inbox = inbox
-    @outgoing_echo = outgoing_echo
-  end
-
-  def perform
-    return if @inbox.channel.reauthorization_required?
-
-    ActiveRecord::Base.transaction do
-      build_message
-    end
-  rescue StandardError => e
-    handle_error(e)
-  end
-
-  private
-
-  def attachments
-    @messaging[:message][:attachments] || {}
-  end
-
-  def message_type
-    @outgoing_echo ? :outgoing : :incoming
-  end
-
-  def message_identifier
-    message[:mid]
-  end
-
-  def message_source_id
-    @outgoing_echo ? recipient_id : sender_id
-  end
-
-  def message_is_unsupported?
-    message[:is_unsupported].present? && @messaging[:message][:is_unsupported] == true
-  end
-
-  def sender_id
-    @messaging[:sender][:id]
-  end
-
-  def recipient_id
-    @messaging[:recipient][:id]
-  end
-
-  def message
-    @messaging[:message]
-  end
-
-  def contact
-    @contact ||= @inbox.contact_inboxes.find_by(source_id: message_source_id)&.contact
-  end
-
-  def conversation
-    @conversation ||= set_conversation_based_on_inbox_config
-  end
-
-  def set_conversation_based_on_inbox_config
-    if @inbox.lock_to_single_conversation
-      find_conversation_scope.order(created_at: :desc).first || build_conversation
-    else
-      find_or_build_for_multiple_conversations
-    end
-  end
-
-  def find_conversation_scope
-    Conversation.where(conversation_params)
-  end
-
-  def find_or_build_for_multiple_conversations
-    last_conversation = find_conversation_scope.where.not(status: :resolved).order(created_at: :desc).first
-    return build_conversation if last_conversation.nil?
-
-    last_conversation
-  end
-
-  def message_content
-    @messaging[:message][:text]
-  end
-
-  def story_reply_attributes
-    message[:reply_to][:story] if message[:reply_to].present? && message[:reply_to][:story].present?
-  end
-
-  def message_reply_attributes
-    message[:reply_to][:mid] if message[:reply_to].present? && message[:reply_to][:mid].present?
-  end
-
-  def build_message
-    # Duplicate webhook events may be sent for the same message
-    # when a user is connected to the Instagram account through both Messenger and Instagram login.
-    # Therefore, we need to check if the message already exists before creating it.
-    return if message_already_exists?
-
-    return if @outgoing_echo
-
-    return if message_content.blank? && all_unsupported_files?
-
-    @message = conversation.messages.create!(message_params)
-    save_story_id
-
-    attachments.each do |attachment|
-      process_attachment(attachment)
-    end
-  end
-
-  def save_story_id
-    return if story_reply_attributes.blank?
-
-    @message.save_story_info(story_reply_attributes)
-  end
-
-  def build_conversation
-    @contact_inbox ||= contact.contact_inboxes.find_by!(source_id: message_source_id)
-    Conversation.create!(conversation_params.merge(
-                           contact_inbox_id: @contact_inbox.id,
-                           additional_attributes: additional_conversation_attributes
-                         ))
-  end
-
-  def additional_conversation_attributes
-    {}
-  end
-
-  def conversation_params
-    {
-      account_id: @inbox.account_id,
-      inbox_id: @inbox.id,
-      contact_id: contact.id
-    }
-  end
-
-  def message_params
-    params = {
-      account_id: conversation.account_id,
-      inbox_id: conversation.inbox_id,
-      message_type: message_type,
-      source_id: message_identifier,
-      content: message_content,
-      sender: @outgoing_echo ? nil : contact,
-      content_attributes: {
-        in_reply_to_external_id: message_reply_attributes
-      }
-    }
-
-    params[:content_attributes][:is_unsupported] = true if message_is_unsupported?
-    params
-  end
-
-  def message_already_exists?
-    cw_message = conversation.messages.where(
-      source_id: @messaging[:message][:mid]
-    ).first
-
-    cw_message.present?
-  end
-
-  def all_unsupported_files?
-    return if attachments.empty?
-
-    attachments_type = attachments.pluck(:type).uniq.first
-    unsupported_file_type?(attachments_type)
-  end
-
-  def handle_error(error)
-    ChatwootExceptionTracker.new(error, account: @inbox.account).capture_exception
-    true
-  end
-
-  # Abstract methods to be implemented by subclasses
-  def get_story_object_from_source_id(source_id)
-    raise NotImplementedError
-  end
-end

app/builders/messages/instagram/message_builder.rb

@@ -1,42 +1,200 @@
-class Messages::Instagram::MessageBuilder < Messages::Instagram::BaseMessageBuilder
+# This class creates both outgoing messages from chatwoot and echo outgoing messages based on the flag `outgoing_echo`
+# Assumptions
+# 1. Incase of an outgoing message which is echo, source_id will NOT be nil,
+#    based on this we are showing "not sent from chatwoot" message in frontend
+#    Hence there is no need to set user_id in message for outgoing echo messages.
+
+class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
+  attr_reader :messaging
+
   def initialize(messaging, inbox, outgoing_echo: false)
-    super(messaging, inbox, outgoing_echo: outgoing_echo)
+    super()
+    @messaging = messaging
+    @inbox = inbox
+    @outgoing_echo = outgoing_echo
+  end
+
+  def perform
+    return if @inbox.channel.reauthorization_required?
+
+    ActiveRecord::Base.transaction do
+      build_message
+    end
+  rescue Koala::Facebook::AuthenticationError => e
+    Rails.logger.warn("Instagram authentication error for inbox: #{@inbox.id} with error: #{e.message}")
+    Rails.logger.error e
+    @inbox.channel.authorization_error!
+    raise
+  rescue StandardError => e
+    ChatwootExceptionTracker.new(e, account: @inbox.account).capture_exception
+    true
   end
 
   private
 
-  def get_story_object_from_source_id(source_id)
-    url = "#{base_uri}/#{source_id}?fields=story,from&access_token=#{@inbox.channel.access_token}"
-
-    response = HTTParty.get(url)
-
-    return JSON.parse(response.body).with_indifferent_access if response.success?
-
-    # Create message first if it doesn't exist
-    @message ||= conversation.messages.create!(message_params)
-    handle_error_response(response)
-    nil
+  def attachments
+    @messaging[:message][:attachments] || {}
   end
 
-  def handle_error_response(response)
-    parsed_response = JSON.parse(response.body)
-    error_code = parsed_response.dig('error', 'code')
+  def message_type
+    @outgoing_echo ? :outgoing : :incoming
+  end
 
-    # https://developers.facebook.com/docs/messenger-platform/error-codes
-    # Access token has expired or become invalid.
-    channel.authorization_error! if error_code == 190
+  def message_identifier
+    message[:mid]
+  end
 
-    # There was a problem scraping data from the provided link.
-    # https://developers.facebook.com/docs/graph-api/guides/error-handling/ search for error code 1609005
-    if error_code == 1_609_005
-      @message.attachments.destroy_all
-      @message.update(content: I18n.t('conversations.messages.instagram_deleted_story_content'))
+  def message_source_id
+    @outgoing_echo ? recipient_id : sender_id
+  end
+
+  def message_is_unsupported?
+    message[:is_unsupported].present? && @messaging[:message][:is_unsupported] == true
+  end
+
+  def sender_id
+    @messaging[:sender][:id]
+  end
+
+  def recipient_id
+    @messaging[:recipient][:id]
+  end
+
+  def message
+    @messaging[:message]
+  end
+
+  def contact
+    @contact ||= @inbox.contact_inboxes.find_by(source_id: message_source_id)&.contact
+  end
+
+  def conversation
+    @conversation ||= set_conversation_based_on_inbox_config
+  end
+
+  def instagram_direct_message_conversation
+    Conversation.where(conversation_params)
+                .where("additional_attributes ->> 'type' = 'instagram_direct_message'")
+  end
+
+  def set_conversation_based_on_inbox_config
+    if @inbox.lock_to_single_conversation
+      instagram_direct_message_conversation.order(created_at: :desc).first || build_conversation
+    else
+      find_or_build_for_multiple_conversations
     end
-
-    Rails.logger.error("[InstagramStoryFetchError]: #{parsed_response.dig('error', 'message')} #{error_code}")
   end
 
-  def base_uri
-    "https://graph.instagram.com/#{GlobalConfigService.load('INSTAGRAM_API_VERSION', 'v22.0')}"
+  def find_or_build_for_multiple_conversations
+    last_conversation = instagram_direct_message_conversation.where.not(status: :resolved).order(created_at: :desc).first
+
+    return build_conversation if last_conversation.nil?
+
+    last_conversation
   end
+
+  def message_content
+    @messaging[:message][:text]
+  end
+
+  def story_reply_attributes
+    message[:reply_to][:story] if message[:reply_to].present? && message[:reply_to][:story].present?
+  end
+
+  def message_reply_attributes
+    message[:reply_to][:mid] if message[:reply_to].present? && message[:reply_to][:mid].present?
+  end
+
+  def build_message
+    return if @outgoing_echo && already_sent_from_chatwoot?
+    return if message_content.blank? && all_unsupported_files?
+
+    @message = conversation.messages.create!(message_params)
+    save_story_id
+
+    attachments.each do |attachment|
+      process_attachment(attachment)
+    end
+  end
+
+  def save_story_id
+    return if story_reply_attributes.blank?
+
+    @message.save_story_info(story_reply_attributes)
+  end
+
+  def build_conversation
+    @contact_inbox ||= contact.contact_inboxes.find_by!(source_id: message_source_id)
+
+    Conversation.create!(conversation_params.merge(
+                           contact_inbox_id: @contact_inbox.id,
+                           additional_attributes: { type: 'instagram_direct_message' }
+                         ))
+  end
+
+  def conversation_params
+    {
+      account_id: @inbox.account_id,
+      inbox_id: @inbox.id,
+      contact_id: contact.id
+    }
+  end
+
+  def message_params
+    params = {
+      account_id: conversation.account_id,
+      inbox_id: conversation.inbox_id,
+      message_type: message_type,
+      source_id: message_identifier,
+      content: message_content,
+      sender: @outgoing_echo ? nil : contact,
+      content_attributes: {
+        in_reply_to_external_id: message_reply_attributes
+      }
+    }
+
+    params[:content_attributes][:is_unsupported] = true if message_is_unsupported?
+    params
+  end
+
+  def already_sent_from_chatwoot?
+    cw_message = conversation.messages.where(
+      source_id: @messaging[:message][:mid]
+    ).first
+
+    cw_message.present?
+  end
+
+  def all_unsupported_files?
+    return if attachments.empty?
+
+    attachments_type = attachments.pluck(:type).uniq.first
+    unsupported_file_type?(attachments_type)
+  end
+
+  ### Sample response
+  # {
+  #   "object": "instagram",
+  #   "entry": [
+  #     {
+  #       "id": "<IGID>",// ig id of the business
+  #       "time": 1569262486134,
+  #       "messaging": [
+  #         {
+  #           "sender": {
+  #             "id": "<IGSID>"
+  #           },
+  #           "recipient": {
+  #             "id": "<IGID>"
+  #           },
+  #           "timestamp": 1569262485349,
+  #           "message": {
+  #             "mid": "<MESSAGE_ID>",
+  #             "text": "<MESSAGE_CONTENT>"
+  #           }
+  #         }
+  #       ]
+  #     }
+  #   ],
+  # }
 end

app/builders/messages/instagram/messenger/message_builder.rb

@@ -1,33 +0,0 @@
-class Messages::Instagram::Messenger::MessageBuilder < Messages::Instagram::BaseMessageBuilder
-  def initialize(messaging, inbox, outgoing_echo: false)
-    super(messaging, inbox, outgoing_echo: outgoing_echo)
-  end
-
-  private
-
-  def get_story_object_from_source_id(source_id)
-    k = Koala::Facebook::API.new(@inbox.channel.page_access_token) if @inbox.facebook?
-    k.get_object(source_id, fields: %w[story from]) || {}
-  rescue Koala::Facebook::AuthenticationError
-    @inbox.channel.authorization_error!
-    raise
-  rescue Koala::Facebook::ClientError => e
-    # The exception occurs when we are trying fetch the deleted story or blocked story.
-    @message.attachments.destroy_all
-    @message.update(content: I18n.t('conversations.messages.instagram_deleted_story_content'))
-    Rails.logger.error e
-    {}
-  rescue StandardError => e
-    ChatwootExceptionTracker.new(e, account: @inbox.account).capture_exception
-    {}
-  end
-
-  def find_conversation_scope
-    Conversation.where(conversation_params)
-                .where("additional_attributes ->> 'type' = 'instagram_direct_message'")
-  end
-
-  def additional_conversation_attributes
-    { type: 'instagram_direct_message' }
-  end
-end

app/builders/messages/messenger/message_builder.rb

@@ -68,8 +68,20 @@ class Messages::Messenger::MessageBuilder
     message.save!
   end
 
-  # This is a placeholder method to be overridden by child classes
-  def get_story_object_from_source_id(_source_id)
+  def get_story_object_from_source_id(source_id)
+    k = Koala::Facebook::API.new(@inbox.channel.page_access_token) if @inbox.facebook?
+    k.get_object(source_id, fields: %w[story from]) || {}
+  rescue Koala::Facebook::AuthenticationError
+    @inbox.channel.authorization_error!
+    raise
+  rescue Koala::Facebook::ClientError => e
+    # The exception occurs when we are trying fetch the deleted story or blocked story.
+    @message.attachments.destroy_all
+    @message.update(content: I18n.t('conversations.messages.instagram_deleted_story_content'))
+    Rails.logger.error e
+    {}
+  rescue StandardError => e
+    ChatwootExceptionTracker.new(e, account: @inbox.account).capture_exception
     {}
   end
 

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

@@ -72,7 +72,7 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
   end
 
   def allowed_agent_params
-    [:name, :email, :role, :availability, :auto_offline]
+    [:name, :email, :name, :role, :availability, :auto_offline]
   end
 
   def agent_params

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

@@ -1,21 +1,17 @@
 class Api::V1::Accounts::Contacts::ConversationsController < Api::V1::Accounts::Contacts::BaseController
   def index
-    # Start with all conversations for this contact
-    conversations = Current.account.conversations.includes(
+    @conversations = Current.account.conversations.includes(
       :assignee, :contact, :inbox, :taggings
-    ).where(contact_id: @contact.id)
+    ).where(inbox_id: inbox_ids, contact_id: @contact.id).order(last_activity_at: :desc).limit(20)
+  end
 
-    # Apply permission-based filtering using the existing service
-    conversations = Conversations::PermissionFilterService.new(
-      conversations,
-      Current.user,
-      Current.account
-    ).perform
+  private
 
-    # Only allow conversations from inboxes the user has access to
-    inbox_ids = Current.user.assigned_inboxes.pluck(:id)
-    conversations = conversations.where(inbox_id: inbox_ids)
-
-    @conversations = conversations.order(last_activity_at: :desc).limit(20)
+  def inbox_ids
+    if Current.user.administrator? || Current.user.agent?
+      Current.user.assigned_inboxes.pluck(:id)
+    else
+      []
+    end
   end
 end

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

@@ -48,7 +48,7 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
   end
 
   def filter
-    result = ::Conversations::FilterService.new(params.permit!, current_user, current_account).perform
+    result = ::Conversations::FilterService.new(params.permit!, current_user).perform
     @conversations = result[:conversations]
     @conversations_count = result[:count]
   rescue CustomExceptions::CustomFilter::InvalidAttribute,

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

@@ -1,30 +0,0 @@
-class Api::V1::Accounts::Instagram::AuthorizationsController < Api::V1::Accounts::BaseController
-  include InstagramConcern
-  include Instagram::IntegrationHelper
-  before_action :check_authorization
-
-  def create
-    # https://developers.facebook.com/docs/instagram-platform/instagram-api-with-instagram-login/business-login#step-1--get-authorization
-    redirect_url = instagram_client.auth_code.authorize_url(
-      {
-        redirect_uri: "#{base_url}/instagram/callback",
-        scope: REQUIRED_SCOPES.join(','),
-        enable_fb_login: '0',
-        force_authentication: '1',
-        response_type: 'code',
-        state: generate_instagram_token(Current.account.id)
-      }
-    )
-    if redirect_url
-      render json: { success: true, url: redirect_url }
-    else
-      render json: { success: false }, status: :unprocessable_entity
-    end
-  end
-
-  private
-
-  def check_authorization
-    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
-  end
-end

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

@@ -9,6 +9,11 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
     @portals = Current.account.portals
   end
 
+  def add_members
+    agents = Current.account.agents.where(id: portal_member_params[:member_ids])
+    @portal.members << agents
+  end
+
   def show
     @all_articles = @portal.articles
     @articles = @all_articles.search(locale: params[:locale])
@@ -80,6 +85,10 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
     { channel_web_widget_id: inbox.channel.id }
   end
 
+  def portal_member_params
+    params.require(:portal).permit(:account_id, member_ids: [])
+  end
+
   def set_current_page
     @current_page = params[:page] || 1
   end

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

@@ -66,7 +66,9 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
   end
 
   def check_authorization
-    authorize :report, :view?
+    return if Current.account_user.administrator?
+
+    raise Pundit::NotAuthorizedError
   end
 
   def common_params
@@ -135,3 +137,5 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
     V2::ReportBuilder.new(Current.account, conversation_params).conversation_metrics
   end
 end
+
+Api::V2::Accounts::ReportsController.prepend_mod_with('Api::V2::Accounts::ReportsController')

app/controllers/concerns/instagram_concern.rb

@@ -1,74 +0,0 @@
-module InstagramConcern
-  extend ActiveSupport::Concern
-
-  def instagram_client
-    ::OAuth2::Client.new(
-      client_id,
-      client_secret,
-      {
-        site: 'https://api.instagram.com',
-        authorize_url: 'https://api.instagram.com/oauth/authorize',
-        token_url: 'https://api.instagram.com/oauth/access_token',
-        auth_scheme: :request_body,
-        token_method: :post
-      }
-    )
-  end
-
-  private
-
-  def client_id
-    GlobalConfigService.load('INSTAGRAM_APP_ID', nil)
-  end
-
-  def client_secret
-    GlobalConfigService.load('INSTAGRAM_APP_SECRET', nil)
-  end
-
-  def exchange_for_long_lived_token(short_lived_token)
-    endpoint = 'https://graph.instagram.com/access_token'
-    params = {
-      grant_type: 'ig_exchange_token',
-      client_secret: client_secret,
-      access_token: short_lived_token,
-      client_id: client_id
-    }
-
-    make_api_request(endpoint, params, 'Failed to exchange token')
-  end
-
-  def fetch_instagram_user_details(access_token)
-    endpoint = 'https://graph.instagram.com/v22.0/me'
-    params = {
-      fields: 'id,username,user_id,name,profile_picture_url,account_type',
-      access_token: access_token
-    }
-
-    make_api_request(endpoint, params, 'Failed to fetch Instagram user details')
-  end
-
-  def make_api_request(endpoint, params, error_prefix)
-    response = HTTParty.get(
-      endpoint,
-      query: params,
-      headers: { 'Accept' => 'application/json' }
-    )
-
-    unless response.success?
-      Rails.logger.error "#{error_prefix}. Status: #{response.code}, Body: #{response.body}"
-      raise "#{error_prefix}: #{response.body}"
-    end
-
-    begin
-      JSON.parse(response.body)
-    rescue JSON::ParserError => e
-      ChatwootExceptionTracker.new(e).capture_exception
-      Rails.logger.error "Invalid JSON response: #{response.body}"
-      raise e
-    end
-  end
-
-  def base_url
-    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
-  end
-end

app/controllers/dashboard_controller.rb

@@ -15,7 +15,7 @@ class DashboardController < ActionController::Base
   private
 
   def ensure_html_format
-    head :not_acceptable unless request.format.html?
+    head :not_acceptable if request.format.json?
   end
 
   def set_global_config

app/controllers/instagram/callbacks_controller.rb

@@ -1,163 +0,0 @@
-class Instagram::CallbacksController < ApplicationController
-  include InstagramConcern
-  include Instagram::IntegrationHelper
-
-  def show
-    # Check if Instagram redirected with an error (user canceled authorization)
-    # See: https://developers.facebook.com/docs/instagram-platform/instagram-api-with-instagram-login/business-login#canceled-authorization
-    if params[:error].present?
-      handle_authorization_error
-      return
-    end
-
-    process_successful_authorization
-  rescue StandardError => e
-    handle_error(e)
-  end
-
-  private
-
-  # Process the authorization code and create inbox
-  def process_successful_authorization
-    @response = instagram_client.auth_code.get_token(
-      oauth_code,
-      redirect_uri: "#{base_url}/#{provider_name}/callback",
-      grant_type: 'authorization_code'
-    )
-
-    @long_lived_token_response = exchange_for_long_lived_token(@response.token)
-    inbox, already_exists = find_or_create_inbox
-
-    if already_exists
-      redirect_to app_instagram_inbox_settings_url(account_id: account_id, inbox_id: inbox.id)
-    else
-      redirect_to app_instagram_inbox_agents_url(account_id: account_id, inbox_id: inbox.id)
-    end
-  end
-
-  # Handle all errors that might occur during authorization
-  # https://developers.facebook.com/docs/instagram-platform/instagram-api-with-instagram-login/business-login#sample-rejected-response
-  def handle_error(error)
-    Rails.logger.error("Instagram Channel creation Error: #{error.message}")
-    ChatwootExceptionTracker.new(error).capture_exception
-
-    error_info = extract_error_info(error)
-    redirect_to_error_page(error_info)
-  end
-
-  # Extract error details from the exception
-  def extract_error_info(error)
-    if error.is_a?(OAuth2::Error)
-      begin
-        # Instagram returns JSON error response which we parse to extract error details
-        JSON.parse(error.message)
-      rescue JSON::ParseError
-        # Fall back to a generic OAuth error if JSON parsing fails
-        { 'error_type' => 'OAuthException', 'code' => 400, 'error_message' => error.message }
-      end
-    else
-      # For other unexpected errors
-      { 'error_type' => error.class.name, 'code' => 500, 'error_message' => error.message }
-    end
-  end
-
-  # Handles the case when a user denies permissions or cancels the authorization flow
-  # Error parameters are documented at:
-  # https://developers.facebook.com/docs/instagram-platform/instagram-api-with-instagram-login/business-login#canceled-authorization
-  def handle_authorization_error
-    error_info = {
-      'error_type' => params[:error] || 'authorization_error',
-      'code' => 400,
-      'error_message' => params[:error_description] || 'Authorization was denied'
-    }
-
-    Rails.logger.error("Instagram Authorization Error: #{error_info['error_message']}")
-    redirect_to_error_page(error_info)
-  end
-
-  # Centralized method to redirect to error page with appropriate parameters
-  # This ensures consistent error handling across different error scenarios
-  # Frontend will handle the error page based on the error_type
-  def redirect_to_error_page(error_info)
-    redirect_to app_new_instagram_inbox_url(
-      account_id: account_id,
-      error_type: error_info['error_type'],
-      code: error_info['code'],
-      error_message: error_info['error_message']
-    )
-  end
-
-  def find_or_create_inbox
-    user_details = fetch_instagram_user_details(@long_lived_token_response['access_token'])
-    channel_instagram = find_channel_by_instagram_id(user_details['user_id'].to_s)
-    channel_exists = channel_instagram.present?
-
-    if channel_instagram
-      update_channel(channel_instagram, user_details)
-    else
-      channel_instagram = create_channel_with_inbox(user_details)
-    end
-
-    # reauthorize channel, this code path only triggers when instagram auth is successful
-    # reauthorized will also update cache keys for the associated inbox
-    channel_instagram.reauthorized!
-
-    [channel_instagram.inbox, channel_exists]
-  end
-
-  def find_channel_by_instagram_id(instagram_id)
-    Channel::Instagram.find_by(instagram_id: instagram_id, account: account)
-  end
-
-  def update_channel(channel_instagram, user_details)
-    expires_at = Time.current + @long_lived_token_response['expires_in'].seconds
-
-    channel_instagram.update!(
-      access_token: @long_lived_token_response['access_token'],
-      expires_at: expires_at
-    )
-
-    # Update inbox name if username changed
-    channel_instagram.inbox.update!(name: user_details['username'])
-    channel_instagram
-  end
-
-  def create_channel_with_inbox(user_details)
-    ActiveRecord::Base.transaction do
-      expires_at = Time.current + @long_lived_token_response['expires_in'].seconds
-
-      channel_instagram = Channel::Instagram.create!(
-        access_token: @long_lived_token_response['access_token'],
-        instagram_id: user_details['user_id'].to_s,
-        account: account,
-        expires_at: expires_at
-      )
-
-      account.inboxes.create!(
-        account: account,
-        channel: channel_instagram,
-        name: user_details['username']
-      )
-
-      channel_instagram
-    end
-  end
-
-  def account_id
-    return unless params[:state]
-
-    verify_instagram_token(params[:state])
-  end
-
-  def oauth_code
-    params[:code]
-  end
-
-  def account
-    @account ||= Account.find(account_id)
-  end
-
-  def provider_name
-    'instagram'
-  end
-end

app/controllers/super_admin/app_configs_controller.rb

@@ -43,8 +43,6 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
                          ['MAILER_INBOUND_EMAIL_DOMAIN']
                        when 'linear'
                          %w[LINEAR_CLIENT_ID LINEAR_CLIENT_SECRET]
-                       when 'instagram'
-                         %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT]
                        else
                          %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS]
                        end

app/controllers/webhooks/instagram_controller.rb

@@ -15,9 +15,6 @@ class Webhooks::InstagramController < ActionController::API
   private
 
   def valid_token?(token)
-    # Validates against both IG_VERIFY_TOKEN (Instagram channel via Facebook page) and
-    # INSTAGRAM_VERIFY_TOKEN (Instagram channel via direct Instagram login)
-    token == GlobalConfigService.load('IG_VERIFY_TOKEN', '') ||
-      token == GlobalConfigService.load('INSTAGRAM_VERIFY_TOKEN', '')
+    token == GlobalConfigService.load('IG_VERIFY_TOKEN', '')
   end
 end

app/dashboards/account_dashboard.rb

@@ -81,8 +81,7 @@ class AccountDashboard < Administrate::BaseDashboard
   COLLECTION_FILTERS = {
     active: ->(resources) { resources.where(status: :active) },
     suspended: ->(resources) { resources.where(status: :suspended) },
-    recent: ->(resources) { resources.where('created_at > ?', 30.days.ago) },
-    marked_for_deletion: ->(resources) { resources.where("custom_attributes->>'marked_for_deletion_at' IS NOT NULL") }
+    recent: ->(resources) { resources.where('created_at > ?', 30.days.ago) }
   }.freeze
 
   # Overwrite this method to customize how accounts are displayed

app/finders/conversation_finder.rb

@@ -32,7 +32,6 @@ class ConversationFinder
   def initialize(current_user, params)
     @current_user = current_user
     @current_account = current_user.account
-    @is_admin = current_account.account_users.find_by(user_id: current_user.id)&.administrator?
     @params = params
   end
 
@@ -86,19 +85,8 @@ class ConversationFinder
     @team = current_account.teams.find(params[:team_id]) if params[:team_id]
   end
 
-  def find_conversation_by_inbox
-    @conversations = current_account.conversations
-    @conversations = @conversations.where(inbox_id: @inbox_ids) unless params[:inbox_id].blank? && @is_admin
-  end
-
   def find_all_conversations
-    find_conversation_by_inbox
-    # Apply permission-based filtering
-    @conversations = Conversations::PermissionFilterService.new(
-      @conversations,
-      current_user,
-      current_account
-    ).perform
+    @conversations = current_account.conversations.where(inbox_id: @inbox_ids)
     filter_by_conversation_type if params[:conversation_type]
     @conversations
   end

app/helpers/billing_helper.rb

@@ -18,8 +18,4 @@ module BillingHelper
   def non_web_inboxes(account)
     account.inboxes.where.not(channel_type: Channel::WebWidget.to_s).count
   end
-
-  def agents(account)
-    account.users.count
-  end
 end

app/helpers/instagram/integration_helper.rb

@@ -1,49 +0,0 @@
-module Instagram::IntegrationHelper
-  REQUIRED_SCOPES = %w[instagram_business_basic instagram_business_manage_messages].freeze
-
-  # Generates a signed JWT token for Instagram 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_instagram_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 Instagram token: #{e.message}")
-    nil
-  end
-
-  def token_payload(account_id)
-    {
-      sub: account_id,
-      iat: Time.current.to_i
-    }
-  end
-
-  # Verifies and decodes a Instagram 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_instagram_token(token)
-    return if token.blank? || client_secret.blank?
-
-    decode_token(token, client_secret)
-  end
-
-  private
-
-  def client_secret
-    @client_secret ||= GlobalConfigService.load('INSTAGRAM_APP_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 Instagram token: #{e.message}")
-    nil
-  end
-end

app/javascript/dashboard/App.vue

@@ -4,6 +4,7 @@ import AddAccountModal from '../dashboard/components/layout/sidebarComponents/Ad
 import LoadingState from './components/widgets/LoadingState.vue';
 import NetworkNotification from './components/NetworkNotification.vue';
 import UpdateBanner from './components/app/UpdateBanner.vue';
+import UpgradeBanner from './components/app/UpgradeBanner.vue';
 import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
 import PendingEmailVerificationBanner from './components/app/PendingEmailVerificationBanner.vue';
 import vueActionCable from './helper/actionCable';
@@ -30,6 +31,7 @@ export default {
     UpdateBanner,
     PaymentPendingBanner,
     WootSnackbarBox,
+    UpgradeBanner,
     PendingEmailVerificationBanner,
   },
   setup() {
@@ -144,6 +146,7 @@ export default {
     <template v-if="currentAccountId">
       <PendingEmailVerificationBanner v-if="hideOnOnboardingView" />
       <PaymentPendingBanner v-if="hideOnOnboardingView" />
+      <UpgradeBanner />
     </template>
     <router-view v-slot="{ Component }">
       <transition name="fade" mode="out-in">

app/javascript/dashboard/api/channel/instagramClient.js

@@ -1,14 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class InstagramChannel extends ApiClient {
-  constructor() {
-    super('instagram', { accountScoped: true });
-  }
-
-  generateAuthorization(payload) {
-    return axios.post(`${this.url}/authorization`, payload);
-  }
-}
-
-export default new InstagramChannel();

app/javascript/dashboard/api/enterprise/account.js

@@ -17,12 +17,6 @@ class EnterpriseAccountAPI extends ApiClient {
   getLimits() {
     return axios.get(`${this.url}limits`);
   }
-
-  toggleDeletion(action) {
-    return axios.post(`${this.url}toggle_deletion`, {
-      action_type: action,
-    });
-  }
 }
 
 export default new EnterpriseAccountAPI();

app/javascript/dashboard/api/enterprise/specs/account.spec.js

@@ -10,7 +10,6 @@ describe('#enterpriseAccountAPI', () => {
     expect(accountAPI).toHaveProperty('update');
     expect(accountAPI).toHaveProperty('delete');
     expect(accountAPI).toHaveProperty('checkout');
-    expect(accountAPI).toHaveProperty('toggleDeletion');
   });
 
   describe('API calls', () => {
@@ -43,21 +42,5 @@ describe('#enterpriseAccountAPI', () => {
         '/enterprise/api/v1/subscription'
       );
     });
-
-    it('#toggleDeletion with delete action', () => {
-      accountAPI.toggleDeletion('delete');
-      expect(axiosMock.post).toHaveBeenCalledWith(
-        '/enterprise/api/v1/toggle_deletion',
-        { action_type: 'delete' }
-      );
-    });
-
-    it('#toggleDeletion with undelete action', () => {
-      accountAPI.toggleDeletion('undelete');
-      expect(axiosMock.post).toHaveBeenCalledWith(
-        '/enterprise/api/v1/toggle_deletion',
-        { action_type: 'undelete' }
-      );
-    });
   });
 });

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

@@ -4,6 +4,7 @@
   @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 {

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

@@ -1,7 +1,79 @@
 @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;
@@ -15,6 +87,65 @@ $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 {
@@ -99,3 +230,17 @@ $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);
+}

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

@@ -81,6 +81,28 @@
         margin-left: var(--space-small);
       }
     }
+
+    // Conversation sidebar close button
+    .close-button--rtl {
+      transform: rotate(180deg);
+    }
+
+    // Resolve actions button
+    .resolve-actions {
+      .button-group .button:first-child {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: var(--border-radius-normal);
+        border-top-left-radius: 0;
+        border-top-right-radius: var(--border-radius-normal);
+      }
+
+      .button-group .button:last-child {
+        border-bottom-left-radius: var(--border-radius-normal);
+        border-bottom-right-radius: 0;
+        border-top-left-radius: var(--border-radius-normal);
+        border-top-right-radius: 0;
+      }
+    }
   }
 
   // Conversation list
@@ -155,6 +177,71 @@
     }
   }
 
+  //   Help center
+  .article-container .row--article-block {
+    td:last-child {
+      direction: initial;
+    }
+  }
+
+  .portal-popover__container .portal {
+    .actions-container {
+      margin-left: unset;
+      margin-right: var(--space-one);
+    }
+  }
+
+  .edit-article--container {
+    .header-right--wrap {
+      .button-group .button:first-child {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: var(--border-radius-normal);
+        border-top-left-radius: 0;
+        border-top-right-radius: var(--border-radius-normal);
+      }
+
+      .button-group .button:last-child {
+        border-bottom-left-radius: var(--border-radius-normal);
+        border-bottom-right-radius: 0;
+        border-top-left-radius: var(--border-radius-normal);
+        border-top-right-radius: 0;
+      }
+    }
+
+    .header-left--wrap {
+      .back-button {
+        direction: initial;
+      }
+    }
+
+    .article--buttons {
+      .dropdown-pane {
+        left: 0;
+        position: absolute;
+        right: unset;
+      }
+    }
+
+    .sidebar-button {
+      transform: rotate(180deg);
+    }
+  }
+
+  .article-settings--container {
+    border-left: 0;
+    border-right: 1px solid var(--color-border-light);
+    flex-direction: row-reverse;
+    margin-left: 0;
+    margin-right: var(--space-normal);
+    padding-left: 0;
+    padding-right: var(--space-normal);
+  }
+
+  .category-list--container .header-left--wrap {
+    direction: initial;
+    justify-content: flex-end;
+  }
+
   // Toggle switch
   .toggle-button {
     &.small {
@@ -177,6 +264,11 @@
     }
   }
 
+  // Widget builder
+  .widget-builder-container .widget-preview {
+    direction: initial;
+  }
+
   // Modal
   .modal-container {
     text-align: right;
@@ -190,6 +282,7 @@
   }
 
   // Other changes
+
   .colorpicker--chrome {
     direction: initial;
   }
@@ -198,6 +291,14 @@
     direction: initial;
   }
 
+  .contact--details .contact--bio {
+    direction: ltr;
+  }
+
+  .merge-contacts .child-contact-wrap {
+    direction: ltr;
+  }
+
   .contact--form .input-group {
     direction: initial;
   }

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

@@ -29,6 +29,7 @@
 @import 'rtl';
 
 @import 'widgets/base';
+@import 'widgets/buttons';
 @import 'widgets/conversation-view';
 @import 'widgets/tabs';
 @import 'widgets/woot-tables';

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

@@ -40,12 +40,6 @@ dl:not(.reset-base) {
   @apply mb-0;
 }
 
-// Button base
-button {
-  font-family: inherit;
-  @apply inline-block text-center align-middle cursor-pointer text-sm m-0 py-1 px-2.5 transition-all duration-200 ease-in-out border-0 border-none rounded-lg disabled:opacity-50;
-}
-
 // Form elements
 // -------------------------
 label {

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

@@ -0,0 +1,228 @@
+// scss-lint:disable SpaceAfterPropertyColon
+// scss-lint:disable MergeableSelector
+button {
+  font-family: inherit;
+  transition:
+    background-color 0.25s ease-out,
+    color 0.25s ease-out;
+  @apply inline-block items-center mb-0 text-center align-middle cursor-pointer text-sm mt-0 mx-0 py-1 px-2.5 border border-solid border-transparent dark:border-transparent rounded-[0.3125rem];
+
+  &:disabled,
+  &.disabled {
+    @apply opacity-40 cursor-not-allowed;
+  }
+}
+
+.button-group {
+  @apply mb-0 flex flex-nowrap items-stretch;
+
+  .button {
+    flex: 0 0 auto;
+    @apply m-0 text-sm rounded-none first:rounded-tl-[0.3125rem] first:rounded-bl-[0.3125rem] last:rounded-tr-[0.3125rem] last:rounded-br-[0.3125rem] rtl:space-x-reverse;
+  }
+
+  .button--only-icon {
+    @apply w-10 justify-center pl-0 pr-0;
+  }
+}
+
+.back-button {
+  @apply m-0;
+}
+
+.button {
+  @apply items-center bg-n-brand px-2.5 text-white dark:text-white inline-flex h-10 mb-0 gap-2 font-medium;
+
+  .button__content {
+    @apply w-full whitespace-nowrap overflow-hidden text-ellipsis;
+
+    img,
+    svg {
+      @apply inline-block;
+    }
+  }
+
+  &: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;
+  }
+
+  &:disabled,
+  &.disabled {
+    @apply opacity-40 cursor-not-allowed;
+  }
+
+  &.success {
+    @apply bg-n-teal-9 text-white dark:text-white;
+  }
+
+  &.secondary {
+    @apply bg-n-solid-3 text-white dark:text-white;
+  }
+
+  &.primary {
+    @apply bg-n-brand text-white dark:text-white;
+  }
+
+  &.clear {
+    @apply text-n-blue-text dark:text-n-blue-text bg-transparent dark:bg-transparent;
+  }
+
+  &.alert {
+    @apply bg-n-ruby-9 text-white dark:text-white;
+
+    &.clear {
+      @apply bg-transparent dark:bg-transparent;
+    }
+  }
+
+  &.warning {
+    @apply bg-n-amber-9 text-white dark:text-white;
+
+    &.clear {
+      @apply bg-transparent dark:bg-transparent;
+    }
+  }
+
+  &.tiny {
+    @apply h-6 text-[10px];
+  }
+
+  &.small {
+    @apply h-8 text-xs;
+  }
+
+  .spinner {
+    @apply px-2 py-0;
+  }
+
+  // @TODDO - Remove after moving all buttons to woot-button
+  .icon + .button__content {
+    @apply w-auto;
+  }
+
+  &.expanded {
+    @apply flex justify-center text-center;
+  }
+
+  &.round {
+    @apply rounded-full;
+  }
+
+  // @TODO Use with link
+
+  &.compact {
+    @apply pb-0 pt-0;
+  }
+
+  &.hollow {
+    @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:enabled:bg-n-slate-5;
+    }
+
+    &.success {
+      @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:enabled:bg-n-ruby-5;
+    }
+
+    &.warning {
+      @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:enabled:bg-n-brand/20 dark:hover:enabled:bg-n-brand/40;
+
+    &.secondary {
+      @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:enabled:text-n-teal-11 hover:enabled:bg-n-teal-5;
+    }
+
+    &.alert {
+      @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:enabled:text-n-amber-11 hover:enabled:bg-n-amber-5;
+    }
+  }
+
+  &.clear {
+    @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:enabled:bg-n-slate-4;
+    }
+
+    &.success {
+      @apply text-n-teal-10 hover:enabled:bg-n-teal-4;
+    }
+
+    &.alert {
+      @apply text-n-ruby-11 hover:enabled:bg-n-ruby-4;
+    }
+
+    &.warning {
+      @apply text-n-amber-11 hover:enabled:bg-n-amber-4;
+    }
+
+    &:active {
+      &.secondary {
+        @apply active:bg-n-slate-3 dark:active:bg-n-slate-7;
+      }
+    }
+
+    &:focus {
+      &.secondary {
+        @apply focus:bg-n-slate-4 dark:focus:bg-n-slate-6;
+      }
+    }
+  }
+
+  // Sizes
+  &.tiny {
+    @apply h-6;
+  }
+
+  &.small {
+    @apply h-8 pb-1 pt-1;
+  }
+
+  &.large {
+    @apply h-12;
+  }
+
+  &.button--only-icon {
+    @apply justify-center pl-0 pr-0 w-10;
+
+    &.tiny {
+      @apply w-6;
+    }
+
+    &.small {
+      @apply w-8;
+    }
+
+    &.large {
+      @apply w-12;
+    }
+  }
+
+  &.link {
+    @apply h-auto m-0 p-0;
+
+    &:hover {
+      @apply underline;
+    }
+  }
+}

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>

app/javascript/dashboard/components-next/banner/Banner.vue

@@ -1,5 +1,3 @@
-<!-- DEPRECIATED -->
-<!-- TODO: Replace this banner component with NextBanner "app/javascript/dashboard/components-next/banner/Banner.vue" -->
 <script setup>
 import { computed } from 'vue';
 

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

@@ -190,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-2`,
+    link: `${STYLE_CONFIG.colors[computedColor.value].link} p-0 font-medium underline-offset-4`,
     outline: STYLE_CONFIG.colors[computedColor.value].outline,
     faded: STYLE_CONFIG.colors[computedColor.value].faded,
     solid: STYLE_CONFIG.colors[computedColor.value].solid,

app/javascript/dashboard/components-next/filter/SaveCustomView.vue

@@ -103,7 +103,7 @@ export default {
       {{ $t('FILTER.CUSTOM_VIEWS.ADD.TITLE') }}
     </h3>
     <form class="w-full grid gap-6" @submit.prevent="saveCustomViews">
-      <label :class="{ error: v$.name.$error }">
+      <div>
         <input
           v-model="name"
           class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base w-full"
@@ -116,14 +116,14 @@ export default {
         >
           {{ $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE') }}
         </span>
-      </label>
+      </div>
       <div class="flex flex-row justify-end w-full gap-2">
+        <NextButton sm solid blue :disabled="isButtonDisabled">
+          {{ $t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON') }}
+        </NextButton>
         <NextButton faded slate sm @click.prevent="onClose">
           {{ $t('FILTER.CUSTOM_VIEWS.ADD.CANCEL_BUTTON') }}
         </NextButton>
-        <NextButton solid blue sm :disabled="isButtonDisabled">
-          {{ $t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON') }}
-        </NextButton>
       </div>
     </form>
   </div>

app/javascript/dashboard/components-next/icon/provider.js

@@ -12,7 +12,6 @@ export function useChannelIcon(inbox) {
     'Channel::TwitterProfile': 'i-ri-twitter-x-fill',
     'Channel::WebWidget': 'i-ri-global-fill',
     'Channel::Whatsapp': 'i-ri-whatsapp-fill',
-    'Channel::Instagram': 'i-ri-instagram-fill',
   };
 
   const providerIconMap = {

app/javascript/dashboard/components-next/message/MessageMeta.vue

@@ -19,7 +19,6 @@ const {
   isAWebWidgetInbox,
   isAWhatsAppChannel,
   isAnEmailChannel,
-  isAInstagramChannel,
 } = useInbox();
 
 const { status, isPrivate, createdAt, sourceId, messageType } =
@@ -48,8 +47,7 @@ const isSent = computed(() => {
     isATwilioChannel.value ||
     isAFacebookInbox.value ||
     isASmsInbox.value ||
-    isATelegramChannel.value ||
-    isAInstagramChannel.value
+    isATelegramChannel.value
   ) {
     return sourceId.value && status.value === MESSAGE_STATUS.SENT;
   }
@@ -88,8 +86,7 @@ const isRead = computed(() => {
   if (
     isAWhatsAppChannel.value ||
     isATwilioChannel.value ||
-    isAFacebookInbox.value ||
-    isAInstagramChannel.value
+    isAFacebookInbox.value
   ) {
     return sourceId.value && status.value === MESSAGE_STATUS.READ;
   }
@@ -105,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;
 });

app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue

@@ -26,12 +26,6 @@ const showAccountSwitcher = computed(
   () => userAccounts.value.length > 1 && currentAccount.value.name
 );
 
-const sortedCurrentUserAccounts = computed(() => {
-  return [...(currentUser.value.accounts || [])].sort((a, b) =>
-    a.name.localeCompare(b.name)
-  );
-});
-
 const onChangeAccount = newId => {
   const accountUrl = `/app/accounts/${newId}/dashboard`;
   window.location.href = accountUrl;
@@ -76,7 +70,7 @@ const emitNewAccount = () => {
     <DropdownBody v-if="showAccountSwitcher" class="min-w-80 z-50">
       <DropdownSection :title="t('SIDEBAR_ITEMS.SWITCH_ACCOUNT')">
         <DropdownItem
-          v-for="account in sortedCurrentUserAccounts"
+          v-for="account in currentUser.accounts"
           :id="`account-${account.id}`"
           :key="account.id"
           class="cursor-pointer"

app/javascript/dashboard/components/Accordion/AccordionItem.vue

@@ -35,7 +35,7 @@ const onToggle = () => {
 <template>
   <div class="text-sm">
     <button
-      class="flex items-center select-none w-full rounded-lg bg-n-slate-2 outline outline-1 outline-n-weak m-0 cursor-grab justify-between py-2 px-4 drag-handle"
+      class="flex items-center select-none w-full rounded-lg bg-n-slate-2 border border-n-weak m-0 cursor-grab justify-between py-2 px-4 drag-handle"
       :class="{ 'rounded-bl-none rounded-br-none': isOpen }"
       @click.stop="onToggle"
     >
@@ -55,7 +55,7 @@ const onToggle = () => {
     </button>
     <div
       v-if="isOpen"
-      class="bg-n-background outline outline-1 outline-n-weak -mt-[-1px] border-t-0 rounded-br-lg rounded-bl-lg"
+      class="bg-n-background border border-n-weak dark:border-n-slate-2 border-t-0 rounded-br-lg rounded-bl-lg"
       :class="compact ? 'p-0' : 'px-2 py-4'"
     >
       <slot />

app/javascript/dashboard/components/ChatList.vue

@@ -61,7 +61,6 @@ import {
   getUserPermissions,
   filterItemsByPermission,
 } from 'dashboard/helper/permissionsHelper.js';
-import { matchesFilters } from '../store/modules/conversations/helpers/filterHelpers';
 import { CONVERSATION_EVENTS } from '../helper/AnalyticsHelper/events';
 import { ASSIGNEE_TYPE_TAB_PERMISSIONS } from 'dashboard/constants/permissions.js';
 
@@ -106,7 +105,7 @@ const advancedFilterTypes = ref(
 );
 
 const currentUser = useMapGetter('getCurrentUser');
-const chatLists = useMapGetter('getFilteredConversations');
+const chatLists = useMapGetter('getAllConversations');
 const mineChatsList = useMapGetter('getMineChats');
 const allChatList = useMapGetter('getAllStatusChats');
 const unAssignedChatsList = useMapGetter('getUnAssignedChats');
@@ -325,14 +324,6 @@ const conversationList = computed(() => {
   } else {
     localConversationList = [...chatLists.value];
   }
-
-  if (activeFolder.value) {
-    const { payload } = activeFolder.value.query;
-    localConversationList = localConversationList.filter(conversation => {
-      return matchesFilters(conversation, payload);
-    });
-  }
-
   return localConversationList;
 });
 
@@ -469,12 +460,6 @@ function setParamsForEditFolderModal() {
     campaigns: campaigns.value,
     languages: languages,
     countries: countries,
-    priority: [
-      { id: 'low', name: t('CONVERSATION.PRIORITY.OPTIONS.LOW') },
-      { id: 'medium', name: t('CONVERSATION.PRIORITY.OPTIONS.MEDIUM') },
-      { id: 'high', name: t('CONVERSATION.PRIORITY.OPTIONS.HIGH') },
-      { id: 'urgent', name: t('CONVERSATION.PRIORITY.OPTIONS.URGENT') },
-    ],
     filterTypes: advancedFilterTypes.value,
     allCustomAttributes: conversationCustomAttributes.value,
   };

app/javascript/dashboard/components/CustomAttribute.vue

@@ -9,15 +9,12 @@ 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 },
@@ -222,13 +219,14 @@ export default {
               class="mt-0.5"
             />
           </span>
-          <NextButton
+          <woot-button
             v-if="showActions && value"
             v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
-            slate
-            sm
-            link
-            icon="i-lucide-trash-2"
+            variant="link"
+            size="medium"
+            color-scheme="secondary"
+            icon="delete"
+            class-names="flex justify-end !w-fit"
             @click="onDelete"
           />
         </div>
@@ -248,10 +246,10 @@ export default {
             @keyup.enter="onUpdate"
           />
           <div>
-            <NextButton
-              sm
-              icon="i-lucide-check"
-              class="ltr:rounded-l-none rtl:rounded-r-none h-[34px]"
+            <woot-button
+              size="small"
+              icon="checkmark"
+              class="ltr:rounded-l-none rtl:rounded-r-none"
               @click="onUpdate"
             />
           </div>
@@ -283,27 +281,25 @@ export default {
         >
           {{ displayValue || '---' }}
         </p>
-        <div
-          class="flex items-center max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0"
-        >
-          <NextButton
+        <div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
+          <woot-button
             v-if="showActions && value"
             v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
-            xs
-            slate
-            ghost
-            icon="i-lucide-clipboard"
-            class="hidden group-hover:flex flex-shrink-0"
+            variant="link"
+            size="small"
+            color-scheme="secondary"
+            icon="clipboard"
+            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
             @click="onCopy"
           />
-          <NextButton
+          <woot-button
             v-if="showActions"
             v-tooltip.right="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
-            xs
-            slate
-            ghost
-            icon="i-lucide-pen"
-            class="hidden group-hover:flex flex-shrink-0"
+            variant="link"
+            size="small"
+            color-scheme="secondary"
+            icon="edit"
+            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
             @click="onEdit"
           />
         </div>

app/javascript/dashboard/components/CustomSnoozeModal.vue

@@ -1,11 +1,9 @@
 <script>
 import DatePicker from 'vue-datepicker-next';
-import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     DatePicker,
-    NextButton,
   },
   emits: ['close', 'chooseTime'],
 
@@ -54,23 +52,18 @@ export default {
         v-model:value="snoozeTime"
         type="datetime"
         inline
-        input-class="mx-input "
+        input-class="mx-input reset-base"
         :lang="lang"
         :disabled-date="disabledDate"
         :disabled-time="disabledTime"
       />
       <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <NextButton
-          faded
-          slate
-          type="reset"
-          :label="$t('CONVERSATION.CUSTOM_SNOOZE.CANCEL')"
-          @click.prevent="onClose"
-        />
-        <NextButton
-          type="submit"
-          :label="$t('CONVERSATION.CUSTOM_SNOOZE.APPLY')"
-        />
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{ $t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
+        </woot-button>
+        <woot-button>
+          {{ $t('CONVERSATION.CUSTOM_SNOOZE.APPLY') }}
+        </woot-button>
       </div>
     </form>
   </div>

app/javascript/dashboard/components/MaskedText.vue

@@ -0,0 +1,64 @@
+<script>
+import 'highlight.js/styles/default.css';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import { useAlert } from 'dashboard/composables';
+
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      masked: true,
+    };
+  },
+  methods: {
+    async onCopy(e) {
+      e.preventDefault();
+      await copyTextToClipboard(this.value);
+      useAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+    },
+    toggleMasked() {
+      this.masked = !this.masked;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="text--container">
+    <woot-button size="small" class="button--text" @click="onCopy">
+      {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
+    </woot-button>
+    <woot-button
+      variant="clear"
+      size="small"
+      class="button--visibility"
+      color-scheme="secondary"
+      :icon="masked ? 'eye-show' : 'eye-hide'"
+      @click.prevent="toggleMasked"
+    />
+    <highlightjs v-if="value" :code="masked ? '•'.repeat(10) : value" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.text--container {
+  position: relative;
+  text-align: left;
+
+  .button--text,
+  .button--visibility {
+    margin-top: 0;
+    position: absolute;
+    right: 0;
+  }
+
+  .button--visibility {
+    right: 60px;
+  }
+}
+</style>

app/javascript/dashboard/components/Modal.vue

@@ -2,7 +2,6 @@
 // [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 },
@@ -86,11 +85,11 @@ onMounted(() => {
         @mouse.stop
         @mousedown="event => event.stopPropagation()"
       >
-        <Button
+        <woot-button
           v-if="showCloseButton"
-          ghost
-          slate
-          icon="i-lucide-x"
+          color-scheme="secondary"
+          icon="dismiss"
+          variant="clear"
           class="absolute z-10 ltr:right-2 rtl:left-2 top-2"
           @click="close"
         />

app/javascript/dashboard/components/NetworkNotification.vue

@@ -11,8 +11,6 @@ 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();
 
@@ -109,31 +107,34 @@ onBeforeUnmount(() => {
 
 <template>
   <transition name="network-notification-fade" tag="div">
-    <div v-show="showNotification" class="fixed z-50 top-2 left-2 group">
+    <div v-show="showNotification" class="fixed z-50 top-4 left-2 group">
       <div
-        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"
+        class="relative flex items-center justify-between w-full px-2 py-1 bg-yellow-200 rounded-lg shadow-lg dark:bg-yellow-700"
       >
-        <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">
+        <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"
+        >
           {{ bannerText }}
         </span>
-        <Button
+        <woot-button
           v-if="canRefresh"
-          ghost
-          sm
-          amber
-          icon="i-lucide-refresh-ccw"
           :title="$t('NETWORK.BUTTON.REFRESH')"
-          class="!text-n-amber-12 dark:!text-n-amber-9"
+          variant="clear"
+          size="small"
+          color-scheme="warning"
+          icon="arrow-clockwise"
           @click="refreshPage"
         />
-
-        <Button
-          ghost
-          sm
-          amber
-          icon="i-lucide-x"
-          class="!text-n-amber-12 dark:!text-n-amber-9"
+        <woot-button
+          variant="clear"
+          size="small"
+          color-scheme="warning"
+          icon="dismiss"
           @click="closeNotification"
         />
       </div>

app/javascript/dashboard/components/SidemenuIcon.vue

@@ -3,16 +3,12 @@ import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { mapGetters } from 'vuex';
 import { emitter } from 'shared/helpers/mitt';
-import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
-  components: {
-    NextButton,
-  },
   props: {
     size: {
       type: String,
-      default: 'sm',
+      default: 'small',
     },
   },
   computed: {
@@ -37,13 +33,13 @@ export default {
 
 <!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
-  <NextButton
+  <woot-button
     v-if="!hasNextSidebar"
-    ghost
-    slate
     :size="size"
-    icon="i-lucide-menu"
-    class="-ml-3"
+    variant="clear"
+    color-scheme="secondary"
+    class="-ml-3 text-black-900 dark:text-slate-300"
+    icon="list"
     @click="onMenuItemClick"
   />
 </template>

app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue

@@ -35,7 +35,7 @@ export default {
     color-scheme="alert"
     :banner-message="bannerMessage"
     :action-button-label="actionButtonMessage"
-    action-button-icon="i-lucide-mail"
+    action-button-icon="mail"
     has-action-button
     @primary-action="resendVerificationEmail"
   />

app/javascript/dashboard/components/buttons/Button.vue

@@ -0,0 +1,52 @@
+<script>
+import Spinner from 'shared/components/Spinner.vue';
+
+export default {
+  components: {
+    Spinner,
+  },
+  props: {
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    buttonIconClass: {
+      type: String,
+      default: '',
+    },
+    type: {
+      type: String,
+      default: 'button',
+    },
+    variant: {
+      type: String,
+      default: 'primary',
+    },
+  },
+  created() {
+    if (import.meta.env.DEV) {
+      // eslint-disable-next-line
+      console.warn(
+        '[DEPRECATED] This component has been deprecated and will be removed soon. Please use v3/components/Form/Button.vue instead'
+      );
+    }
+  },
+};
+</script>
+
+<template>
+  <button :type="type" class="button nice" :class="variant">
+    <fluent-icon
+      v-if="!isLoading && icon"
+      class="icon"
+      :class="buttonIconClass"
+      :icon="icon"
+    />
+    <Spinner v-if="isLoading" />
+    <slot />
+  </button>
+</template>

app/javascript/dashboard/components/buttons/FormSubmitButton.vue

@@ -0,0 +1,66 @@
+<script>
+import Spinner from 'shared/components/Spinner.vue';
+
+export default {
+  components: {
+    Spinner,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    buttonText: {
+      type: String,
+      default: '',
+    },
+    buttonClass: {
+      type: String,
+      default: '',
+    },
+    iconClass: {
+      type: String,
+      default: '',
+    },
+    spinnerClass: {
+      type: String,
+      default: '',
+    },
+    type: {
+      type: String,
+      default: 'submit',
+    },
+  },
+  computed: {
+    computedClass() {
+      return `button nice gap-2 ${this.buttonClass || ' '}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <button
+    :type="type"
+    data-testid="submit_button"
+    :disabled="disabled"
+    :class="computedClass"
+  >
+    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
+    <span>{{ buttonText }}</span>
+    <Spinner v-if="loading" class="ml-2" :color-scheme="spinnerClass" />
+  </button>
+</template>
+
+<style lang="scss" scoped>
+button:disabled {
+  @apply bg-woot-100 dark:bg-woot-500/25 dark:text-slate-500 opacity-100;
+  &:hover {
+    @apply bg-woot-100 dark:bg-woot-500/25;
+  }
+}
+</style>

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -134,7 +134,7 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
 <template>
   <div class="relative flex items-center justify-end resolve-actions">
     <div
-      class="rounded-lg shadow outline-1 outline"
+      class="rounded-lg shadow button-group outline-1 outline"
       :class="!showOpenButton ? 'outline-n-container' : 'outline-transparent'"
     >
       <Button

app/javascript/dashboard/components/index.js

@@ -1,6 +1,7 @@
 // [NOTE][DEPRECATED] This method is to be deprecated, please do not add new components to this file.
 /* eslint no-plusplus: 0 */
 import AvatarUploader from './widgets/forms/AvatarUploader.vue';
+import Button from './ui/WootButton.vue';
 import Code from './Code.vue';
 import ColorPicker from './widgets/ColorPicker.vue';
 import ConfirmDeleteModal from './widgets/modal/ConfirmDeleteModal.vue';
@@ -17,6 +18,7 @@ import ModalHeader from './ModalHeader.vue';
 import Modal from './Modal.vue';
 import SidemenuIcon from './SidemenuIcon.vue';
 import Spinner from 'shared/components/Spinner.vue';
+import SubmitButton from './buttons/FormSubmitButton.vue';
 import Tabs from './ui/Tabs/Tabs.vue';
 import TabsItem from './ui/Tabs/TabsItem.vue';
 import Thumbnail from './widgets/Thumbnail.vue';
@@ -24,6 +26,7 @@ import DatePicker from './ui/DatePicker/DatePicker.vue';
 
 const WootUIKit = {
   AvatarUploader,
+  Button,
   Code,
   ColorPicker,
   ConfirmDeleteModal,
@@ -40,6 +43,7 @@ const WootUIKit = {
   ModalHeader,
   SidemenuIcon,
   Spinner,
+  SubmitButton,
   Tabs,
   TabsItem,
   Thumbnail,

app/javascript/dashboard/components/layout/AvailabilityStatus.vue

@@ -7,7 +7,6 @@ import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue
 import WootDropdownDivider from 'shared/components/ui/dropdown/DropdownDivider.vue';
 import AvailabilityStatusBadge from '../widgets/conversation/AvailabilityStatusBadge.vue';
 import wootConstants from 'dashboard/constants/globals';
-import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const { AVAILABILITY_STATUS_KEYS } = wootConstants;
 
@@ -18,7 +17,6 @@ export default {
     WootDropdownMenu,
     WootDropdownItem,
     AvailabilityStatusBadge,
-    NextButton,
   },
   data() {
     return {
@@ -103,21 +101,19 @@ export default {
       :key="status.value"
       class="flex items-baseline"
     >
-      <NextButton
-        sm
-        :color="status.disabled ? 'blue' : 'slate'"
-        :variant="status.disabled ? 'faded' : 'ghost'"
-        class="status-change--dropdown-button !w-full !justify-start"
+      <woot-button
+        size="small"
+        :color-scheme="status.disabled ? '' : 'secondary'"
+        :variant="status.disabled ? 'smooth' : 'clear'"
+        class="status-change--dropdown-button"
         @click="changeAvailabilityStatus(status.value)"
       >
         <AvailabilityStatusBadge :status="status.value" />
-        <span class="min-w-0 truncate font-medium text-xs">
-          {{ status.label }}
-        </span>
-      </NextButton>
+        {{ status.label }}
+      </woot-button>
     </WootDropdownItem>
     <WootDropdownDivider />
-    <WootDropdownItem class="flex items-center justify-between px-3 py-2 m-0">
+    <WootDropdownItem class="flex items-center justify-between p-2 m-0">
       <div class="flex items-center">
         <fluent-icon
           v-tooltip.right-start="$t('SIDEBAR.SET_AUTO_OFFLINE.INFO_TEXT')"
@@ -127,7 +123,7 @@ export default {
         />
 
         <span
-          class="mx-2 my-0 text-xs font-medium text-slate-600 dark:text-slate-100"
+          class="mx-1 my-0 text-xs font-medium text-slate-600 dark:text-slate-100"
         >
           {{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}
         </span>

app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue

@@ -1,11 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
-import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
-  components: {
-    NextButton,
-  },
   emits: ['toggleAccounts'],
   data() {
     return { showSwitchButton: false };
@@ -50,13 +46,14 @@ export default {
         class="absolute top-0 right-0 flex items-center justify-end w-full h-full rounded-md ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark"
       >
         <div class="mx-2 my-0">
-          <NextButton
-            ghost
-            xs
-            icon="i-lucide-arrow-right-left"
-            :label="$t('SIDEBAR.SWITCH')"
+          <woot-button
+            variant="clear"
+            size="tiny"
+            icon="arrow-swap"
             @click="$emit('toggleAccounts')"
-          />
+          >
+            {{ $t('SIDEBAR.SWITCH') }}
+          </woot-button>
         </div>
       </div>
     </transition>

app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue

@@ -3,12 +3,8 @@ import { required, minLength } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
 import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
-import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
-  components: {
-    NextButton,
-  },
   props: {
     show: {
       type: Boolean,
@@ -90,24 +86,19 @@ export default {
             />
           </label>
         </div>
-        <div class="w-full flex justify-end gap-2 items-center">
-          <NextButton
-            faded
-            slate
-            type="reset"
-            :label="$t('CREATE_ACCOUNT.FORM.CANCEL')"
-            @click.prevent="() => $emit('closeAccountCreateModal')"
-          />
-          <NextButton
-            type="submit"
-            :label="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
-            :is-loading="uiFlags.isCreating"
-            :disabled="
-              v$.accountName.$invalid ||
-              v$.accountName.$invalid ||
-              uiFlags.isCreating
-            "
-          />
+        <div class="w-full">
+          <div class="w-full">
+            <woot-submit-button
+              :disabled="
+                v$.accountName.$invalid ||
+                v$.accountName.$invalid ||
+                uiFlags.isCreating
+              "
+              :button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
+              :loading="uiFlags.isCreating"
+              button-class="large expanded"
+            />
+          </div>
         </div>
       </form>
     </div>

app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue

@@ -1,12 +1,10 @@
 <script>
 import { mapGetters } from 'vuex';
 import Thumbnail from '../../widgets/Thumbnail.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     Thumbnail,
-    NextButton,
   },
   emits: ['toggleMenu'],
   computed: {
@@ -27,10 +25,10 @@ export default {
 </script>
 
 <template>
-  <NextButton
+  <woot-button
     v-tooltip.right="$t(`SIDEBAR.PROFILE_SETTINGS`)"
-    link
-    class="rounded-full"
+    variant="link"
+    class="flex items-center rounded-full"
     @click="handleClick"
   >
     <Thumbnail
@@ -39,7 +37,6 @@ export default {
       :status="statusOfAgent"
       should-show-status-always
       size="32px"
-      class="flex-shrink-0"
     />
-  </NextButton>
+  </woot-button>
 </template>

app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue

@@ -5,14 +5,12 @@ import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import AvailabilityStatus from 'dashboard/components/layout/AvailabilityStatus.vue';
 import { FEATURE_FLAGS } from '../../../featureFlags';
-import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     WootDropdownMenu,
     WootDropdownItem,
     AvailabilityStatus,
-    NextButton,
   },
   props: {
     show: {
@@ -84,46 +82,37 @@ export default {
       <AvailabilityStatus />
       <WootDropdownMenu>
         <WootDropdownItem v-if="showChangeAccountOption">
-          <NextButton
-            ghost
-            sm
-            slate
-            icon="i-lucide-arrow-right-left"
-            class="!w-full !justify-start"
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="arrow-swap"
             @click="$emit('toggleAccounts')"
           >
-            <span class="min-w-0 truncate font-medium text-xs">
-              {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
-            </span>
-          </NextButton>
+            {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
+          </woot-button>
         </WootDropdownItem>
         <WootDropdownItem v-if="showChatSupport">
-          <NextButton
-            ghost
-            sm
-            slate
-            icon="i-lucide-message-circle-question"
-            class="!w-full !justify-start"
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="chat-help"
             @click="$emit('showSupportChatWindow')"
           >
-            <span class="min-w-0 truncate font-medium text-xs">
-              {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
-            </span>
-          </NextButton>
+            {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
+          </woot-button>
         </WootDropdownItem>
         <WootDropdownItem>
-          <NextButton
-            ghost
-            sm
-            slate
-            icon="i-lucide-keyboard"
-            class="!w-full !justify-start"
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="keyboard"
             @click="handleKeyboardHelpClick"
           >
-            <span class="min-w-0 truncate font-medium text-xs">
-              {{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
-            </span>
-          </NextButton>
+            {{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
+          </woot-button>
         </WootDropdownItem>
         <WootDropdownItem>
           <router-link
@@ -133,70 +122,56 @@ export default {
           >
             <a
               :href="href"
+              class="h-8 bg-white button small clear secondary dark:bg-slate-800"
               :class="{ 'is-active': isActive }"
               @click="e => handleProfileSettingClick(e, navigate)"
             >
-              <NextButton
-                ghost
-                sm
-                slate
-                icon="i-lucide-circle-user"
-                class="!w-full !justify-start"
-              >
-                <span class="min-w-0 truncate font-medium text-xs">
-                  {{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
-                </span>
-              </NextButton>
+              <fluent-icon icon="person" size="14" class="icon icon--font" />
+              <span class="button__content">
+                {{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
+              </span>
             </a>
           </router-link>
         </WootDropdownItem>
         <WootDropdownItem>
-          <NextButton
-            ghost
-            sm
-            slate
-            icon="i-lucide-sun-moon"
-            class="!w-full !justify-start"
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="appearance"
             @click="openAppearanceOptions"
           >
-            <span class="min-w-0 truncate font-medium text-xs">
-              {{ $t('SIDEBAR_ITEMS.APPEARANCE') }}
-            </span>
-          </NextButton>
+            {{ $t('SIDEBAR_ITEMS.APPEARANCE') }}
+          </woot-button>
         </WootDropdownItem>
         <WootDropdownItem v-if="currentUser.type === 'SuperAdmin'">
           <a
             href="/super_admin"
+            class="h-8 bg-white button small clear secondary dark:bg-slate-800"
             target="_blank"
             rel="noopener nofollow noreferrer"
             @click="$emit('close')"
           >
-            <NextButton
-              ghost
-              sm
-              slate
-              icon="i-lucide-layout-dashboard"
-              class="!w-full !justify-start"
-            >
-              <span class="min-w-0 truncate font-medium text-xs">
-                {{ $t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE') }}
-              </span>
-            </NextButton>
+            <fluent-icon
+              icon="content-settings"
+              size="14"
+              class="icon icon--font"
+            />
+            <span class="button__content">
+              {{ $t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE') }}
+            </span>
           </a>
         </WootDropdownItem>
         <WootDropdownItem>
-          <NextButton
-            ghost
-            sm
-            slate
-            icon="i-lucide-circle-power"
-            class="!w-full !justify-start"
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="power"
             @click="logout"
           >
-            <span class="min-w-0 truncate font-medium text-xs">
-              {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
-            </span>
-          </NextButton>
+            {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
+          </woot-button>
         </WootDropdownItem>
       </WootDropdownMenu>
     </div>

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -13,10 +13,9 @@ import {
   isOnUnattendedView,
 } from '../../../store/modules/conversations/helpers/actionHelpers';
 import Policy from '../../policy.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
-  components: { SecondaryChildNavItem, Policy, NextButton },
+  components: { SecondaryChildNavItem, Policy },
   props: {
     menuItem: {
       type: Object,
@@ -206,7 +205,14 @@ export default {
         {{ $t(`SIDEBAR.${menuItem.label}`) }}
       </span>
       <div v-if="menuItem.showNewButton" class="flex items-center">
-        <NextButton ghost xs slate icon="i-lucide-plus" @click="onClickOpen" />
+        <woot-button
+          size="tiny"
+          variant="clear"
+          color-scheme="secondary"
+          icon="add"
+          class="p-0 ml-2"
+          @click="onClickOpen"
+        />
       </div>
     </div>
     <router-link
@@ -266,15 +272,16 @@ export default {
         >
           <li class="pl-1">
             <a :href="href">
-              <NextButton
-                ghost
-                xs
-                slate
-                icon="i-lucide-plus"
-                :label="$t(`SIDEBAR.${menuItem.newLinkTag}`)"
+              <woot-button
+                size="tiny"
+                variant="clear"
+                color-scheme="secondary"
+                icon="add"
                 :data-testid="menuItem.dataTestid"
                 @click="e => newLinkClick(e, navigate)"
-              />
+              >
+                {{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}
+              </woot-button>
             </a>
           </li>
         </router-link>

app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js

@@ -41,6 +41,7 @@ describe('AccountSelector', () => {
           'fluent-icon': FluentIcon,
         },
         stubs: {
+          WootButton: { template: '<button />' },
           // override global stub
           WootModalHeader: false,
         },

app/javascript/dashboard/components/layout/sidebarComponents/specs/AgentDetails.spec.js

@@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import { createStore } from 'vuex';
 import AgentDetails from '../AgentDetails.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
+import WootButton from 'dashboard/components/ui/WootButton.vue';
 
 describe('AgentDetails', () => {
   const currentUser = {
@@ -40,12 +40,12 @@ describe('AgentDetails', () => {
         plugins: [store],
         components: {
           Thumbnail,
-          NextButton,
+          WootButton,
         },
         directives: {
           tooltip: mockTooltipDirective, // Mocking the tooltip directive
         },
-        stubs: { NextButton: { template: '<button><slot /></button>' } },
+        stubs: { WootButton: { template: '<button><slot /></button>' } },
       },
     });
   });

app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { createStore } from 'vuex';
 import AvailabilityStatus from '../AvailabilityStatus.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
+import WootButton from 'dashboard/components/ui/WootButton.vue';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue';
@@ -40,7 +40,7 @@ describe('AvailabilityStatus', () => {
       global: {
         plugins: [store],
         components: {
-          NextButton,
+          WootButton,
           WootDropdownItem,
           WootDropdownMenu,
           WootDropdownHeader,

app/javascript/dashboard/components/specs/SidemenuIcon.spec.js

@@ -22,7 +22,7 @@ const store = createStore({
 describe('SidemenuIcon', () => {
   test('matches snapshot', () => {
     const wrapper = shallowMount(SidemenuIcon, {
-      stubs: { NextButton: { template: '<button><slot /></button>' } },
+      stubs: { WootButton: { template: '<button><slot /></button>' } },
       global: { plugins: [store] },
     });
     expect(wrapper.vm).toBeTruthy();

app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap

@@ -2,11 +2,11 @@
 
 exports[`SidemenuIcon > matches snapshot 1`] = `
 <button
-  class="-ml-3"
-  ghost=""
-  icon="i-lucide-menu"
-  size="sm"
-  slate=""
+  class="-ml-3 text-black-900 dark:text-slate-300"
+  color-scheme="secondary"
+  icon="list"
+  size="small"
+  variant="clear"
 >
   
   

app/javascript/dashboard/components/ui/AnnouncementPopup.vue

@@ -0,0 +1,90 @@
+<script>
+export default {
+  props: {
+    popupMessage: {
+      type: String,
+      default: '',
+    },
+    routeText: {
+      type: String,
+      default: '',
+    },
+    hasCloseButton: {
+      type: Boolean,
+      default: true,
+    },
+    closeButtonText: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['open', 'close'],
+  methods: {
+    onClickOpenPath() {
+      this.$emit('open');
+    },
+    onClickClose(e) {
+      this.$emit('close', e);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="announcement-popup">
+    <span v-if="popupMessage" class="popup-content">
+      {{ popupMessage }}
+      <span v-if="routeText" class="route-url" @click="onClickOpenPath">
+        {{ routeText }}
+      </span>
+    </span>
+    <div v-if="hasCloseButton" class="popup-close">
+      <woot-button
+        v-if="hasCloseButton"
+        color-scheme="primary"
+        variant="link"
+        size="small"
+        @click="onClickClose"
+      >
+        {{ closeButtonText }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.announcement-popup {
+  max-width: 15rem;
+  min-width: 10rem;
+  display: flex;
+  position: absolute;
+  flex-direction: column;
+  align-items: flex-start;
+  height: fit-content;
+  background: var(--white);
+  padding: 0 var(--space-normal);
+  z-index: var(--z-index-much-higher);
+  box-shadow: var(--b-200) 4px 4px 16px 4px;
+  border-radius: var(--border-radius-normal);
+
+  .popup-content {
+    font-size: var(--font-size-mini);
+    color: var(--s-700);
+    padding: var(--space-one) 0;
+    .route-url {
+      font-size: var(--font-size-mini);
+      color: var(--s-600);
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+
+  .popup-close {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: var(--space-one) 0;
+    border-top: 1px solid var(--color-border-light);
+  }
+}
+</style>

app/javascript/dashboard/components/ui/Banner.vue

@@ -1,10 +1,5 @@
 <script>
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
 export default {
-  components: {
-    NextButton,
-  },
   props: {
     bannerMessage: {
       type: String,
@@ -24,7 +19,7 @@ export default {
     },
     actionButtonVariant: {
       type: String,
-      default: 'faded',
+      default: '',
     },
     actionButtonLabel: {
       type: String,
@@ -32,7 +27,7 @@ export default {
     },
     actionButtonIcon: {
       type: String,
-      default: 'i-lucide-arrow-right',
+      default: 'arrow-right',
     },
     colorScheme: {
       type: String,
@@ -53,18 +48,6 @@ export default {
       }
       return classList;
     },
-    // TODO - Remove this method when we standardize
-    // the button color and variant names
-    getButtonColor() {
-      const colorMap = {
-        primary: 'blue',
-        secondary: 'blue',
-        alert: 'ruby',
-        warning: 'amber',
-      };
-
-      return colorMap[this.colorScheme] || 'blue';
-    },
   },
   methods: {
     onClick(e) {
@@ -94,23 +77,27 @@ export default {
       </a>
     </span>
     <div class="actions">
-      <NextButton
+      <woot-button
         v-if="hasActionButton"
-        xs
+        size="tiny"
         :icon="actionButtonIcon"
         :variant="actionButtonVariant"
-        :color="getButtonColor"
-        :label="actionButtonLabel"
+        color-scheme="primary"
+        class-names="banner-action__button"
         @click="onClick"
-      />
-      <NextButton
+      >
+        {{ actionButtonLabel }}
+      </woot-button>
+      <woot-button
         v-if="hasCloseButton"
-        xs
-        icon="i-lucide-circle-x"
-        :color="getButtonColor"
-        :label="$t('GENERAL_SETTINGS.DISMISS')"
+        size="tiny"
+        :color-scheme="colorScheme"
+        icon="dismiss-circle"
+        class-names="banner-action__button"
         @click="onClickClose"
-      />
+      >
+        {{ $t('GENERAL_SETTINGS.DISMISS') }}
+      </woot-button>
     </div>
   </div>
 </template>
@@ -119,6 +106,13 @@ export default {
 .banner {
   &.primary {
     @apply bg-woot-500 dark:bg-woot-500;
+    .banner-action__button {
+      @apply bg-woot-600 dark:bg-woot-600 border-none text-white;
+
+      &:hover {
+        @apply bg-woot-700 dark:bg-woot-700;
+      }
+    }
   }
 
   &.secondary {
@@ -130,6 +124,13 @@ export default {
 
   &.alert {
     @apply bg-n-ruby-3 text-n-ruby-12;
+    .banner-action__button {
+      @apply border-none text-n-ruby-12 bg-n-ruby-5;
+
+      &:hover {
+        @apply bg-n-ruby-4;
+      }
+    }
 
     a {
       @apply text-n-ruby-12;
@@ -145,12 +146,21 @@ export default {
 
   &.gray {
     @apply text-black-500 dark:text-black-500;
+    .banner-action__button {
+      @apply text-white dark:text-white;
+    }
   }
 
   a {
     @apply ml-1 underline text-white dark:text-white text-xs;
   }
 
+  .banner-action__button {
+    ::v-deep .button__content {
+      @apply whitespace-nowrap;
+    }
+  }
+
   .banner-message {
     @apply flex items-center;
   }

app/javascript/dashboard/components/ui/Dropdown/DropdownButton.vue

@@ -1,16 +1,14 @@
 <script setup>
-import Button from 'dashboard/components-next/button/Button.vue';
-
 defineProps({
   buttonText: {
     type: String,
     default: '',
   },
-  trailingIcon: {
-    type: Boolean,
-    default: false,
+  rightIcon: {
+    type: String,
+    default: '',
   },
-  icon: {
+  leftIcon: {
     type: String,
     default: '',
   },
@@ -18,15 +16,32 @@ defineProps({
 </script>
 
 <template>
-  <Button
-    ghost
-    slate
-    sm
-    class="relative"
-    :icon="icon"
-    :trailing-icon="trailingIcon"
+  <button
+    class="inline-flex relative items-center p-1.5 w-fit h-8 gap-1.5 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 active:bg-slate-75 dark:active:bg-slate-800"
   >
-    <span class="min-w-0 truncate">{{ buttonText }}</span>
+    <slot name="leftIcon">
+      <fluent-icon
+        v-if="leftIcon"
+        :icon="leftIcon"
+        size="18"
+        class="flex-shrink-0 text-slate-900 dark:text-slate-50"
+      />
+    </slot>
+    <span
+      v-if="buttonText"
+      class="text-sm font-medium truncate text-slate-900 dark:text-slate-50"
+    >
+      {{ buttonText }}
+    </span>
+    <slot name="rightIcon">
+      <fluent-icon
+        v-if="rightIcon"
+        :icon="rightIcon"
+        size="18"
+        class="flex-shrink-0 text-slate-900 dark:text-slate-50"
+      />
+    </slot>
+
     <slot name="dropdown" />
-  </Button>
+  </button>
 </template>

app/javascript/dashboard/components/ui/Dropdown/DropdownEmptyState.vue

@@ -8,7 +8,9 @@ defineProps({
 </script>
 
 <template>
-  <div class="flex items-center justify-center h-10 text-sm text-n-slate-11">
+  <div
+    class="flex items-center justify-center h-10 text-sm text-slate-500 dark:text-slate-300"
+  >
     {{ message }}
   </div>
 </template>

app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue

@@ -78,7 +78,7 @@ const shouldShowEmptyState = computed(() => {
 
 <template>
   <div
-    class="absolute z-20 w-40 bg-n-solid-2 border-0 outline outline-1 outline-n-weak shadow rounded-xl max-h-[400px]"
+    class="absolute z-20 w-40 bg-white border shadow dark:bg-slate-800 rounded-xl border-slate-50 dark:border-slate-700/50 max-h-[400px]"
     @click.stop
   >
     <slot name="search">

app/javascript/dashboard/components/ui/Dropdown/DropdownListItemButton.vue

@@ -21,7 +21,7 @@ defineProps({
 
 <template>
   <button
-    class="relative inline-flex items-center justify-start w-full p-3 border-0 rounded-none first:rounded-t-xl last:rounded-b-xl h-11 hover:enabled:bg-n-alpha-2"
+    class="relative inline-flex items-center justify-start w-full p-3 border-0 rounded-none first:rounded-t-xl last:rounded-b-xl h-11 hover:bg-slate-50 dark:hover:bg-slate-700 active:bg-slate-75 dark:active:bg-slate-800"
   >
     <div class="inline-flex items-center gap-3 overflow-hidden">
       <fluent-icon
@@ -30,14 +30,16 @@ defineProps({
         size="18"
         :style="{ color: iconColor }"
       />
-      <span class="text-sm font-medium truncate text-n-slate-12">
+      <span
+        class="text-sm font-medium truncate text-slate-900 dark:text-slate-50"
+      >
         {{ buttonText }}
       </span>
       <fluent-icon
         v-if="isActive"
         icon="checkmark"
         size="18"
-        class="flex-shrink-0 text-n-slate-12"
+        class="flex-shrink-0 text-slate-900 dark:text-slate-50"
       />
     </div>
     <slot name="dropdown" />

app/javascript/dashboard/components/ui/Dropdown/DropdownLoadingState.vue

@@ -8,7 +8,9 @@ defineProps({
 </script>
 
 <template>
-  <div class="flex items-center justify-center h-10 text-sm text-n-slate-11">
+  <div
+    class="flex items-center justify-center h-10 text-sm text-slate-500 dark:text-slate-300"
+  >
     {{ message }}
   </div>
 </template>

app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue

@@ -1,7 +1,5 @@
 <script setup>
 import { defineEmits, defineModel } from 'vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
 defineProps({
   inputPlaceholder: {
     type: String,
@@ -23,29 +21,31 @@ const value = defineModel({
 
 <template>
   <div
-    class="flex items-center justify-between h-10 min-h-[40px] sticky top-0 bg-n-solid-2 dark:bg-n-solid-2 z-10 gap-2 px-3 border-b rounded-t-xl border-n-weak"
+    class="flex items-center justify-between h-10 min-h-[40px] sticky top-0 bg-white z-10 dark:bg-slate-800 gap-2 px-3 border-b rounded-t-xl border-slate-50 dark:border-slate-700"
   >
     <div class="flex items-center w-full gap-2" @keyup.space.prevent>
       <fluent-icon
         icon="search"
         size="16"
-        class="text-n-slate-11 flex-shrink-0"
+        class="text-slate-400 dark:text-slate-400 flex-shrink-0"
       />
       <input
         v-model="value"
         :placeholder="inputPlaceholder"
         type="text"
-        class="w-full mb-0 text-sm !outline-0 bg-transparent text-n-slate-12 placeholder:text-n-slate-10 reset-base"
+        class="w-full mb-0 text-sm bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-75 reset-base"
       />
     </div>
     <!-- Clear filter button -->
-    <NextButton
+    <woot-button
       v-if="!modelValue && showClearFilter"
-      faded
-      xs
-      class="flex-shrink-0"
-      :label="$t('REPORT.FILTER_ACTIONS.CLEAR_FILTER')"
+      size="small"
+      variant="clear"
+      color-scheme="primary"
+      class="!px-1 !py-1.5"
       @click="emit('remove')"
-    />
+    >
+      {{ $t('REPORT.FILTER_ACTIONS.CLEAR_FILTER') }}
+    </woot-button>
   </div>
 </template>

app/javascript/dashboard/components/ui/WootButton.vue

@@ -0,0 +1,129 @@
+<script>
+import Spinner from 'shared/components/Spinner.vue';
+import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
+
+export default {
+  name: 'WootButton',
+  components: { EmojiOrIcon, Spinner },
+  props: {
+    type: {
+      type: String,
+      default: 'submit',
+    },
+    variant: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    emoji: {
+      type: String,
+      default: '',
+    },
+    colorScheme: {
+      type: String,
+      default: 'primary',
+    },
+    classNames: {
+      type: [String, Object],
+      default: '',
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    isExpanded: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    variantClasses() {
+      if (this.variant.includes('link')) {
+        return `clear ${this.variant}`;
+      }
+      return this.variant;
+    },
+    hasOnlyIcon() {
+      const hasEmojiOrIcon = this.emoji || this.icon;
+      return !this.$slots.default && hasEmojiOrIcon;
+    },
+    hasOnlyIconClasses() {
+      return this.hasOnlyIcon ? 'button--only-icon' : '';
+    },
+    buttonClasses() {
+      return [
+        this.variantClasses,
+        this.hasOnlyIconClasses,
+        this.size,
+        this.colorScheme,
+        this.classNames,
+        this.isDisabled ? 'disabled' : '',
+        this.isExpanded ? 'expanded' : '',
+      ];
+    },
+    iconSize() {
+      switch (this.size) {
+        case 'tiny':
+          return 12;
+        case 'small':
+          return 14;
+        case 'medium':
+          return 16;
+        case 'large':
+          return 18;
+
+        default:
+          return 16;
+      }
+    },
+    showDarkSpinner() {
+      return (
+        this.colorScheme === 'secondary' ||
+        this.variant === 'clear' ||
+        this.variant === 'link' ||
+        this.variant === 'hollow'
+      );
+    },
+  },
+};
+</script>
+
+<template>
+  <button
+    class="button"
+    :type="type"
+    :class="buttonClasses"
+    :disabled="isDisabled || isLoading"
+  >
+    <Spinner
+      v-if="isLoading"
+      size="small"
+      :color-scheme="showDarkSpinner ? 'dark' : ''"
+    />
+    <EmojiOrIcon
+      v-else-if="icon || emoji"
+      class="icon"
+      :emoji="emoji"
+      :icon="icon"
+      :icon-size="iconSize"
+    />
+    <span
+      v-if="$slots.default"
+      class="button__content"
+      :class="{ 'text-left rtl:text-right': size !== 'expanded' }"
+    >
+      <slot />
+    </span>
+  </button>
+</template>

app/javascript/dashboard/components/widgets/AIAssistanceModal.vue

@@ -2,12 +2,10 @@
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import { useAI } from 'dashboard/composables/useAI';
 import AILoader from './AILoader.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     AILoader,
-    NextButton,
   },
   props: {
     aiOption: {
@@ -86,22 +84,16 @@ export default {
       </div>
 
       <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <NextButton
-          faded
-          slate
-          type="reset"
-          :label="
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{
             $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.BUTTONS.CANCEL')
-          "
-          @click.prevent="onClose"
-        />
-        <NextButton
-          type="submit"
-          :disabled="!generatedContent"
-          :label="
+          }}
+        </woot-button>
+        <woot-button :disabled="!generatedContent">
+          {{
             $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.BUTTONS.APPLY')
-          "
-        />
+          }}
+        </woot-button>
       </div>
     </form>
   </div>

app/javascript/dashboard/components/widgets/AICTAModal.vue

@@ -6,12 +6,7 @@ import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAI } from 'dashboard/composables/useAI';
 import { OPEN_AI_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
 export default {
-  components: {
-    NextButton,
-  },
   emits: ['close'],
 
   setup() {
@@ -99,30 +94,16 @@ export default {
         />
       </div>
       <div class="flex flex-row justify-between w-full gap-2 px-0 py-2">
-        <NextButton
-          ghost
-          type="button"
-          class="!px-3"
-          :label="
-            $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.NEED_HELP')
-          "
-          @click.prevent="openOpenAIDoc"
-        />
+        <woot-button variant="link" @click.prevent="openOpenAIDoc">
+          {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.NEED_HELP') }}
+        </woot-button>
         <div class="flex items-center gap-1">
-          <NextButton
-            faded
-            slate
-            type="reset"
-            :label="
-              $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.DISMISS')
-            "
-            @click.prevent="onDismiss"
-          />
-          <NextButton
-            type="submit"
-            :disabled="v$.value.$invalid"
-            :label="$t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.FINISH')"
-          />
+          <woot-button variant="clear" @click.prevent="onDismiss">
+            {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.DISMISS') }}
+          </woot-button>
+          <woot-button :is-disabled="v$.value.$invalid">
+            {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.FINISH') }}
+          </woot-button>
         </div>
       </div>
     </form>

app/javascript/dashboard/components/widgets/AttachmentsPreview.vue

@@ -2,8 +2,6 @@
 import { computed } from 'vue';
 import { formatBytes } from 'shared/helpers/FileHelper';
 
-import Button from 'dashboard/components-next/button/Button.vue';
-
 const props = defineProps({
   attachments: {
     type: Array,
@@ -75,11 +73,9 @@ const fileName = file => {
         </span>
       </div>
       <div class="flex items-center justify-center">
-        <Button
-          ghost
-          slate
-          xs
-          icon="i-lucide-x"
+        <woot-button
+          class="!w-6 !h-6 text-sm rounded-md hover:bg-slate-50 dark:hover:bg-slate-800 clear secondary"
+          icon="dismiss"
           @click="onRemoveAttachment(index)"
         />
       </div>

app/javascript/dashboard/components/widgets/AutomationActionInput.vue

@@ -2,14 +2,11 @@
 import AutomationActionTeamMessageInput from './AutomationActionTeamMessageInput.vue';
 import AutomationActionFileInput from './AutomationFileInput.vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
 export default {
   components: {
     AutomationActionTeamMessageInput,
     AutomationActionFileInput,
     WootMessageEditor,
-    NextButton,
   },
   props: {
     modelValue: {
@@ -175,11 +172,11 @@ export default {
           />
         </div>
       </div>
-      <NextButton
+      <woot-button
         v-if="!isMacro"
-        icon="i-lucide-x"
-        slate
-        ghost
+        icon="dismiss"
+        variant="clear"
+        color-scheme="secondary"
         class="flex-shrink-0"
         @click="removeAction"
       />

app/javascript/dashboard/components/widgets/ChannelItem.vue

@@ -32,10 +32,6 @@ export default {
         return this.enabledFeatures.channel_email;
       }
 
-      if (key === 'instagram') {
-        return this.enabledFeatures.channel_instagram;
-      }
-
       return [
         'website',
         'twilio',
@@ -44,7 +40,6 @@ export default {
         'sms',
         'telegram',
         'line',
-        'instagram',
       ].includes(key);
     },
   },

app/javascript/dashboard/components/widgets/FilterInput/Index.vue

@@ -247,13 +247,7 @@ export default {
             :placeholder="$t('FILTER.INPUT_PLACEHOLDER')"
           />
         </div>
-        <NextButton
-          icon="i-lucide-x"
-          slate
-          ghost
-          class="flex-shrink-0"
-          @click="removeFilter"
-        />
+        <NextButton icon="i-lucide-x" slate ghost @click="removeFilter" />
       </div>
       <p v-if="errorMessage" class="filter-error">
         {{ errorMessage }}

app/javascript/dashboard/components/widgets/TableFooterPagination.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed } from 'vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
 
+// Props
 const props = defineProps({
   currentPage: {
     type: Number,
@@ -21,6 +21,13 @@ const hasFirstPage = computed(() => props.currentPage === 1);
 const hasNextPage = computed(() => props.currentPage === props.totalPages);
 const hasPrevPage = computed(() => props.currentPage === 1);
 
+function buttonClass(hasPage) {
+  if (hasPage) {
+    return 'hover:!bg-slate-50 dark:hover:!bg-slate-800';
+  }
+  return 'dark:hover:!bg-slate-700/50';
+}
+
 function onPageChange(newPage) {
   emit('pageChange', newPage);
 }
@@ -48,61 +55,84 @@ const onLastPage = () => {
 </script>
 
 <template>
-  <div
-    class="flex items-center h-8 outline outline-1 outline-n-weak rounded-lg"
-  >
-    <NextButton
-      faded
-      sm
-      slate
-      icon="i-lucide-chevrons-left"
-      class="ltr:rounded-l-lg ltr:rounded-r-none rtl:rounded-r-lg rtl:rounded-l-none"
-      :disabled="hasFirstPage"
+  <div class="flex items-center h-8 rounded-lg bg-slate-50 dark:bg-slate-800">
+    <woot-button
+      size="small"
+      variant="smooth"
+      color-scheme="secondary"
+      :is-disabled="hasFirstPage"
+      class-names="dark:!bg-slate-800 !opacity-100 ltr:rounded-l-lg ltr:rounded-r-none rtl:rounded-r-lg rtl:rounded-l-none"
+      :class="buttonClass(hasFirstPage)"
       @click="onFirstPage"
-    />
-    <div class="flex items-center justify-center bg-n-slate-9/10 h-full">
-      <div class="w-px h-4 rounded-sm bg-n-strong" />
-    </div>
-    <NextButton
-      faded
-      sm
-      slate
-      icon="i-lucide-chevron-left"
-      class="rounded-none"
-      :disabled="hasPrevPage"
-      @click="onPrevPage"
-    />
-    <div
-      class="flex items-center gap-3 px-3 tabular-nums bg-n-slate-9/10 h-full"
     >
-      <span class="text-sm text-n-slate-12">
+      <fluent-icon
+        icon="chevrons-left"
+        size="20"
+        icon-lib="lucide"
+        :class="hasFirstPage && 'opacity-40'"
+      />
+    </woot-button>
+    <div class="w-px h-4 rounded-sm bg-slate-75 dark:bg-slate-700/50" />
+    <woot-button
+      size="small"
+      variant="smooth"
+      color-scheme="secondary"
+      :is-disabled="hasPrevPage"
+      class-names="dark:!bg-slate-800 !opacity-100 rounded-none"
+      :class="buttonClass(hasPrevPage)"
+      @click="onPrevPage"
+    >
+      <fluent-icon
+        icon="chevron-left-single"
+        size="20"
+        icon-lib="lucide"
+        :class="hasPrevPage && 'opacity-40'"
+      />
+    </woot-button>
+
+    <div
+      class="flex items-center gap-3 px-3 tabular-nums bg-slate-50 dark:bg-slate-800 text-slate-700 dark:text-slate-100"
+    >
+      <span class="text-sm text-slate-800 dark:text-slate-75">
         {{ currentPage }}
       </span>
-      <span class="text-n-slate-11">/</span>
-      <span class="text-sm text-n-slate-11">
+      <span class="text-slate-600 dark:text-slate-500">/</span>
+      <span class="text-sm text-slate-600 dark:text-slate-500">
         {{ totalPages }}
       </span>
     </div>
-    <NextButton
-      faded
-      sm
-      slate
-      icon="i-lucide-chevron-right"
-      class="rounded-none"
-      :disabled="hasNextPage"
+    <woot-button
+      size="small"
+      variant="smooth"
+      color-scheme="secondary"
+      :is-disabled="hasNextPage"
+      class-names="dark:!bg-slate-800 !opacity-100 rounded-none"
+      :class="buttonClass(hasNextPage)"
       @click="onNextPage"
-    />
-    <div class="flex items-center justify-center bg-n-slate-9/10 h-full">
-      <div class="w-px h-4 rounded-sm bg-n-strong" />
-    </div>
-    <NextButton
-      faded
-      sm
-      slate
-      icon="i-lucide-chevrons-right"
-      class="ltr:rounded-r-lg ltr:rounded-l-none rtl:rounded-l-lg rtl:rounded-r-none"
-      :disabled="hasLastPage"
+    >
+      <fluent-icon
+        icon="chevron-right-single"
+        size="20"
+        icon-lib="lucide"
+        :class="hasNextPage && 'opacity-40'"
+      />
+    </woot-button>
+    <div class="w-px h-4 rounded-sm bg-slate-75 dark:bg-slate-700/50" />
+    <woot-button
+      size="small"
+      variant="smooth"
+      color-scheme="secondary"
+      class-names="dark:!bg-slate-800 !opacity-100 ltr:rounded-r-lg ltr:rounded-l-none rtl:rounded-l-lg rtl:rounded-r-none"
+      :class="buttonClass(hasLastPage)"
+      :is-disabled="hasLastPage"
       @click="onLastPage"
-    />
+    >
+      <fluent-icon
+        icon="chevrons-right"
+        size="20"
+        icon-lib="lucide"
+        :class="hasLastPage && 'opacity-40'"
+      />
+    </woot-button>
   </div>
 </template>

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -774,24 +774,10 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
 }
 
 .ProseMirror-prompt {
-  @apply z-[9999] bg-n-alpha-3 backdrop-blur-[100px] border border-n-strong p-6 shadow-xl rounded-xl;
+  @apply z-[9999] bg-slate-25 dark:bg-slate-700 rounded-md border border-solid border-slate-75 dark:border-slate-800 shadow-lg;
 
   h5 {
-    @apply text-n-slate-12 mb-1.5;
-  }
-
-  .ProseMirror-prompt-buttons {
-    button {
-      @apply h-8 px-3;
-
-      &[type='submit'] {
-        @apply bg-n-brand text-white hover:bg-n-brand/90;
-      }
-
-      &[type='button'] {
-        @apply bg-n-slate-9/10 text-n-slate-12 hover:bg-n-slate-9/20;
-      }
-    }
+    @apply dark:text-slate-25 text-slate-800;
   }
 }
 

app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue

@@ -328,24 +328,11 @@ export default {
 }
 
 .ProseMirror-prompt {
-  @apply z-[9999] bg-n-alpha-3 min-w-80 backdrop-blur-[100px] border border-n-strong p-6 shadow-xl rounded-xl;
-
-  h5 {
-    @apply text-n-slate-12 mb-1.5;
-  }
-
-  .ProseMirror-prompt-buttons {
-    button {
-      @apply h-8 px-3;
-
-      &[type='submit'] {
-        @apply bg-n-brand text-white hover:bg-n-brand/90;
-      }
-
-      &[type='button'] {
-        @apply bg-n-slate-9/10 text-n-slate-12 hover:bg-n-slate-9/20;
-      }
-    }
-  }
+  z-index: var(--z-index-highest);
+  background: var(--white);
+  box-shadow: var(--shadow-large);
+  border-radius: var(--border-radius-normal);
+  border: 1px solid var(--color-border);
+  min-width: 25rem;
 }
 </style>

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -10,7 +10,6 @@ import {
   ALLOWED_FILE_TYPES,
   ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP,
   ALLOWED_FILE_TYPES_FOR_LINE,
-  ALLOWED_FILE_TYPES_FOR_INSTAGRAM,
 } from 'shared/constants/messages';
 import VideoCallButton from '../VideoCallButton.vue';
 import AIAssistanceButton from '../AIAssistanceButton.vue';
@@ -114,10 +113,6 @@ export default {
       type: String,
       required: true,
     },
-    conversationType: {
-      type: String,
-      default: '',
-    },
   },
   emits: [
     'replaceText',
@@ -169,6 +164,11 @@ export default {
         'is-note-mode': this.isNote,
       };
     },
+    buttonClass() {
+      return {
+        warning: this.isNote,
+      };
+    },
     showAttachButton() {
       return this.showFileUpload || this.isNote;
     },
@@ -192,9 +192,6 @@ export default {
     showAudioPlayStopButton() {
       return this.showAudioRecorder && this.isRecordingAudio;
     },
-    isInstagramDM() {
-      return this.conversationType === 'instagram_direct_message';
-    },
     allowedFileTypes() {
       if (this.isATwilioWhatsAppChannel) {
         return ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP;
@@ -202,10 +199,6 @@ export default {
       if (this.isALineChannel) {
         return ALLOWED_FILE_TYPES_FOR_LINE;
       }
-      if (this.isAInstagramChannel || this.isInstagramDM) {
-        return ALLOWED_FILE_TYPES_FOR_INSTAGRAM;
-      }
-
       return ALLOWED_FILE_TYPES;
     },
     enableDragAndDrop() {
@@ -374,15 +367,14 @@ export default {
       />
     </div>
     <div class="right-wrap">
-      <NextButton
-        :label="sendButtonText"
-        type="submit"
-        sm
-        :color="isNote ? 'amber' : 'blue'"
-        :disabled="isSendDisabled"
-        class="flex-shrink-0"
+      <woot-button
+        size="small"
+        :class-names="buttonClass"
+        :is-disabled="isSendDisabled"
         @click="onSend"
-      />
+      >
+        {{ sendButtonText }}
+      </woot-button>
     </div>
   </div>
 </template>

app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue

@@ -106,3 +106,43 @@ export default {
     />
   </div>
 </template>
+
+<style lang="scss" scoped>
+.button-group {
+  @apply flex border-0 p-0 m-0;
+
+  .button {
+    @apply text-sm font-medium py-2.5 px-4 m-0 relative z-10;
+
+    &.is-active {
+      @apply bg-white dark:bg-slate-900;
+    }
+  }
+
+  .button--reply {
+    @apply border-r rounded-none border-b-0 border-l-0 border-t-0 border-slate-50 dark:border-slate-700;
+
+    &:hover,
+    &:focus {
+      @apply border-r border-slate-50 dark:border-slate-700;
+    }
+  }
+
+  .button--note {
+    @apply border-l-0 rounded-none;
+
+    &.is-active {
+      @apply border-r border-b-0 bg-yellow-100 dark:bg-yellow-800 border-t-0 border-slate-50 dark:border-slate-700;
+    }
+
+    &:hover,
+    &:active {
+      @apply text-yellow-700 dark:text-yellow-700;
+    }
+  }
+}
+
+.button--note {
+  @apply text-yellow-600 dark:text-yellow-600 bg-transparent dark:bg-transparent;
+}
+</style>

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -13,8 +13,6 @@ import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import Linear from './linear/index.vue';
 
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
 export default {
   components: {
     BackButton,
@@ -23,7 +21,6 @@ export default {
     Thumbnail,
     SLACardLabel,
     Linear,
-    NextButton,
   },
   mixins: [inboxMixin],
   props: {
@@ -157,13 +154,16 @@ export default {
           <div
             class="flex flex-row items-center max-w-full gap-1 p-0 m-0 w-fit"
           >
-            <NextButton link slate @click.prevent="$emit('contactPanelToggle')">
-              <span
-                class="text-base font-medium truncate leading-tight text-n-slate-12"
-              >
+            <woot-button
+              variant="link"
+              color-scheme="secondary"
+              class="[&>span]:overflow-hidden [&>span]:whitespace-nowrap [&>span]:text-ellipsis min-w-0"
+              @click.prevent="$emit('contactPanelToggle')"
+            >
+              <span class="text-base font-medium leading-tight text-n-slate-12">
                 {{ currentContact.name }}
               </span>
-            </NextButton>
+            </woot-button>
             <fluent-icon
               v-if="!isHMACVerified"
               v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
@@ -180,13 +180,14 @@ export default {
             <span v-if="isSnoozed" class="font-medium text-n-amber-10">
               {{ snoozedDisplayText }}
             </span>
-            <NextButton
-              link
-              xs
-              blue
-              :label="contactPanelToggleText"
+            <woot-button
+              class="p-0"
+              size="small"
+              variant="link"
               @click="$emit('contactPanelToggle')"
-            />
+            >
+              {{ contactPanelToggleText }}
+            </woot-button>
           </div>
         </div>
       </div>

app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue

@@ -2,12 +2,8 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength, email } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
-import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
-  components: {
-    NextButton,
-  },
   props: {
     show: {
       type: Boolean,
@@ -157,18 +153,13 @@ export default {
           </div>
         </div>
         <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <NextButton
-            faded
-            slate
-            type="reset"
-            :label="$t('EMAIL_TRANSCRIPT.CANCEL')"
-            @click.prevent="onCancel"
-          />
-          <NextButton
-            type="submit"
-            :label="$t('EMAIL_TRANSCRIPT.SUBMIT')"
+          <woot-submit-button
+            :button-text="$t('EMAIL_TRANSCRIPT.SUBMIT')"
             :disabled="!isFormValid"
           />
+          <button class="button clear" @click.prevent="onCancel">
+            {{ $t('EMAIL_TRANSCRIPT.CANCEL') }}
+          </button>
         </div>
       </form>
     </div>

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -25,8 +25,6 @@ import * as Sentry from '@sentry/vue';
 import { useTrack } from 'dashboard/composables';
 import { emitter } from 'shared/helpers/mitt';
 
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
 export default {
   components: {
     BubbleActions,
@@ -42,7 +40,6 @@ export default {
     InstagramStory,
     InstagramStoryReply,
     Spinner,
-    NextButton,
   },
   props: {
     data: {
@@ -455,12 +452,12 @@ export default {
         v-if="isFailed && !hasOneDayPassed && !isAnEmailInbox"
         class="message-failed--alert"
       >
-        <NextButton
+        <woot-button
           v-tooltip.top-end="$t('CONVERSATION.TRY_AGAIN')"
-          ghost
-          xs
-          ruby
-          icon="i-lucide-refresh-ccw"
+          size="tiny"
+          color-scheme="alert"
+          variant="clear"
+          icon="arrow-clockwise"
           @click="retrySendMessage"
         />
       </div>
@@ -663,10 +660,10 @@ export default {
     }
 
     &.is-failed {
-      @apply bg-n-ruby-4 dark:bg-n-ruby-4 text-n-slate-12;
+      @apply bg-red-200 dark:bg-red-200;
 
       .message-text--metadata .time {
-        @apply text-n-ruby-12 dark:text-n-ruby-12;
+        @apply text-red-50 dark:text-red-50;
       }
     }
   }
@@ -727,7 +724,7 @@ li.right {
   }
 
   .wrap.is-failed {
-    @apply flex items-end ltr:ml-auto rtl:mr-auto;
+    @apply flex items-end ml-auto;
   }
 }
 

app/javascript/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue

@@ -1,11 +1,10 @@
-<script setup>
-import { useRouter } from 'vue-router';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const router = useRouter();
-
-const openProfileSettings = () => {
-  return router.push({ name: 'profile_settings_index' });
+<script>
+export default {
+  methods: {
+    openProfileSettings() {
+      return this.$router.push({ name: 'profile_settings_index' });
+    },
+  },
 };
 </script>
 
@@ -15,12 +14,13 @@ const openProfileSettings = () => {
   >
     <p class="w-fit !m-0">
       {{ $t('CONVERSATION.FOOTER.MESSAGE_SIGNATURE_NOT_CONFIGURED') }}
-
-      <Button
-        link
-        :label="$t('CONVERSATION.FOOTER.CLICK_HERE')"
+      <woot-button
+        color-scheme="primary"
+        variant="link"
         @click="openProfileSettings"
-      />
+      >
+        {{ $t('CONVERSATION.FOOTER.CLICK_HERE') }}
+      </woot-button>
     </p>
   </div>
 </template>

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -37,8 +37,6 @@ import wootConstants from 'dashboard/constants/globals';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { FEATURE_FLAGS } from '../../../featureFlags';
 
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
 export default {
   components: {
     Message,
@@ -46,7 +44,6 @@ export default {
     ReplyBox,
     Banner,
     ConversationLabelSuggestion,
-    NextButton,
   },
   mixins: [inboxMixin],
   props: {
@@ -226,23 +223,16 @@ export default {
       return this.$t('CONVERSATION.CANNOT_REPLY');
     },
     replyWindowLink() {
-      if (this.isAFacebookInbox || this.isAInstagramChannel) {
+      if (this.isAWhatsAppChannel) {
         return REPLY_POLICY.FACEBOOK;
       }
-      if (this.isAWhatsAppCloudChannel) {
-        return REPLY_POLICY.WHATSAPP_CLOUD;
-      }
       if (!this.isAPIInbox) {
         return REPLY_POLICY.TWILIO_WHATSAPP;
       }
       return '';
     },
     replyWindowLinkText() {
-      if (
-        this.isAWhatsAppChannel ||
-        this.isAFacebookInbox ||
-        this.isAInstagramChannel
-      ) {
+      if (this.isAWhatsAppChannel) {
         return this.$t('CONVERSATION.24_HOURS_WINDOW');
       }
       if (!this.isAPIInbox) {
@@ -492,21 +482,19 @@ export default {
     <Banner
       v-if="!currentChat.can_reply"
       color-scheme="alert"
-      class="mx-2 mt-2 overflow-hidden rounded-lg"
+      class="mt-2 mx-2 rounded-lg overflow-hidden"
       :banner-message="replyWindowBannerMessage"
       :href-link="replyWindowLink"
       :href-link-text="replyWindowLinkText"
     />
     <div class="flex justify-end">
-      <NextButton
-        faded
-        xs
-        slate
-        class="!rounded-r-none rtl:rotate-180 !rounded-2xl !fixed z-10"
-        :icon="
-          isContactPanelOpen ? 'i-ph-caret-right-fill' : 'i-ph-caret-left-fill'
-        "
+      <woot-button
+        variant="smooth"
+        size="tiny"
+        color-scheme="secondary"
+        class="box-border fixed z-10 bg-white border border-r-0 border-solid rounded-bl-calc rtl:rotate-180 rounded-tl-calc border-n-weak"
         :class="isInboxView ? 'top-52 md:top-40' : 'top-32'"
+        :icon="isRightOrLeftIcon"
         @click="onToggleContactPanel"
       />
     </div>
@@ -626,6 +614,20 @@ export default {
   </div>
 </template>
 
+<style scoped>
+@tailwind components;
+
+@layer components {
+  .rounded-bl-calc {
+    border-bottom-left-radius: calc(1.5rem + 1px);
+  }
+
+  .rounded-tl-calc {
+    border-top-left-radius: calc(1.5rem + 1px);
+  }
+}
+</style>
+
 <style scoped lang="scss">
 .modal-mask {
   @apply absolute;

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -261,8 +261,7 @@ export default {
         this.isAnEmailChannel ||
         this.isASmsInbox ||
         this.isATelegramChannel ||
-        this.isALineChannel ||
-        this.isAInstagramChannel
+        this.isALineChannel
       );
     },
     replyButtonLabel() {
@@ -421,7 +420,6 @@ export default {
       if (conversationId !== oldConversationId) {
         this.setToDraft(oldConversationId, this.replyType);
         this.getFromDraft();
-        this.resetRecorderAndClearAttachments();
       }
     },
     message(updatedMessage) {
@@ -531,12 +529,6 @@ export default {
         );
       }
     },
-    resetRecorderAndClearAttachments() {
-      // Reset audio recorder UI state
-      this.resetAudioRecorderInput();
-      // Reset attached files
-      this.attachedFiles = [];
-    },
     saveDraft(conversationId, replyType) {
       if (this.message || this.message === '') {
         const key = `draft-${conversationId}-${replyType}`;
@@ -1075,9 +1067,9 @@ export default {
 <template>
   <Banner
     v-if="showSelfAssignBanner"
-    action-button-variant="ghost"
+    action-button-variant="clear"
     color-scheme="secondary"
-    class="mx-2 mb-2 rounded-lg banner--self-assign"
+    class="banner--self-assign mx-2 mb-2 rounded-lg"
     :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
     has-action-button
     :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
@@ -1196,7 +1188,6 @@ export default {
       :mode="replyType"
       :on-file-upload="onFileUpload"
       :on-send="onSendReply"
-      :conversation-type="conversationType"
       :recording-audio-duration-text="recordingAudioDurationText"
       :recording-audio-state="recordingAudioState"
       :send-button-text="replyButtonLabel"