Merge branch 'develop' into fix/widget-bubble

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite)
from 5.4.15 to 5.4.17.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/vitejs/vite/releases">vite's
releases</a>.</em></p>
<blockquote>
<h2>v5.4.17</h2>
<p>Please refer to <a
href="https://github.com/vitejs/vite/blob/v5.4.17/packages/vite/CHANGELOG.md">CHANGELOG.md</a>
for details.</p>
<h2>v5.4.16</h2>
<p>Please refer to <a
href="https://github.com/vitejs/vite/blob/v5.4.16/packages/vite/CHANGELOG.md">CHANGELOG.md</a>
for details.</p>
</blockquote>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/vitejs/vite/blob/v5.4.17/packages/vite/CHANGELOG.md">vite's
changelog</a>.</em></p>
<blockquote>
<h2><!-- raw HTML omitted -->5.4.17 (2025-04-03)<!-- raw HTML omitted
--></h2>
<ul>
<li>fix: backport <a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/19782">#19782</a>,
fs check with svg and relative paths (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/19784">#19784</a>)
(<a
href="https://github.com/vitejs/vite/commit/84b2b46ed129be8215108e789a90adbb33a9c42c">84b2b46</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/19782">#19782</a>
<a
href="https://redirect.github.com/vitejs/vite/issues/19784">#19784</a></li>
</ul>
<h2><!-- raw HTML omitted -->5.4.16 (2025-03-31)<!-- raw HTML omitted
--></h2>
<ul>
<li>fix: backport <a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/19761">#19761</a>,
fs check in transform middleware (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/19762">#19762</a>)
(<a
href="https://github.com/vitejs/vite/commit/b627c50d359f3bd9b602408fbbf462cf4a2f019c">b627c50</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/19761">#19761</a>
<a
href="https://redirect.github.com/vitejs/vite/issues/19762">#19762</a></li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/vitejs/vite/commit/0a2518a98d2354c61ee8ef51f7d00fa92aebb511"><code>0a2518a</code></a>
release: v5.4.17</li>
<li><a
href="https://github.com/vitejs/vite/commit/84b2b46ed129be8215108e789a90adbb33a9c42c"><code>84b2b46</code></a>
fix: backport <a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/19782">#19782</a>,
fs check with svg and relative paths (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/19784">#19784</a>)</li>
<li><a
href="https://github.com/vitejs/vite/commit/712cb71aa0e2a03dbf49db92043fb4ecbfc826b1"><code>712cb71</code></a>
release: v5.4.16</li>
<li><a
href="https://github.com/vitejs/vite/commit/b627c50d359f3bd9b602408fbbf462cf4a2f019c"><code>b627c50</code></a>
fix: backport <a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/19761">#19761</a>,
fs check in transform middleware (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/19762">#19762</a>)</li>
<li>See full diff in <a
href="https://github.com/vitejs/vite/commits/v5.4.17/packages/vite">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=vite&package-manager=npm_and_yarn&previous-version=5.4.15&new-version=5.4.17)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/chatwoot/chatwoot/network/alerts).

</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/workflows/frontend-fe.yml

@@ -10,7 +10,7 @@ on:
 
 jobs:
   test:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.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 20.04 machine using
+# # chatwoot on an Ubuntu 22.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-20.04
+    runs-on: ubuntu-22.04
     services:
       postgres:
         image: pgvector/pgvector:pg15

.github/workflows/size-limit.yml

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

.gitignore

@@ -91,3 +91,6 @@ 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

app/builders/contact_inbox_with_contact_builder.rb

@@ -63,9 +63,33 @@ 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

@@ -0,0 +1,179 @@
+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,200 +1,42 @@
-# 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
-
+class Messages::Instagram::MessageBuilder < Messages::Instagram::BaseMessageBuilder
   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 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
+    super(messaging, inbox, outgoing_echo: outgoing_echo)
   end
 
   private
 
-  def attachments
-    @messaging[:message][:attachments] || {}
+  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
   end
 
-  def message_type
-    @outgoing_echo ? :outgoing : :incoming
-  end
+  def handle_error_response(response)
+    parsed_response = JSON.parse(response.body)
+    error_code = parsed_response.dig('error', 'code')
 
-  def message_identifier
-    message[:mid]
-  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_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
+    # 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'))
     end
+
+    Rails.logger.error("[InstagramStoryFetchError]: #{parsed_response.dig('error', 'message')} #{error_code}")
   end
 
-  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
+  def base_uri
+    "https://graph.instagram.com/#{GlobalConfigService.load('INSTAGRAM_API_VERSION', 'v22.0')}"
   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

@@ -0,0 +1,33 @@
+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,20 +68,8 @@ class Messages::Messenger::MessageBuilder
     message.save!
   end
 
-  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
+  # This is a placeholder method to be overridden by child classes
+  def get_story_object_from_source_id(_source_id)
     {}
   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, :name, :role, :availability, :auto_offline]
+    [:name, :email, :role, :availability, :auto_offline]
   end
 
   def agent_params

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

@@ -1,17 +1,21 @@
 class Api::V1::Accounts::Contacts::ConversationsController < Api::V1::Accounts::Contacts::BaseController
   def index
-    @conversations = Current.account.conversations.includes(
+    # Start with all conversations for this contact
+    conversations = Current.account.conversations.includes(
       :assignee, :contact, :inbox, :taggings
-    ).where(inbox_id: inbox_ids, contact_id: @contact.id).order(last_activity_at: :desc).limit(20)
-  end
+    ).where(contact_id: @contact.id)
 
-  private
+    # Apply permission-based filtering using the existing service
+    conversations = Conversations::PermissionFilterService.new(
+      conversations,
+      Current.user,
+      Current.account
+    ).perform
 
-  def inbox_ids
-    if Current.user.administrator? || Current.user.agent?
-      Current.user.assigned_inboxes.pluck(:id)
-    else
-      []
-    end
+    # 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)
   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).perform
+    result = ::Conversations::FilterService.new(params.permit!, current_user, current_account).perform
     @conversations = result[:conversations]
     @conversations_count = result[:count]
   rescue CustomExceptions::CustomFilter::InvalidAttribute,

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

@@ -0,0 +1,30 @@
+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,11 +9,6 @@ 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])
@@ -85,10 +80,6 @@ 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,9 +66,7 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
   end
 
   def check_authorization
-    return if Current.account_user.administrator?
-
-    raise Pundit::NotAuthorizedError
+    authorize :report, :view?
   end
 
   def common_params
@@ -137,5 +135,3 @@ 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

@@ -0,0 +1,74 @@
+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/instagram/callbacks_controller.rb

@@ -0,0 +1,163 @@
+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,6 +43,8 @@ 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,6 +15,9 @@ class Webhooks::InstagramController < ActionController::API
   private
 
   def valid_token?(token)
-    token == GlobalConfigService.load('IG_VERIFY_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', '')
   end
 end

app/dashboards/account_dashboard.rb

@@ -81,7 +81,8 @@ 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) }
+    recent: ->(resources) { resources.where('created_at > ?', 30.days.ago) },
+    marked_for_deletion: ->(resources) { resources.where("custom_attributes->>'marked_for_deletion_at' IS NOT NULL") }
   }.freeze
 
   # Overwrite this method to customize how accounts are displayed

app/finders/conversation_finder.rb

@@ -86,9 +86,19 @@ class ConversationFinder
     @team = current_account.teams.find(params[:team_id]) if params[:team_id]
   end
 
-  def find_all_conversations
+  def find_conversation_by_inbox
     @conversations = current_account.conversations
-    @conversations = @conversations.where(inbox_id: @inbox_ids) unless @is_admin
+    @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
     filter_by_conversation_type if params[:conversation_type]
     @conversations
   end

app/helpers/billing_helper.rb

@@ -18,4 +18,8 @@ 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

@@ -0,0 +1,49 @@
+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,7 +4,6 @@ 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';
@@ -31,7 +30,6 @@ export default {
     UpdateBanner,
     PaymentPendingBanner,
     WootSnackbarBox,
-    UpgradeBanner,
     PendingEmailVerificationBanner,
   },
   setup() {
@@ -146,7 +144,6 @@ 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

@@ -0,0 +1,14 @@
+/* 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,6 +17,12 @@ 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,6 +10,7 @@ describe('#enterpriseAccountAPI', () => {
     expect(accountAPI).toHaveProperty('update');
     expect(accountAPI).toHaveProperty('delete');
     expect(accountAPI).toHaveProperty('checkout');
+    expect(accountAPI).toHaveProperty('toggleDeletion');
   });
 
   describe('API calls', () => {
@@ -42,5 +43,21 @@ 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/_rtl.scss

@@ -81,28 +81,6 @@
         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
@@ -177,71 +155,6 @@
     }
   }
 
-  //   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 {
@@ -264,11 +177,6 @@
     }
   }
 
-  // Widget builder
-  .widget-builder-container .widget-preview {
-    direction: initial;
-  }
-
   // Modal
   .modal-container {
     text-align: right;
@@ -282,7 +190,6 @@
   }
 
   // Other changes
-
   .colorpicker--chrome {
     direction: initial;
   }
@@ -291,14 +198,6 @@
     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,7 +29,6 @@
 @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,6 +40,12 @@ 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

@@ -1,228 +0,0 @@
-// 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/banner/Banner.vue

@@ -1,3 +1,5 @@
+<!-- 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/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">
-      <div>
+      <label :class="{ error: v$.name.$error }">
         <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>
-      </div>
+      </label>
       <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,6 +12,7 @@ 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,6 +19,7 @@ const {
   isAWebWidgetInbox,
   isAWhatsAppChannel,
   isAnEmailChannel,
+  isAInstagramChannel,
 } = useInbox();
 
 const { status, isPrivate, createdAt, sourceId, messageType } =
@@ -47,7 +48,8 @@ const isSent = computed(() => {
     isATwilioChannel.value ||
     isAFacebookInbox.value ||
     isASmsInbox.value ||
-    isATelegramChannel.value
+    isATelegramChannel.value ||
+    isAInstagramChannel.value
   ) {
     return sourceId.value && status.value === MESSAGE_STATUS.SENT;
   }
@@ -86,7 +88,8 @@ const isRead = computed(() => {
   if (
     isAWhatsAppChannel.value ||
     isATwilioChannel.value ||
-    isAFacebookInbox.value
+    isAFacebookInbox.value ||
+    isAInstagramChannel.value
   ) {
     return sourceId.value && status.value === MESSAGE_STATUS.READ;
   }
@@ -102,7 +105,6 @@ 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,6 +26,12 @@ 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;
@@ -70,7 +76,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 currentUser.accounts"
+          v-for="account in sortedCurrentUserAccounts"
           :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 border border-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 outline outline-1 outline-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 border border-n-weak dark:border-n-slate-2 border-t-0 rounded-br-lg rounded-bl-lg"
+      class="bg-n-background outline outline-1 outline-n-weak -mt-[-1px] border-t-0 rounded-br-lg rounded-bl-lg"
       :class="compact ? 'p-0' : 'px-2 py-4'"
     >
       <slot />

app/javascript/dashboard/components/MaskedText.vue

@@ -1,64 +0,0 @@
-<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/SidemenuIcon.vue

@@ -3,12 +3,16 @@ 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: 'small',
+      default: 'sm',
     },
   },
   computed: {
@@ -33,13 +37,13 @@ export default {
 
 <!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
-  <woot-button
+  <NextButton
     v-if="!hasNextSidebar"
+    ghost
+    slate
     :size="size"
-    variant="clear"
-    color-scheme="secondary"
-    class="-ml-3 text-black-900 dark:text-slate-300"
-    icon="list"
+    icon="i-lucide-menu"
+    class="-ml-3"
     @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="mail"
+    action-button-icon="i-lucide-mail"
     has-action-button
     @primary-action="resendVerificationEmail"
   />

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

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

@@ -1,66 +0,0 @@
-<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 button-group outline-1 outline"
+      class="rounded-lg shadow outline-1 outline"
       :class="!showOpenButton ? 'outline-n-container' : 'outline-transparent'"
     >
       <Button

app/javascript/dashboard/components/index.js

@@ -1,7 +1,6 @@
 // [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';
@@ -18,7 +17,6 @@ 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';
@@ -26,7 +24,6 @@ import DatePicker from './ui/DatePicker/DatePicker.vue';
 
 const WootUIKit = {
   AvatarUploader,
-  Button,
   Code,
   ColorPicker,
   ConfirmDeleteModal,
@@ -43,7 +40,6 @@ const WootUIKit = {
   ModalHeader,
   SidemenuIcon,
   Spinner,
-  SubmitButton,
   Tabs,
   TabsItem,
   Thumbnail,

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

@@ -7,6 +7,7 @@ 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;
 
@@ -17,6 +18,7 @@ export default {
     WootDropdownMenu,
     WootDropdownItem,
     AvailabilityStatusBadge,
+    NextButton,
   },
   data() {
     return {
@@ -101,19 +103,21 @@ export default {
       :key="status.value"
       class="flex items-baseline"
     >
-      <woot-button
-        size="small"
-        :color-scheme="status.disabled ? '' : 'secondary'"
-        :variant="status.disabled ? 'smooth' : 'clear'"
-        class="status-change--dropdown-button"
+      <NextButton
+        sm
+        :color="status.disabled ? 'blue' : 'slate'"
+        :variant="status.disabled ? 'faded' : 'ghost'"
+        class="status-change--dropdown-button !w-full !justify-start"
         @click="changeAvailabilityStatus(status.value)"
       >
         <AvailabilityStatusBadge :status="status.value" />
-        {{ status.label }}
-      </woot-button>
+        <span class="min-w-0 truncate font-medium text-xs">
+          {{ status.label }}
+        </span>
+      </NextButton>
     </WootDropdownItem>
     <WootDropdownDivider />
-    <WootDropdownItem class="flex items-center justify-between p-2 m-0">
+    <WootDropdownItem class="flex items-center justify-between px-3 py-2 m-0">
       <div class="flex items-center">
         <fluent-icon
           v-tooltip.right-start="$t('SIDEBAR.SET_AUTO_OFFLINE.INFO_TEXT')"
@@ -123,7 +127,7 @@ export default {
         />
 
         <span
-          class="mx-1 my-0 text-xs font-medium text-slate-600 dark:text-slate-100"
+          class="mx-2 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,7 +1,11 @@
 <script>
 import { mapGetters } from 'vuex';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
+  components: {
+    NextButton,
+  },
   emits: ['toggleAccounts'],
   data() {
     return { showSwitchButton: false };
@@ -46,14 +50,13 @@ 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">
-          <woot-button
-            variant="clear"
-            size="tiny"
-            icon="arrow-swap"
+          <NextButton
+            ghost
+            xs
+            icon="i-lucide-arrow-right-left"
+            :label="$t('SIDEBAR.SWITCH')"
             @click="$emit('toggleAccounts')"
-          >
-            {{ $t('SIDEBAR.SWITCH') }}
-          </woot-button>
+          />
         </div>
       </div>
     </transition>

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

@@ -3,8 +3,12 @@ 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,
@@ -86,19 +90,24 @@ export default {
             />
           </label>
         </div>
-        <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 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>
       </form>
     </div>

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

@@ -1,10 +1,12 @@
 <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: {
@@ -25,10 +27,10 @@ export default {
 </script>
 
 <template>
-  <woot-button
+  <NextButton
     v-tooltip.right="$t(`SIDEBAR.PROFILE_SETTINGS`)"
-    variant="link"
-    class="flex items-center rounded-full"
+    link
+    class="rounded-full"
     @click="handleClick"
   >
     <Thumbnail
@@ -37,6 +39,7 @@ export default {
       :status="statusOfAgent"
       should-show-status-always
       size="32px"
+      class="flex-shrink-0"
     />
-  </woot-button>
+  </NextButton>
 </template>

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

@@ -5,12 +5,14 @@ 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: {
@@ -82,37 +84,46 @@ export default {
       <AvailabilityStatus />
       <WootDropdownMenu>
         <WootDropdownItem v-if="showChangeAccountOption">
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="arrow-swap"
+          <NextButton
+            ghost
+            sm
+            slate
+            icon="i-lucide-arrow-right-left"
+            class="!w-full !justify-start"
             @click="$emit('toggleAccounts')"
           >
-            {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
-          </woot-button>
+            <span class="min-w-0 truncate font-medium text-xs">
+              {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
+            </span>
+          </NextButton>
         </WootDropdownItem>
         <WootDropdownItem v-if="showChatSupport">
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="chat-help"
+          <NextButton
+            ghost
+            sm
+            slate
+            icon="i-lucide-message-circle-question"
+            class="!w-full !justify-start"
             @click="$emit('showSupportChatWindow')"
           >
-            {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
-          </woot-button>
+            <span class="min-w-0 truncate font-medium text-xs">
+              {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
+            </span>
+          </NextButton>
         </WootDropdownItem>
         <WootDropdownItem>
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="keyboard"
+          <NextButton
+            ghost
+            sm
+            slate
+            icon="i-lucide-keyboard"
+            class="!w-full !justify-start"
             @click="handleKeyboardHelpClick"
           >
-            {{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
-          </woot-button>
+            <span class="min-w-0 truncate font-medium text-xs">
+              {{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
+            </span>
+          </NextButton>
         </WootDropdownItem>
         <WootDropdownItem>
           <router-link
@@ -122,56 +133,70 @@ 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)"
             >
-              <fluent-icon icon="person" size="14" class="icon icon--font" />
-              <span class="button__content">
-                {{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
-              </span>
+              <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>
             </a>
           </router-link>
         </WootDropdownItem>
         <WootDropdownItem>
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="appearance"
+          <NextButton
+            ghost
+            sm
+            slate
+            icon="i-lucide-sun-moon"
+            class="!w-full !justify-start"
             @click="openAppearanceOptions"
           >
-            {{ $t('SIDEBAR_ITEMS.APPEARANCE') }}
-          </woot-button>
+            <span class="min-w-0 truncate font-medium text-xs">
+              {{ $t('SIDEBAR_ITEMS.APPEARANCE') }}
+            </span>
+          </NextButton>
         </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')"
           >
-            <fluent-icon
-              icon="content-settings"
-              size="14"
-              class="icon icon--font"
-            />
-            <span class="button__content">
-              {{ $t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE') }}
-            </span>
+            <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>
           </a>
         </WootDropdownItem>
         <WootDropdownItem>
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="power"
+          <NextButton
+            ghost
+            sm
+            slate
+            icon="i-lucide-circle-power"
+            class="!w-full !justify-start"
             @click="logout"
           >
-            {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
-          </woot-button>
+            <span class="min-w-0 truncate font-medium text-xs">
+              {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
+            </span>
+          </NextButton>
         </WootDropdownItem>
       </WootDropdownMenu>
     </div>

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

@@ -13,9 +13,10 @@ 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 },
+  components: { SecondaryChildNavItem, Policy, NextButton },
   props: {
     menuItem: {
       type: Object,
@@ -205,14 +206,7 @@ export default {
         {{ $t(`SIDEBAR.${menuItem.label}`) }}
       </span>
       <div v-if="menuItem.showNewButton" class="flex items-center">
-        <woot-button
-          size="tiny"
-          variant="clear"
-          color-scheme="secondary"
-          icon="add"
-          class="p-0 ml-2"
-          @click="onClickOpen"
-        />
+        <NextButton ghost xs slate icon="i-lucide-plus" @click="onClickOpen" />
       </div>
     </div>
     <router-link
@@ -272,16 +266,15 @@ export default {
         >
           <li class="pl-1">
             <a :href="href">
-              <woot-button
-                size="tiny"
-                variant="clear"
-                color-scheme="secondary"
-                icon="add"
+              <NextButton
+                ghost
+                xs
+                slate
+                icon="i-lucide-plus"
+                :label="$t(`SIDEBAR.${menuItem.newLinkTag}`)"
                 :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,7 +41,6 @@ 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 WootButton from 'dashboard/components/ui/WootButton.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 describe('AgentDetails', () => {
   const currentUser = {
@@ -40,12 +40,12 @@ describe('AgentDetails', () => {
         plugins: [store],
         components: {
           Thumbnail,
-          WootButton,
+          NextButton,
         },
         directives: {
           tooltip: mockTooltipDirective, // Mocking the tooltip directive
         },
-        stubs: { WootButton: { template: '<button><slot /></button>' } },
+        stubs: { NextButton: { 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 WootButton from 'dashboard/components/ui/WootButton.vue';
+import NextButton from 'dashboard/components-next/button/Button.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: {
-          WootButton,
+          NextButton,
           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: { WootButton: { template: '<button><slot /></button>' } },
+      stubs: { NextButton: { 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 text-black-900 dark:text-slate-300"
-  color-scheme="secondary"
-  icon="list"
-  size="small"
-  variant="clear"
+  class="-ml-3"
+  ghost=""
+  icon="i-lucide-menu"
+  size="sm"
+  slate=""
 >
   
   

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

@@ -1,5 +1,10 @@
 <script>
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     bannerMessage: {
       type: String,
@@ -19,7 +24,7 @@ export default {
     },
     actionButtonVariant: {
       type: String,
-      default: '',
+      default: 'faded',
     },
     actionButtonLabel: {
       type: String,
@@ -27,7 +32,7 @@ export default {
     },
     actionButtonIcon: {
       type: String,
-      default: 'arrow-right',
+      default: 'i-lucide-arrow-right',
     },
     colorScheme: {
       type: String,
@@ -48,6 +53,18 @@ 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) {
@@ -77,27 +94,23 @@ export default {
       </a>
     </span>
     <div class="actions">
-      <woot-button
+      <NextButton
         v-if="hasActionButton"
-        size="tiny"
+        xs
         :icon="actionButtonIcon"
         :variant="actionButtonVariant"
-        color-scheme="primary"
-        class-names="banner-action__button"
+        :color="getButtonColor"
+        :label="actionButtonLabel"
         @click="onClick"
-      >
-        {{ actionButtonLabel }}
-      </woot-button>
-      <woot-button
+      />
+      <NextButton
         v-if="hasCloseButton"
-        size="tiny"
-        :color-scheme="colorScheme"
-        icon="dismiss-circle"
-        class-names="banner-action__button"
+        xs
+        icon="i-lucide-circle-x"
+        :color="getButtonColor"
+        :label="$t('GENERAL_SETTINGS.DISMISS')"
         @click="onClickClose"
-      >
-        {{ $t('GENERAL_SETTINGS.DISMISS') }}
-      </woot-button>
+      />
     </div>
   </div>
 </template>
@@ -106,13 +119,6 @@ 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 {
@@ -124,13 +130,6 @@ 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;
@@ -146,21 +145,12 @@ 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,14 +1,16 @@
 <script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+
 defineProps({
   buttonText: {
     type: String,
     default: '',
   },
-  rightIcon: {
-    type: String,
-    default: '',
+  trailingIcon: {
+    type: Boolean,
+    default: false,
   },
-  leftIcon: {
+  icon: {
     type: String,
     default: '',
   },
@@ -16,32 +18,15 @@ defineProps({
 </script>
 
 <template>
-  <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"
+  <Button
+    ghost
+    slate
+    sm
+    class="relative"
+    :icon="icon"
+    :trailing-icon="trailingIcon"
   >
-    <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>
-
+    <span class="min-w-0 truncate">{{ buttonText }}</span>
     <slot name="dropdown" />
-  </button>
+  </Button>
 </template>

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

@@ -8,9 +8,7 @@ defineProps({
 </script>
 
 <template>
-  <div
-    class="flex items-center justify-center h-10 text-sm text-slate-500 dark:text-slate-300"
-  >
+  <div class="flex items-center justify-center h-10 text-sm text-n-slate-11">
     {{ 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-white border shadow dark:bg-slate-800 rounded-xl border-slate-50 dark:border-slate-700/50 max-h-[400px]"
+    class="absolute z-20 w-40 bg-n-solid-2 border-0 outline outline-1 outline-n-weak shadow rounded-xl 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:bg-slate-50 dark:hover:bg-slate-700 active:bg-slate-75 dark:active:bg-slate-800"
+    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"
   >
     <div class="inline-flex items-center gap-3 overflow-hidden">
       <fluent-icon
@@ -30,16 +30,14 @@ defineProps({
         size="18"
         :style="{ color: iconColor }"
       />
-      <span
-        class="text-sm font-medium truncate text-slate-900 dark:text-slate-50"
-      >
+      <span class="text-sm font-medium truncate text-n-slate-12">
         {{ buttonText }}
       </span>
       <fluent-icon
         v-if="isActive"
         icon="checkmark"
         size="18"
-        class="flex-shrink-0 text-slate-900 dark:text-slate-50"
+        class="flex-shrink-0 text-n-slate-12"
       />
     </div>
     <slot name="dropdown" />

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

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

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

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

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

@@ -1,129 +0,0 @@
-<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/ChannelItem.vue

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

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,13 +21,6 @@ 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);
 }
@@ -55,84 +48,61 @@ const onLastPage = () => {
 </script>
 
 <template>
-  <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)"
+  <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"
       @click="onFirstPage"
-    >
-      <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)"
+    />
+    <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"
-    >
-      <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"
+      class="flex items-center gap-3 px-3 tabular-nums bg-n-slate-9/10 h-full"
     >
-      <span class="text-sm text-slate-800 dark:text-slate-75">
+      <span class="text-sm text-n-slate-12">
         {{ currentPage }}
       </span>
-      <span class="text-slate-600 dark:text-slate-500">/</span>
-      <span class="text-sm text-slate-600 dark:text-slate-500">
+      <span class="text-n-slate-11">/</span>
+      <span class="text-sm text-n-slate-11">
         {{ totalPages }}
       </span>
     </div>
-    <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)"
+    <NextButton
+      faded
+      sm
+      slate
+      icon="i-lucide-chevron-right"
+      class="rounded-none"
+      :disabled="hasNextPage"
       @click="onNextPage"
-    >
-      <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"
+    />
+    <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"
       @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,10 +774,24 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
 }
 
 .ProseMirror-prompt {
-  @apply z-[9999] bg-slate-25 dark:bg-slate-700 rounded-md border border-solid border-slate-75 dark:border-slate-800 shadow-lg;
+  @apply z-[9999] bg-n-alpha-3 backdrop-blur-[100px] border border-n-strong p-6 shadow-xl rounded-xl;
 
   h5 {
-    @apply dark:text-slate-25 text-slate-800;
+    @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;
+      }
+    }
   }
 }
 

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

@@ -328,11 +328,24 @@ export default {
 }
 
 .ProseMirror-prompt {
-  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;
+  @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;
+      }
+    }
+  }
 }
 </style>

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

@@ -10,6 +10,7 @@ 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';
@@ -113,6 +114,10 @@ export default {
       type: String,
       required: true,
     },
+    conversationType: {
+      type: String,
+      default: '',
+    },
   },
   emits: [
     'replaceText',
@@ -187,6 +192,9 @@ 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;
@@ -194,6 +202,10 @@ 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() {

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

@@ -106,43 +106,3 @@ 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/EmailTranscriptModal.vue

@@ -2,8 +2,12 @@
 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,
@@ -153,13 +157,18 @@ export default {
           </div>
         </div>
         <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-submit-button
-            :button-text="$t('EMAIL_TRANSCRIPT.SUBMIT')"
+          <NextButton
+            faded
+            slate
+            type="reset"
+            :label="$t('EMAIL_TRANSCRIPT.CANCEL')"
+            @click.prevent="onCancel"
+          />
+          <NextButton
+            type="submit"
+            :label="$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/MessagesView.vue

@@ -226,16 +226,23 @@ export default {
       return this.$t('CONVERSATION.CANNOT_REPLY');
     },
     replyWindowLink() {
-      if (this.isAWhatsAppChannel) {
+      if (this.isAFacebookInbox || this.isAInstagramChannel) {
         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) {
+      if (
+        this.isAWhatsAppChannel ||
+        this.isAFacebookInbox ||
+        this.isAInstagramChannel
+      ) {
         return this.$t('CONVERSATION.24_HOURS_WINDOW');
       }
       if (!this.isAPIInbox) {
@@ -485,7 +492,7 @@ export default {
     <Banner
       v-if="!currentChat.can_reply"
       color-scheme="alert"
-      class="mt-2 mx-2 rounded-lg overflow-hidden"
+      class="mx-2 mt-2 overflow-hidden rounded-lg"
       :banner-message="replyWindowBannerMessage"
       :href-link="replyWindowLink"
       :href-link-text="replyWindowLinkText"

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

@@ -261,7 +261,8 @@ export default {
         this.isAnEmailChannel ||
         this.isASmsInbox ||
         this.isATelegramChannel ||
-        this.isALineChannel
+        this.isALineChannel ||
+        this.isAInstagramChannel
       );
     },
     replyButtonLabel() {
@@ -420,6 +421,7 @@ export default {
       if (conversationId !== oldConversationId) {
         this.setToDraft(oldConversationId, this.replyType);
         this.getFromDraft();
+        this.resetRecorderAndClearAttachments();
       }
     },
     message(updatedMessage) {
@@ -529,6 +531,12 @@ 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}`;
@@ -1067,9 +1075,9 @@ export default {
 <template>
   <Banner
     v-if="showSelfAssignBanner"
-    action-button-variant="clear"
+    action-button-variant="ghost"
     color-scheme="secondary"
-    class="banner--self-assign mx-2 mb-2 rounded-lg"
+    class="mx-2 mb-2 rounded-lg banner--self-assign"
     :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
     has-action-button
     :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
@@ -1188,6 +1196,7 @@ 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"

app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue

@@ -4,8 +4,12 @@ import {
   DuplicateContactException,
   ExceptionWithMessage,
 } from 'shared/helpers/CustomErrors';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     name: {
       type: String,
@@ -91,9 +95,12 @@ export default {
       </p>
     </div>
     <div v-if="formattedPhoneNumber" class="link-wrap">
-      <woot-button variant="clear" size="small" @click.prevent="addContact">
-        {{ $t('CONVERSATION.SAVE_CONTACT') }}
-      </woot-button>
+      <NextButton
+        ghost
+        xs
+        :label="$t('CONVERSATION.SAVE_CONTACT')"
+        @click.prevent="addContact"
+      />
     </div>
   </div>
 </template>

app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue

@@ -2,8 +2,12 @@
 import DyteAPI from 'dashboard/api/integrations/dyte';
 import { buildDyteURL } from 'shared/helpers/IntegrationHelper';
 import { useAlert } from 'dashboard/composables';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     messageId: {
       type: Number,
@@ -41,31 +45,25 @@ export default {
 
 <template>
   <div>
-    <woot-button
-      size="small"
-      variant="smooth"
-      color-scheme="secondary"
-      icon="video-add"
-      class="join-call-button"
+    <NextButton
+      blue
+      sm
+      icon="i-lucide-video"
+      :label="$t('INTEGRATION_SETTINGS.DYTE.CLICK_HERE_TO_JOIN')"
       :is-loading="isLoading"
       @click="joinTheCall"
-    >
-      {{ $t('INTEGRATION_SETTINGS.DYTE.CLICK_HERE_TO_JOIN') }}
-    </woot-button>
+    />
     <div v-if="dyteAuthToken" class="video-call--container">
       <iframe
         :src="meetingLink"
         allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
       />
-      <woot-button
-        size="small"
-        variant="smooth"
-        color-scheme="secondary"
-        class="join-call-button"
+      <NextButton
+        sm
+        class="mt-2"
+        :label="$t('INTEGRATION_SETTINGS.DYTE.LEAVE_THE_ROOM')"
         @click="leaveTheRoom"
-      >
-        {{ $t('INTEGRATION_SETTINGS.DYTE.LEAVE_THE_ROOM') }}
-      </woot-button>
+      />
     </div>
   </div>
 </template>

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

@@ -1,6 +1,6 @@
 <script>
 // components
-import WootButton from '../../../ui/WootButton.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import Avatar from '../../Avatar.vue';
 
 // composables
@@ -19,7 +19,7 @@ export default {
   name: 'LabelSuggestion',
   components: {
     Avatar,
-    WootButton,
+    NextButton,
   },
   props: {
     suggestedLabels: {
@@ -185,42 +185,44 @@ export default {
               "
             />
           </button>
-          <WootButton
+          <NextButton
             v-if="preparedLabels.length === 1"
             v-tooltip.top="{
               content: $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DISMISS'),
               delay: { show: 600, hide: 0 },
               hideOnClick: true,
             }"
-            variant="smooth"
-            :color-scheme="isHovered ? 'alert' : 'primary'"
-            class="label--add"
-            icon="dismiss"
-            size="tiny"
+            faded
+            xs
+            icon="i-lucide-x"
+            class="flex-shrink-0"
+            :color="isHovered ? 'ruby' : 'blue'"
             @click="dismissSuggestions"
           />
         </div>
-        <div v-if="preparedLabels.length > 1">
-          <WootButton
-            :variant="selectedLabels.length === 0 ? 'smooth' : ''"
-            class="label--add"
-            icon="add"
-            size="tiny"
+        <div
+          v-if="preparedLabels.length > 1"
+          class="inline-flex items-center gap-1"
+        >
+          <NextButton
+            xs
+            icon="i-lucide-plus"
+            class="flex-shrink-0"
+            :variant="selectedLabels.length === 0 ? 'faded' : 'solid'"
+            :label="addButtonText"
             @click="addAllLabels"
-          >
-            {{ addButtonText }}
-          </WootButton>
-          <WootButton
+          />
+          <NextButton
             v-tooltip.top="{
               content: $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DISMISS'),
               delay: { show: 600, hide: 0 },
               hideOnClick: true,
             }"
-            :color-scheme="isHovered ? 'alert' : 'primary'"
-            variant="smooth"
-            class="label--add"
-            icon="dismiss"
-            size="tiny"
+            faded
+            xs
+            icon="i-lucide-x"
+            class="flex-shrink-0"
+            :color="isHovered ? 'ruby' : 'blue'"
             @click="dismissSuggestions"
           />
         </div>

app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue

@@ -107,9 +107,10 @@ const linkIssue = async () => {
     :class="shouldShowDropdown ? 'h-[256px]' : 'gap-2'"
   >
     <FilterButton
-      right-icon="chevron-down"
+      trailing-icon
+      icon="i-lucide-chevron-down"
       :button-text="linkIssueTitle"
-      class="justify-between w-full h-[2.5rem] py-1.5 px-3 rounded-xl border border-slate-50 bg-slate-25 dark:border-slate-600 dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-900/50"
+      class="justify-between w-full h-[2.5rem] py-1.5 px-3 rounded-xl bg-n-alpha-black2 outline outline-1 outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6"
       @click="toggleDropdown"
     >
       <template v-if="shouldShowDropdown" #dropdown>

app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue

@@ -50,9 +50,10 @@ const selectedItemId = computed(() => selectedItem.value?.id || null);
     <label class="w-full" :class="{ error: hasError }">
       {{ label }}
       <FilterButton
-        right-icon="chevron-down"
+        trailing-icon
+        icon="i-lucide-chevron-down"
         :button-text="selectedItemName"
-        class="justify-between w-full h-[2.5rem] py-1.5 px-3 rounded-xl border border-slate-50 bg-slate-25 dark:border-slate-600 dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-900/50"
+        class="justify-between w-full h-[2.5rem] py-1.5 px-3 rounded-xl bg-n-alpha-black2 outline outline-1 outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6"
         @click="toggleDropdown"
       >
         <template v-if="shouldShowDropdown" #dropdown>

app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue

@@ -1,5 +1,10 @@
 <script>
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     label: {
       type: String,
@@ -49,15 +54,13 @@ export default {
       :username="usernameAvatar"
     />
     <div v-if="src && deleteAvatar" class="avatar-delete-btn">
-      <woot-button
-        color-scheme="alert"
-        variant="hollow"
-        size="tiny"
-        type="button"
+      <NextButton
+        outline
+        xs
+        ruby
+        :label="$t('INBOX_MGMT.DELETE.AVATAR_DELETE_BUTTON_TEXT')"
         @click="onAvatarDelete"
-      >
-        {{ $t('INBOX_MGMT.DELETE.AVATAR_DELETE_BUTTON_TEXT') }}
-      </woot-button>
+      />
     </div>
     <label>
       <input

app/javascript/dashboard/composables/useInbox.js

@@ -121,6 +121,10 @@ export const useInbox = () => {
     );
   });
 
+  const isAInstagramChannel = computed(() => {
+    return channelType.value === INBOX_TYPES.INSTAGRAM;
+  });
+
   return {
     inbox,
     isAFacebookInbox,
@@ -137,5 +141,6 @@ export const useInbox = () => {
     isAWhatsAppCloudChannel,
     is360DialogWhatsAppChannel,
     isAnEmailChannel,
+    isAInstagramChannel,
   };
 };

app/javascript/dashboard/featureFlags.js

@@ -34,6 +34,7 @@ export const FEATURE_FLAGS = {
   CUSTOM_ROLES: 'custom_roles',
   CHATWOOT_V4: 'chatwoot_v4',
   REPORT_V4: 'report_v4',
+  CHANNEL_INSTAGRAM: 'channel_instagram',
   CONTACT_CHATWOOT_SUPPORT_TEAM: 'contact_chatwoot_support_team',
 };
 

app/javascript/dashboard/helper/ConversationMetaThrottleManager.js

@@ -1,29 +0,0 @@
-class ConversationMetaThrottleManager {
-  constructor() {
-    this.lastUpdatedTime = null;
-  }
-
-  shouldThrottle(threshold = 10000) {
-    if (!this.lastUpdatedTime) {
-      return false;
-    }
-
-    const currentTime = new Date().getTime();
-    const lastUpdatedTime = new Date(this.lastUpdatedTime).getTime();
-
-    if (currentTime - lastUpdatedTime < threshold) {
-      return true;
-    }
-    return false;
-  }
-
-  markUpdate() {
-    this.lastUpdatedTime = new Date();
-  }
-
-  reset() {
-    this.lastUpdatedTime = null;
-  }
-}
-
-export default new ConversationMetaThrottleManager();

app/javascript/dashboard/helper/inbox.js

@@ -9,6 +9,7 @@ export const INBOX_TYPES = {
   TELEGRAM: 'Channel::Telegram',
   LINE: 'Channel::Line',
   SMS: 'Channel::Sms',
+  INSTAGRAM: 'Channel::Instagram',
 };
 
 const INBOX_ICON_MAP_FILL = {
@@ -20,6 +21,7 @@ const INBOX_ICON_MAP_FILL = {
   [INBOX_TYPES.EMAIL]: 'i-ri-mail-fill',
   [INBOX_TYPES.TELEGRAM]: 'i-ri-telegram-fill',
   [INBOX_TYPES.LINE]: 'i-ri-line-fill',
+  [INBOX_TYPES.INSTAGRAM]: 'i-ri-instagram-fill',
 };
 
 const DEFAULT_ICON_FILL = 'i-ri-chat-1-fill';
@@ -33,6 +35,7 @@ const INBOX_ICON_MAP_LINE = {
   [INBOX_TYPES.EMAIL]: 'i-ri-mail-line',
   [INBOX_TYPES.TELEGRAM]: 'i-ri-telegram-line',
   [INBOX_TYPES.LINE]: 'i-ri-line-line',
+  [INBOX_TYPES.INSTAGRAM]: 'i-ri-instagram-line',
 };
 
 const DEFAULT_ICON_LINE = 'i-ri-chat-1-line';
@@ -118,6 +121,9 @@ export const getInboxClassByType = (type, phoneNumber) => {
     case INBOX_TYPES.LINE:
       return 'brand-line';
 
+    case INBOX_TYPES.INSTAGRAM:
+      return 'brand-instagram';
+
     default:
       return 'chat';
   }

app/javascript/dashboard/helper/specs/ConversationMetaThrottleManager.spec.js

@@ -1,34 +0,0 @@
-import ConversationMetaThrottleManager from '../ConversationMetaThrottleManager';
-
-describe('ConversationMetaThrottleManager', () => {
-  beforeEach(() => {
-    // Reset the lastUpdatedTime before each test
-    ConversationMetaThrottleManager.lastUpdatedTime = null;
-  });
-
-  describe('shouldThrottle', () => {
-    it('returns false when lastUpdatedTime is not set', () => {
-      expect(ConversationMetaThrottleManager.shouldThrottle()).toBe(false);
-    });
-
-    it('returns true when time difference is less than threshold', () => {
-      ConversationMetaThrottleManager.markUpdate();
-      expect(ConversationMetaThrottleManager.shouldThrottle()).toBe(true);
-    });
-
-    it('returns false when time difference is more than threshold', () => {
-      ConversationMetaThrottleManager.lastUpdatedTime = new Date(
-        Date.now() - 11000
-      );
-      expect(ConversationMetaThrottleManager.shouldThrottle()).toBe(false);
-    });
-
-    it('respects custom threshold value', () => {
-      ConversationMetaThrottleManager.lastUpdatedTime = new Date(
-        Date.now() - 5000
-      );
-      expect(ConversationMetaThrottleManager.shouldThrottle(3000)).toBe(false);
-      expect(ConversationMetaThrottleManager.shouldThrottle(6000)).toBe(true);
-    });
-  });
-});

app/javascript/dashboard/helper/specs/macrosHelper.spec.js

@@ -36,7 +36,7 @@ describe('#resolveActionName', () => {
     expect(resolveActionName(MACRO_ACTION_TYPES[1].key)).not.toEqual(
       MACRO_ACTION_TYPES[0].label
     );
-    expect(resolveActionName('change_priority')).toEqual('Change Priority');
+    expect(resolveActionName('change_priority')).toEqual('CHANGE_PRIORITY'); // Translated
   });
 });
 

app/javascript/dashboard/i18n/locale/en/automation.json

@@ -126,6 +126,44 @@
       "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
       "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     },
-    "NONE_OPTION": "None"
+    "NONE_OPTION": "None",
+    "EVENTS": {
+      "CONVERSATION_CREATED": "Conversation Created",
+      "CONVERSATION_UPDATED": "Conversation Updated",
+      "MESSAGE_CREATED": "Message Created",
+      "CONVERSATION_OPENED": "Conversation Opened"
+    },
+    "ACTIONS": {
+      "ASSIGN_AGENT": "Assign to Agent",
+      "ASSIGN_TEAM": "Assign a Team",
+      "ADD_LABEL": "Add a Label",
+      "REMOVE_LABEL": "Remove a Label",
+      "SEND_EMAIL_TO_TEAM": "Send an Email to Team",
+      "SEND_EMAIL_TRANSCRIPT": "Send an Email Transcript",
+      "MUTE_CONVERSATION": "Mute Conversation",
+      "SNOOZE_CONVERSATION": "Snooze Conversation",
+      "RESOLVE_CONVERSATION": "Resolve Conversation",
+      "SEND_WEBHOOK_EVENT": "Send Webhook Event",
+      "SEND_ATTACHMENT": "Send Attachment",
+      "SEND_MESSAGE": "Send a Message",
+      "CHANGE_PRIORITY": "Change Priority",
+      "ADD_SLA": "Add SLA"
+    },
+    "ATTRIBUTES": {
+      "MESSAGE_TYPE": "Message Type",
+      "MESSAGE_CONTAINS": "Message Contains",
+      "EMAIL": "Email",
+      "INBOX": "Inbox",
+      "CONVERSATION_LANGUAGE": "Conversation Language",
+      "PHONE_NUMBER": "Phone Number",
+      "STATUS": "Status",
+      "BROWSER_LANGUAGE": "Browser Language",
+      "MAIL_SUBJECT": "Email Subject",
+      "COUNTRY_NAME": "Country",
+      "REFERER_LINK": "Referrer Link",
+      "ASSIGNEE_NAME": "Assignee",
+      "TEAM_NAME": "Team",
+      "PRIORITY": "Priority"
+    }
   }
 }

app/javascript/dashboard/i18n/locale/en/generalSettings.json

@@ -1,5 +1,11 @@
 {
   "GENERAL_SETTINGS": {
+    "LIMIT_MESSAGES": {
+      "CONVERSATION": "You have exceeded the conversation limit. Hacker plan allows only 500 conversations.",
+      "INBOXES": "You have exceeded the inbox limit. Hacker plan only supports website live-chat. Additional inboxes like email, WhatsApp etc. require a paid plan.",
+      "AGENTS": "You have exceeded the agent limit. Hacker plan allows only 2 agents.",
+      "NON_ADMIN": "Please contact your administrator to upgrade the plan and continue using all features."
+    },
     "TITLE": "Account settings",
     "SUBMIT": "Update settings",
     "BACK": "Back",
@@ -8,6 +14,26 @@
       "ERROR": "Could not update settings, try again!",
       "SUCCESS": "Successfully updated account settings"
     },
+    "ACCOUNT_DELETE_SECTION": {
+      "TITLE": "Delete your Account",
+      "NOTE": "Once you delete your account, all your data will be deleted.",
+      "BUTTON_TEXT": "Delete Your Account",
+      "CONFIRM": {
+        "TITLE": "Delete Account",
+        "MESSAGE": "Deleting your Account is irreversible. Enter your account name below to confirm you want to permanently delete it.",
+        "BUTTON_TEXT": "Delete",
+        "DISMISS": "Cancel",
+        "PLACE_HOLDER": "Please type {accountName} to confirm"
+      },
+      "SUCCESS": "Account marked for deletion",
+      "FAILURE": "Could not delete account, try again!",
+      "SCHEDULED_DELETION": {
+        "TITLE": "Account Scheduled for Deletion",
+        "MESSAGE_MANUAL": "This account is scheduled for deletion on {deletionDate}. This was requested by an administrator. You can cancel the deletion before this date.",
+        "MESSAGE_INACTIVITY": "This account is scheduled for deletion on {deletionDate} due to account inactivity. You can cancel the deletion before this date.",
+        "CLEAR_BUTTON": "Cancel Scheduled Deletion"
+      }
+    },
     "FORM": {
       "ERROR": "Please fix form errors",
       "GENERAL_SECTION": {
@@ -51,6 +77,7 @@
     "UPDATE_CHATWOOT": "An update {latestChatwootVersion} for Chatwoot is available. Please update your instance.",
     "LEARN_MORE": "Learn more",
     "PAYMENT_PENDING": "Your payment is pending. Please update your payment information to continue using Chatwoot",
+    "UPGRADE": "Upgrade to continue using Chatwoot",
     "LIMITS_UPGRADE": "Your account has exceeded the usage limits, please upgrade your plan to continue using Chatwoot",
     "OPEN_BILLING": "Open billing"
   },

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -43,7 +43,15 @@
         "INBOX_NAME": "Inbox Name",
         "ADD_NAME": "Add a name for your inbox",
         "PICK_NAME": "Pick a Name for your Inbox",
-        "PICK_A_VALUE": "Pick a value"
+        "PICK_A_VALUE": "Pick a value",
+        "CREATE_INBOX": "Create Inbox"
+      },
+      "INSTAGRAM": {
+        "CONTINUE_WITH_INSTAGRAM": "Continue with Instagram",
+        "CONNECT_YOUR_INSTAGRAM_PROFILE": "Connect your Instagram Profile",
+        "HELP": "To add your Instagram profile as a channel, you need to authenticate your Instagram Profile by clicking on 'Continue with Instagram' ",
+        "ERROR_MESSAGE": "There was an error connecting to Instagram, please try again",
+        "ERROR_AUTH": "There was an error connecting to Instagram, please try again"
       },
       "TWITTER": {
         "HELP": "To add your Twitter profile as a channel, you need to authenticate your Twitter Profile by clicking on 'Sign in with Twitter' ",
@@ -753,7 +761,8 @@
       "EMAIL": "Email",
       "TELEGRAM": "Telegram",
       "LINE": "Line",
-      "API": "API Channel"
+      "API": "API Channel",
+      "INSTAGRAM": "Instagram"
     }
   }
 }

app/javascript/dashboard/i18n/locale/en/macros.json

@@ -83,6 +83,22 @@
       "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
       "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
       "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
+    },
+    "ACTIONS": {
+      "ASSIGN_TEAM": "Assign a Team",
+      "ASSIGN_AGENT": "Assign an Agent",
+      "ADD_LABEL": "Add a Label",
+      "REMOVE_LABEL": "Remove a Label",
+      "REMOVE_ASSIGNED_TEAM": "Remove Assigned Team",
+      "SEND_EMAIL_TRANSCRIPT": "Send an Email Transcript",
+      "MUTE_CONVERSATION": "Mute Conversation",
+      "SNOOZE_CONVERSATION": "Snooze Conversation",
+      "RESOLVE_CONVERSATION": "Resolve Conversation",
+      "SEND_ATTACHMENT": "Send Attachment",
+      "SEND_MESSAGE": "Send a Message",
+      "CHANGE_PRIORITY": "Change Priority",
+      "ADD_PRIVATE_NOTE": "Add a Private Note",
+      "SEND_WEBHOOK_EVENT": "Send Webhook Event"
     }
   }
 }

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -387,7 +387,8 @@
         "LABEL": "Company Name",
         "PLACEHOLDER": "Wayne Enterprises"
       },
-      "SUBMIT": "Submit"
+      "SUBMIT": "Submit",
+      "CANCEL": "Cancel"
     }
   },
   "KEYBOARD_SHORTCUTS": {

app/javascript/dashboard/modules/contact/components/ContactIntro.vue

@@ -1,123 +0,0 @@
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import SocialIcons from 'dashboard/routes/dashboard/conversation/contact/SocialIcons.vue';
-
-export default {
-  components: {
-    Thumbnail,
-    SocialIcons,
-  },
-  props: {
-    contact: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  emits: ['edit', 'message'],
-
-  computed: {
-    additionalAttributes() {
-      return this.contact.additional_attributes || {};
-    },
-    socialProfiles() {
-      const {
-        social_profiles: socialProfiles,
-        screen_name: twitterScreenName,
-      } = this.additionalAttributes;
-
-      return { twitter: twitterScreenName, ...(socialProfiles || {}) };
-    },
-    company() {
-      const { company = {} } = this.contact;
-      return company;
-    },
-  },
-  methods: {
-    onEditClick() {
-      this.$emit('edit');
-    },
-    onNewMessageClick() {
-      this.$emit('message');
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="contact--intro">
-    <Thumbnail
-      :src="contact.thumbnail"
-      size="64px"
-      :username="contact.name"
-      :status="contact.availability_status"
-    />
-
-    <div class="contact--details">
-      <h2 class="text-lg contact--name">
-        {{ contact.name }}
-      </h2>
-      <h3 class="text-base contact--work">
-        {{ contact.title }}
-        <i v-if="company.name" class="i-lucide-circle-minus" />
-        <span class="company-name">{{ company.name }}</span>
-      </h3>
-      <p v-if="additionalAttributes.description" class="contact--bio">
-        {{ additionalAttributes.description }}
-      </p>
-      <SocialIcons :social-profiles="socialProfiles" />
-    </div>
-    <div class="contact-actions">
-      <woot-button
-        class="new-message"
-        size="small expanded"
-        icon="ion-paper-airplane"
-        @click="onNewMessageClick"
-      >
-        {{ $t('CONTACT_PANEL.NEW_MESSAGE') }}
-      </woot-button>
-      <woot-button
-        variant="hollow"
-        size="small expanded"
-        icon="edit"
-        @click="onEditClick"
-      >
-        {{ $t('EDIT_CONTACT.BUTTON_LABEL') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.contact--details {
-  margin-top: var(--space-small);
-}
-
-.contact--work {
-  color: var(--color-body);
-
-  .icon {
-    font-size: var(--font-size-nano);
-    vertical-align: middle;
-  }
-}
-
-.contact--name {
-  text-transform: capitalize;
-  font-weight: var(--font-weight-bold);
-}
-
-.contact--bio {
-  margin: var(--space-smaller) 0 0;
-}
-
-.button.new-message {
-  margin-right: var(--space-small);
-}
-
-.contact-actions {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  margin-top: var(--space-small);
-}
-</style>

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -13,12 +13,14 @@ import {
 } from '../../../helper/AnalyticsHelper/events';
 import MenuItem from '../../../components/widgets/conversation/contextMenu/menuItem.vue';
 import { useTrack } from 'dashboard/composables';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     AddCannedModal,
     MenuItem,
     ContextMenu,
+    NextButton,
   },
   props: {
     message: {
@@ -175,12 +177,12 @@ export default {
       :confirm-text="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.DELETE')"
       :reject-text="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.CANCEL')"
     />
-    <woot-button
+    <NextButton
       v-if="!hideButton"
-      icon="more-vertical"
-      color-scheme="secondary"
-      variant="clear"
-      size="small"
+      ghost
+      slate
+      sm
+      icon="i-lucide-ellipsis-vertical"
       class="invisible group-hover/context-menu:visible"
       @click="handleOpen"
     />

app/javascript/dashboard/routes/dashboard/Dashboard.vue

@@ -1,6 +1,6 @@
 <script>
+import { defineAsyncComponent, ref } from 'vue';
 import { mapGetters } from 'vuex';
-import { defineAsyncComponent } from 'vue';
 
 import NextSidebar from 'next/sidebar/Sidebar.vue';
 import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal.vue';
@@ -8,6 +8,7 @@ import AddAccountModal from 'dashboard/components/layout/sidebarComponents/AddAc
 import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector.vue';
 import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel.vue';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
+import UpgradePage from 'dashboard/routes/dashboard/upgrade/UpgradePage.vue';
 
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAccount } from 'dashboard/composables/useAccount';
@@ -35,8 +36,10 @@ export default {
     AccountSelector,
     AddLabelModal,
     NotificationPanel,
+    UpgradePage,
   },
   setup() {
+    const upgradePageRef = ref(null);
     const { uiSettings, updateUISettings } = useUISettings();
     const { accountId } = useAccount();
 
@@ -44,6 +47,7 @@ export default {
       uiSettings,
       updateUISettings,
       accountId,
+      upgradePageRef,
     };
   },
   data() {
@@ -64,6 +68,16 @@ export default {
     currentRoute() {
       return ' ';
     },
+    showUpgradePage() {
+      return this.upgradePageRef?.shouldShowUpgradePage;
+    },
+    bypassUpgradePage() {
+      return [
+        'billing_settings_index',
+        'settings_inbox_list',
+        'agent_list',
+      ].includes(this.$route.name);
+    },
     isSidebarOpen() {
       const { show_secondary_sidebar: showSecondarySidebar } = this.uiSettings;
       return showSecondarySidebar;
@@ -197,8 +211,25 @@ export default {
       @show-add-label-popup="showAddLabelPopup"
     />
     <main class="flex flex-1 h-full min-h-0 px-0 overflow-hidden">
-      <router-view />
-      <CommandBar />
+      <UpgradePage
+        v-show="showUpgradePage"
+        ref="upgradePageRef"
+        :bypass-upgrade-page="bypassUpgradePage"
+      />
+      <template v-if="!showUpgradePage">
+        <router-view />
+        <CommandBar />
+        <NotificationPanel
+          v-if="isNotificationPanel"
+          @close="closeNotificationPanel"
+        />
+        <woot-modal
+          v-model:show="showAddLabelModal"
+          :on-close="hideAddLabelPopup"
+        >
+          <AddLabelModal @close="hideAddLabelPopup" />
+        </woot-modal>
+      </template>
       <AccountSelector
         :show-account-modal="showAccountModal"
         @close-account-modal="toggleAccountModal"
@@ -213,16 +244,6 @@ export default {
         @close="closeKeyShortcutModal"
         @clickaway="closeKeyShortcutModal"
       />
-      <NotificationPanel
-        v-if="isNotificationPanel"
-        @close="closeNotificationPanel"
-      />
-      <woot-modal
-        v-model:show="showAddLabelModal"
-        :on-close="hideAddLabelPopup"
-      >
-        <AddLabelModal @close="hideAddLabelPopup" />
-      </woot-modal>
     </main>
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue

@@ -1,7 +1,7 @@
 <script>
 import ConversationCard from 'dashboard/components/widgets/conversation/ConversationCard.vue';
 import { mapGetters } from 'vuex';
-import Spinner from 'shared/components/Spinner.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
 export default {
   components: {
@@ -47,28 +47,25 @@ export default {
 </script>
 
 <template>
-  <div class="contact-conversation--panel">
-    <div v-if="!uiFlags.isFetching" class="contact-conversation__wrap">
-      <div
-        v-if="!previousConversations.length"
-        class="no-label-message px-4 p-3"
-      >
-        <span>
-          {{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
-        </span>
-      </div>
-      <div v-else class="contact-conversation--list">
-        <ConversationCard
-          v-for="conversation in previousConversations"
-          :key="conversation.id"
-          :chat="conversation"
-          :hide-inbox-name="false"
-          hide-thumbnail
-          class="compact"
-        />
-      </div>
+  <div v-if="!uiFlags.isFetching" class="">
+    <div v-if="!previousConversations.length" class="no-label-message px-4 p-3">
+      <span>
+        {{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
+      </span>
     </div>
-    <Spinner v-else />
+    <div v-else class="contact-conversation--list">
+      <ConversationCard
+        v-for="conversation in previousConversations"
+        :key="conversation.id"
+        :chat="conversation"
+        :hide-inbox-name="false"
+        hide-thumbnail
+        class="compact"
+      />
+    </div>
+  </div>
+  <div v-else class="flex items-center justify-center py-5">
+    <Spinner />
   </div>
 </template>
 
@@ -79,6 +76,7 @@ export default {
 
 ::v-deep .conversation {
   @apply pr-0;
+
   .conversation--details {
     @apply pl-2;
   }

app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue

@@ -9,12 +9,14 @@ import ConversationLabels from './labels/LabelBox.vue';
 import { CONVERSATION_PRIORITY } from '../../../../shared/constants/messages';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import { useTrack } from 'dashboard/composables';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     ContactDetailsItem,
     MultiselectDropdown,
     ConversationLabels,
+    NextButton,
   },
   props: {
     conversationId: {
@@ -212,15 +214,15 @@ export default {
         :title="$t('CONVERSATION_SIDEBAR.ASSIGNEE_LABEL')"
       >
         <template #button>
-          <woot-button
+          <NextButton
             v-if="showSelfAssign"
-            icon="arrow-right"
-            variant="link"
-            size="small"
+            link
+            xs
+            icon="i-lucide-arrow-right"
+            class="!gap-1"
+            :label="$t('CONVERSATION_SIDEBAR.SELF_ASSIGN')"
             @click="onSelfAssign"
-          >
-            {{ $t('CONVERSATION_SIDEBAR.SELF_ASSIGN') }}
-          </woot-button>
+          />
         </template>
       </ContactDetailsItem>
       <MultiselectDropdown

app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue

@@ -6,12 +6,14 @@ import { useAgentsList } from 'dashboard/composables/useAgentsList';
 
 import ThumbnailGroup from 'dashboard/components/widgets/ThumbnailGroup.vue';
 import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     Spinner,
     ThumbnailGroup,
     MultiselectDropdownItems,
+    NextButton,
   },
   props: {
     conversationId: {
@@ -165,13 +167,14 @@ export default {
             {{ $t('CONVERSATION_PARTICIPANTS.NO_PARTICIPANTS_TEXT') }}
           </p>
         </div>
-        <woot-button
+        <NextButton
           v-tooltip.left="$t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS')"
+          slate
+          ghost
+          sm
+          icon="i-lucide-settings"
+          class="relative -top-1"
           :title="$t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS')"
-          icon="settings"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
           @click="onOpenDropdown"
         />
       </div>
@@ -188,15 +191,15 @@ export default {
       >
         {{ $t('CONVERSATION_PARTICIPANTS.YOU_ARE_WATCHING') }}
       </p>
-      <woot-button
+      <NextButton
         v-else
-        icon="arrow-right"
-        variant="link"
-        size="small"
+        link
+        xs
+        icon="i-lucide-arrow-right"
+        class="!gap-1"
+        :label="$t('CONVERSATION_PARTICIPANTS.WATCH_CONVERSATION')"
         @click="onSelfAssign"
-      >
-        {{ $t('CONVERSATION_PARTICIPANTS.WATCH_CONVERSATION') }}
-      </woot-button>
+      />
     </div>
     <div
       v-on-clickaway="
@@ -213,13 +216,7 @@ export default {
         >
           {{ $t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS') }}
         </h4>
-        <woot-button
-          icon="dismiss"
-          size="tiny"
-          color-scheme="secondary"
-          variant="clear"
-          @click="onCloseDropdown"
-        />
+        <NextButton ghost slate xs icon="i-lucide-x" @click="onCloseDropdown" />
       </div>
       <MultiselectDropdownItems
         :options="agentsList"

app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue

@@ -7,6 +7,7 @@ import { useUISettings } from 'dashboard/composables/useUISettings';
 import Draggable from 'vuedraggable';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import MacroItem from './MacroItem.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 defineProps({
   conversationId: {
@@ -71,9 +72,13 @@ onMounted(() => {
         {{ $t('MACROS.LIST.404') }}
       </p>
       <router-link :to="accountScopedUrl('settings/macros')">
-        <woot-button variant="smooth" icon="add" size="tiny" class="mt-1">
-          {{ $t('MACROS.HEADER_BTN_TXT') }}
-        </woot-button>
+        <NextButton
+          faded
+          xs
+          icon="i-lucide-plus"
+          class="mt-1"
+          :label="$t('MACROS.HEADER_BTN_TXT')"
+        />
       </router-link>
     </div>
     <div

app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue

@@ -53,9 +53,11 @@ const closeMacroPreview = () => {
 
 <template>
   <div
-    class="relative flex items-center justify-between leading-4 rounded-md button secondary clear"
+    class="relative flex items-center justify-between leading-4 rounded-md h-10 pl-3 pr-2"
   >
-    <span class="overflow-hidden whitespace-nowrap text-ellipsis">
+    <span
+      class="overflow-hidden whitespace-nowrap text-ellipsis font-medium text-n-slate-12"
+    >
       {{ macro.name }}
     </span>
     <div class="flex items-center gap-1 justify-end">

app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue

@@ -65,7 +65,7 @@ const resolvedMacro = computed(() => {
         class="absolute -left-[0.21875rem] top-[0.2734375rem] w-2 h-2 rounded-full bg-n-solid-1 border-2 border-solid border-n-weak dark:border-slate-600"
       />
       <p class="mb-1 text-xs text-n-slate-11">
-        {{ action.actionName }}
+        {{ $t(`MACROS.ACTIONS.${action.actionName}`) }}
       </p>
       <p class="text-n-slate-12 text-sm">{{ action.actionValue }}</p>
     </div>

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue

@@ -9,8 +9,12 @@ import { useVuelidate } from '@vuelidate/core';
 import countries from 'shared/constants/countries.js';
 import { isPhoneNumberValid } from 'shared/helpers/Validators';
 import parsePhoneNumber from 'libphonenumber-js';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     contact: {
       type: Object,
@@ -401,16 +405,19 @@ export default {
         />
       </div>
     </div>
-    <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-      <div class="w-full">
-        <woot-submit-button
-          :loading="inProgress"
-          :button-text="$t('CONTACT_FORM.FORM.SUBMIT')"
-        />
-        <button class="button clear" @click.prevent="onCancel">
-          {{ $t('CONTACT_FORM.FORM.CANCEL') }}
-        </button>
-      </div>
+    <div class="flex flex-row justify-start w-full gap-2 px-0 py-2">
+      <NextButton
+        type="submit"
+        :label="$t('CONTACT_FORM.FORM.SUBMIT')"
+        :is-loading="inProgress"
+      />
+      <NextButton
+        faded
+        slate
+        type="reset"
+        :label="$t('CONTACT_FORM.FORM.CANCEL')"
+        @click.prevent="onCancel"
+      />
     </div>
   </form>
 </template>