add Open API v3 developer docs

- Use the housekeeping queue for the `remove_stale_contacts` job
- fix specs

.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

.husky/pre-commit

@@ -4,8 +4,8 @@
 # lint js and vue files
 npx --no-install lint-staged
 
-# lint only staged ruby files
+# lint only staged ruby files that still exist (not deleted)
-git diff --name-only --cached | xargs ls -1 2>/dev/null | grep '\.rb$' | xargs bundle exec rubocop --force-exclusion -a
+git diff --name-only --cached | xargs -I {} sh -c 'test -f "{}" && echo "{}"' | grep '\.rb$' | xargs -I {} bundle exec rubocop --force-exclusion -a "{}" || true
 
 # stage rubocop changes to files
-git diff --name-only --cached | xargs git add
+git diff --name-only --cached | xargs -I {} sh -c 'test -f "{}" && git add "{}"' || true

Gemfile.lock

@@ -485,7 +485,7 @@ GEM
       uri
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
-    net-imap (0.4.19)
+    net-imap (0.4.20)
       date
       net-protocol
     net-pop (0.1.2)
@@ -501,14 +501,14 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.3)
-    nokogiri (1.18.4)
+    nokogiri (1.18.8)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.18.4-arm64-darwin)
+    nokogiri (1.18.8-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.4-x86_64-darwin)
+    nokogiri (1.18.8-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.4-x86_64-linux-gnu)
+    nokogiri (1.18.8-x86_64-linux-gnu)
       racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)

app/builders/campaigns/campaign_conversation_builder.rb

@@ -9,7 +9,7 @@ class Campaigns::CampaignConversationBuilder
       @contact_inbox.lock!
 
       # We won't send campaigns if a conversation is already present
-      raise 'Conversation alread present' if @contact_inbox.reload.conversations.present?
+      raise 'Conversation already present' if @contact_inbox.reload.conversations.present?
 
       @conversation = ::Conversation.create!(conversation_params)
       Messages::MessageBuilder.new(@campaign.sender, @conversation, message_params).perform

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

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

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

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

@@ -37,7 +37,7 @@ class Api::V1::Accounts::AgentBotsController < Api::V1::Accounts::BaseController
   end
 
   def permitted_params
-    params.permit(:name, :description, :outgoing_url, :avatar, :avatar_url, :bot_type, bot_config: [:csml_content])
+    params.permit(:name, :description, :outgoing_url, :avatar, :avatar_url, :bot_type, bot_config: {})
   end
 
   def process_avatar_from_url

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)
+    ).where(contact_id: @contact.id)
-  end
 
-  private
+    # Apply permission-based filtering using the existing service
+    conversations = Conversations::PermissionFilterService.new(
+      conversations,
+      Current.user,
+      Current.account
+    ).perform
 
-  def inbox_ids
+    # Only allow conversations from inboxes the user has access to
-    if Current.user.administrator? || Current.user.agent?
+    inbox_ids = Current.user.assigned_inboxes.pluck(:id)
-      Current.user.assigned_inboxes.pluck(:id)
+    conversations = conversations.where(inbox_id: inbox_ids)
-    else
+
-      []
+    @conversations = conversations.order(last_activity_at: :desc).limit(20)
-    end
   end
 end

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

@@ -163,9 +163,16 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
     @contact.custom_attributes
   end
 
+  def contact_additional_attributes
+    return @contact.additional_attributes.merge(permitted_params[:additional_attributes]) if permitted_params[:additional_attributes]
+
+    @contact.additional_attributes
+  end
+
   def contact_update_params
-    # we want the merged custom attributes not the original one
+    permitted_params.except(:custom_attributes, :avatar_url)
-    permitted_params.except(:custom_attributes, :avatar_url).merge({ custom_attributes: contact_custom_attributes })
+                    .merge({ custom_attributes: contact_custom_attributes })
+                    .merge({ additional_attributes: contact_additional_attributes })
   end
 
   def set_include_contact_inboxes

app/controllers/api/v1/accounts/conversations/messages_controller.rb

@@ -1,4 +1,6 @@
 class Api::V1::Accounts::Conversations::MessagesController < Api::V1::Accounts::Conversations::BaseController
+  before_action :ensure_api_inbox, only: :update
+
   def index
     @messages = message_finder.perform
   end
@@ -11,6 +13,11 @@ class Api::V1::Accounts::Conversations::MessagesController < Api::V1::Accounts::
     render_could_not_create_error(e.message)
   end
 
+  def update
+    Messages::StatusUpdateService.new(message, permitted_params[:status], permitted_params[:external_error]).perform
+    @message = message
+  end
+
   def destroy
     ActiveRecord::Base.transaction do
       message.update!(content: I18n.t('conversations.messages.deleted'), content_type: :text, content_attributes: { deleted: true })
@@ -21,7 +28,9 @@ class Api::V1::Accounts::Conversations::MessagesController < Api::V1::Accounts::
   def retry
     return if message.blank?
 
-    message.update!(status: :sent, content_attributes: {})
+    service = Messages::StatusUpdateService.new(message, 'sent')
+    service.perform
+    message.update!(content_attributes: {})
     ::SendReplyJob.perform_later(message.id)
   rescue StandardError => e
     render_could_not_create_error(e.message)
@@ -56,10 +65,16 @@ class Api::V1::Accounts::Conversations::MessagesController < Api::V1::Accounts::
   end
 
   def permitted_params
-    params.permit(:id, :target_language)
+    params.permit(:id, :target_language, :status, :external_error)
   end
 
   def already_translated_content_available?
     message.translations.present? && message.translations[permitted_params[:target_language]].present?
   end
+
+  # API inbox check
+  def ensure_api_inbox
+    # Only API inboxes can update messages
+    render json: { error: 'Message status update is only allowed for API inboxes' }, status: :forbidden unless @conversation.inbox.api?
+  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/v1/accounts_controller.rb

@@ -44,8 +44,9 @@ class Api::V1::AccountsController < Api::BaseController
   end
 
   def update
-    @account.assign_attributes(account_params.slice(:name, :locale, :domain, :support_email, :auto_resolve_duration))
+    @account.assign_attributes(account_params.slice(:name, :locale, :domain, :support_email))
     @account.custom_attributes.merge!(custom_attributes_params)
+    @account.settings.merge!(settings_params)
     @account.custom_attributes['onboarding_step'] = 'invite_team' if @account.custom_attributes['onboarding_step'] == 'account_update'
     @account.save!
   end
@@ -83,13 +84,17 @@ class Api::V1::AccountsController < Api::BaseController
   end
 
   def account_params
-    params.permit(:account_name, :email, :name, :password, :locale, :domain, :support_email, :auto_resolve_duration, :user_full_name)
+    params.permit(:account_name, :email, :name, :password, :locale, :domain, :support_email, :user_full_name)
   end
 
   def custom_attributes_params
     params.permit(:industry, :company_size, :timezone)
   end
 
+  def settings_params
+    params.permit(:auto_resolve_after, :auto_resolve_message)
+  end
+
   def check_signup_enabled
     raise ActionController::RoutingError, 'Not Found' if GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false') == 'false'
   end

app/controllers/api/v1/widget/campaigns_controller.rb

@@ -2,10 +2,15 @@ class Api::V1::Widget::CampaignsController < Api::V1::Widget::BaseController
   skip_before_action :set_contact
 
   def index
-    @campaigns = @web_widget
+    account = @web_widget.inbox.account
-                 .inbox
+    @campaigns = if account.feature_enabled?('campaigns')
-                 .campaigns
+                   @web_widget
-                 .where(enabled: true, account_id: @web_widget.inbox.account_id)
+                     .inbox
-                 .includes(:sender)
+                     .campaigns
+                     .where(enabled: true, account_id: account.id)
+                     .includes(:sender)
+                 else
+                   []
+                 end
   end
 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?
+    authorize :report, :view?
-
-    raise Pundit::NotAuthorizedError
   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/api/v2/accounts_controller.rb

@@ -54,7 +54,7 @@ class Api::V2::AccountsController < Api::BaseController
   end
 
   def account_params
-    params.permit(:account_name, :email, :name, :password, :locale, :domain, :support_email, :auto_resolve_duration, :user_full_name)
+    params.permit(:account_name, :email, :name, :password, :locale, :domain, :support_email, :user_full_name)
   end
 
   def check_signup_enabled

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

@@ -36,7 +36,7 @@ class DashboardController < ActionController::Base
       'LOGOUT_REDIRECT_LINK',
       'DISABLE_USER_PROFILE_UPDATE',
       'DEPLOYMENT_ENV',
-      'CSML_EDITOR_HOST', 'INSTALLATION_PRICING_PLAN'
+      'INSTALLATION_PRICING_PLAN'
     ).merge(app_config)
   end
 
@@ -65,6 +65,7 @@ class DashboardController < ActionController::Base
       VAPID_PUBLIC_KEY: VapidService.public_key,
       ENABLE_ACCOUNT_SIGNUP: GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false'),
       FB_APP_ID: GlobalConfigService.load('FB_APP_ID', ''),
+      INSTAGRAM_APP_ID: GlobalConfigService.load('INSTAGRAM_APP_ID', ''),
       FACEBOOK_API_VERSION: GlobalConfigService.load('FACEBOOK_API_VERSION', 'v17.0'),
       IS_ENTERPRISE: ChatwootApp.enterprise?,
       AZURE_APP_ID: GlobalConfigService.load('AZURE_APP_ID', ''),

app/controllers/devise_overrides/omniauth_callbacks_controller.rb

@@ -55,7 +55,7 @@ class DeviseOverrides::OmniauthCallbacksController < DeviseTokenAuth::OmniauthCa
 
   def validate_business_account?
     # return true if the user is a business account, false if it is a gmail account
-    auth_hash['info']['email'].exclude?('@gmail.com')
+    auth_hash['info']['email'].downcase.exclude?('@gmail.com')
   end
 
   def create_account_for_user

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

@@ -66,3 +66,5 @@ class SuperAdmin::AccountsController < SuperAdmin::ApplicationController
     # rubocop:enable Rails/I18nLocaleTexts
   end
 end
+
+SuperAdmin::AccountsController.prepend_mod_with('SuperAdmin::AccountsController')

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

@@ -9,10 +9,17 @@ class AccountDashboard < Administrate::BaseDashboard
   # on pages throughout the dashboard.
 
   enterprise_attribute_types = if ChatwootApp.enterprise?
-                                 {
+                                 attributes = {
-                                   limits: Enterprise::AccountLimitsField,
+                                   limits: AccountLimitsField
-                                   all_features: Enterprise::AccountFeaturesField
                                  }
+
+                                 # Only show manually managed features in Chatwoot Cloud deployment
+                                 attributes[:manually_managed_features] = ManuallyManagedFeaturesField if ChatwootApp.chatwoot_cloud?
+
+                                 # Add all_features last so it appears after manually_managed_features
+                                 attributes[:all_features] = AccountFeaturesField
+
+                                 attributes
                                else
                                  {}
                                end
@@ -46,7 +53,14 @@ class AccountDashboard < Administrate::BaseDashboard
 
   # SHOW_PAGE_ATTRIBUTES
   # an array of attributes that will be displayed on the model's show page.
-  enterprise_show_page_attributes = ChatwootApp.enterprise? ? %i[custom_attributes limits all_features] : []
+  enterprise_show_page_attributes = if ChatwootApp.enterprise?
+                                      attrs = %i[custom_attributes limits]
+                                      attrs << :manually_managed_features if ChatwootApp.chatwoot_cloud?
+                                      attrs << :all_features
+                                      attrs
+                                    else
+                                      []
+                                    end
   SHOW_PAGE_ATTRIBUTES = (%i[
     id
     name
@@ -61,7 +75,14 @@ class AccountDashboard < Administrate::BaseDashboard
   # FORM_ATTRIBUTES
   # an array of attributes that will be displayed
   # on the model's form (`new` and `edit`) pages.
-  enterprise_form_attributes = ChatwootApp.enterprise? ? %i[limits all_features] : []
+  enterprise_form_attributes = if ChatwootApp.enterprise?
+                                 attrs = %i[limits]
+                                 attrs << :manually_managed_features if ChatwootApp.chatwoot_cloud?
+                                 attrs << :all_features
+                                 attrs
+                               else
+                                 []
+                               end
   FORM_ATTRIBUTES = (%i[
     name
     locale
@@ -81,7 +102,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
@@ -95,6 +117,11 @@ class AccountDashboard < Administrate::BaseDashboard
   # to prevent an error from being raised (wrong number of arguments)
   # Reference: https://github.com/thoughtbot/administrate/pull/2356/files#diff-4e220b661b88f9a19ac527c50d6f1577ef6ab7b0bed2bfdf048e22e6bfa74a05R204
   def permitted_attributes(action)
-    super + [limits: {}]
+    attrs = super + [limits: {}]
+
+    # Add manually_managed_features to permitted attributes only for Chatwoot Cloud
+    attrs << { manually_managed_features: [] } if ChatwootApp.chatwoot_cloud?
+
+    attrs
   end
 end

app/fields/enterprise/account_features_field.rb

@@ -1,7 +0,0 @@
-require 'administrate/field/base'
-
-class Enterprise::AccountFeaturesField < Administrate::Field::Base
-  def to_s
-    data
-  end
-end

app/finders/conversation_finder.rb

@@ -32,6 +32,7 @@ class ConversationFinder
   def initialize(current_user, params)
     @current_user = current_user
     @current_account = current_user.account
+    @is_admin = current_account.account_users.find_by(user_id: current_user.id)&.administrator?
     @params = params
   end
 
@@ -85,8 +86,19 @@ class ConversationFinder
     @team = current_account.teams.find(params[:team_id]) if params[:team_id]
   end
 
+  def find_conversation_by_inbox
+    @conversations = current_account.conversations
+    @conversations = @conversations.where(inbox_id: @inbox_ids) unless params[:inbox_id].blank? && @is_admin
+  end
+
   def find_all_conversations
-    @conversations = current_account.conversations.where(inbox_id: @inbox_ids)
+    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/helpers/super_admin/account_features_helper.rb

@@ -15,7 +15,7 @@ module SuperAdmin::AccountFeaturesHelper
   end
 
   def self.filter_internal_features(features)
-    return features if GlobalConfig.get_value('DEPLOYMENT_ENV') == 'cloud'
+    return features if ChatwootApp.chatwoot_cloud?
 
     internal_features = account_features.select { |f| f['chatwoot_internal'] }.pluck('name')
     features.except(*internal_features)

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

@@ -1,9 +1,26 @@
+/* global axios */
 import ApiClient from './ApiClient';
 
 class AgentBotsAPI extends ApiClient {
   constructor() {
     super('agent_bots', { accountScoped: true });
   }
+
+  create(data) {
+    return axios.post(this.url, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+    });
+  }
+
+  update(id, data) {
+    return axios.patch(`${this.url}/${id}`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+    });
+  }
+
+  deleteAgentBotAvatar(botId) {
+    return axios.delete(`${this.url}/${botId}/avatar`);
+  }
 }
 
 export default new AgentBotsAPI();

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

@@ -14,6 +14,13 @@ class CaptainAssistant extends ApiClient {
       },
     });
   }
+
+  playground({ assistantId, messageContent, messageHistory }) {
+    return axios.post(`${this.url}/${assistantId}/playground`, {
+      message_content: messageContent,
+      message_history: messageHistory,
+    });
+  }
 }
 
 export default new CaptainAssistant();

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/_next-colors.scss

@@ -29,6 +29,19 @@
     --iris-11: 87 83 198;
     --iris-12: 39 41 98;
 
+    --blue-1: 251 253 255;
+    --blue-2: 245 249 255;
+    --blue-3: 233 243 255;
+    --blue-4: 218 236 255;
+    --blue-5: 201 226 255;
+    --blue-6: 181 213 255;
+    --blue-7: 155 195 252;
+    --blue-8: 117 171 247;
+    --blue-9: 39 129 246;
+    --blue-10: 16 115 233;
+    --blue-11: 8 109 224;
+    --blue-12: 11 50 101;
+
     --ruby-1: 255 252 253;
     --ruby-2: 255 247 248;
     --ruby-3: 254 234 237;
@@ -131,6 +144,19 @@
     --iris-11: 158 177 255;
     --iris-12: 224 223 254;
 
+    --blue-1: 10 17 28;
+    --blue-2: 15 24 38;
+    --blue-3: 15 39 72;
+    --blue-4: 10 49 99;
+    --blue-5: 18 61 117;
+    --blue-6: 29 84 134;
+    --blue-7: 40 89 156;
+    --blue-8: 48 106 186;
+    --blue-9: 39 129 246;
+    --blue-10: 21 116 231;
+    --blue-11: 126 182 255;
+    --blue-12: 205 227 255;
+
     --ruby-1: 25 17 19;
     --ruby-2: 30 21 23;
     --ruby-3: 58 20 30;

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/Accordion/Accordion.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  title: { type: String, required: true },
+  isOpen: { type: Boolean, default: false },
+});
+
+const isExpanded = ref(props.isOpen);
+
+const toggleAccordion = () => {
+  isExpanded.value = !isExpanded.value;
+};
+
+watch(
+  () => props.isOpen,
+  newValue => {
+    isExpanded.value = newValue;
+  }
+);
+</script>
+
+<template>
+  <div class="border rounded-lg border-n-slate-4">
+    <button
+      class="flex items-center justify-between w-full p-4 text-left"
+      @click="toggleAccordion"
+    >
+      <span class="text-sm font-medium text-n-slate-12">{{ title }}</span>
+      <span
+        class="w-5 h-5 transition-transform duration-200 i-lucide-chevron-down"
+        :class="{ 'rotate-180': isExpanded }"
+      />
+    </button>
+    <div v-if="isExpanded" class="p-4 pt-0">
+      <slot />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue

@@ -51,6 +51,7 @@ defineExpose({ dialogRef, contactsFormRef, onSuccess });
         <Button
           :label="t('DIALOG.BUTTONS.CANCEL')"
           variant="link"
+          type="reset"
           class="h-10 hover:!no-underline hover:text-n-brand"
           @click="closeDialog"
         />

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

@@ -31,10 +31,6 @@ const sortMenus = [
     label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.EMAIL'),
     value: 'email',
   },
-  {
-    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.PHONE_NUMBER'),
-    value: 'phone_number',
-  },
   {
     label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.COMPANY'),
     value: 'company_name',

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue

@@ -87,8 +87,10 @@ useKeyboardEvents(keyboardEvents);
       <ContactNoteItem
         v-for="note in notes"
         :key="note.id"
+        class="mx-6 py-4"
         :note="note"
         :written-by="getWrittenBy(note)"
+        allow-delete
         @delete="onDelete"
       />
     </div>

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue

@@ -1,6 +1,8 @@
 <script setup>
+import { useTemplateRef, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { dynamicTime } from 'shared/helpers/timeHelper';
+import { useToggle } from '@vueuse/core';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -14,39 +16,63 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  allowDelete: {
+    type: Boolean,
+    default: false,
+  },
+  collapsible: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['delete']);
-
+const noteContentRef = useTemplateRef('noteContentRef');
+const needsCollapse = ref(false);
+const [isExpanded, toggleExpanded] = useToggle();
 const { t } = useI18n();
 const { formatMessage } = useMessageFormatter();
 
 const handleDelete = () => {
   emit('delete', props.note.id);
 };
+
+onMounted(() => {
+  if (props.collapsible) {
+    // Check if content height exceeds approximately 4 lines
+    // Assuming line height is ~1.625 and font size is ~14px
+    const threshold = 14 * 1.625 * 4; // ~84px
+    needsCollapse.value = noteContentRef.value?.clientHeight > threshold;
+  }
+});
 </script>
 
 <template>
-  <div
+  <div class="flex flex-col gap-2 border-b border-n-strong group/note">
-    class="flex flex-col gap-2 py-2 mx-6 border-b border-n-strong group/note"
+    <div class="flex items-center justify-between gap-2">
-  >
+      <div class="flex items-center gap-1.5 min-w-0">
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-1.5 py-2.5 min-w-0">
         <Avatar
           :name="note?.user?.name || 'Bot'"
-          :src="note?.user?.thumbnail || '/assets/images/chatwoot_bot.png'"
+          :src="
+            note?.user?.name
+              ? note?.user?.thumbnail
+              : '/assets/images/chatwoot_bot.png'
+          "
           :size="16"
           rounded-full
         />
         <div class="min-w-0 truncate">
           <span class="inline-flex items-center gap-1 text-sm text-n-slate-11">
-            <span class="font-medium">{{ writtenBy }}</span>
+            <span class="font-medium text-n-slate-12">{{ writtenBy }}</span>
             {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.WROTE') }}
-            <span class="font-medium">{{ dynamicTime(note.createdAt) }}</span>
+            <span class="font-medium text-n-slate-12">
+              {{ dynamicTime(note.createdAt) }}
+            </span>
           </span>
         </div>
       </div>
       <Button
+        v-if="allowDelete"
         variant="faded"
         color="ruby"
         size="xs"
@@ -56,8 +82,28 @@ const handleDelete = () => {
       />
     </div>
     <p
+      ref="noteContentRef"
       v-dompurify-html="formatMessage(note.content || '')"
-      class="mb-0 prose-sm prose-p:mb-1 prose-p:mt-0 prose-ul:mb-1 prose-ul:mt-0 text-n-slate-12"
+      class="mb-0 prose-sm prose-p:text-sm prose-p:leading-relaxed prose-p:mb-1 prose-p:mt-0 prose-ul:mb-1 prose-ul:mt-0 text-n-slate-12"
+      :class="{
+        'line-clamp-4': collapsible && !isExpanded && needsCollapse,
+      }"
     />
+    <p v-if="collapsible && needsCollapse">
+      <Button
+        variant="faded"
+        color="blue"
+        size="xs"
+        :icon="isExpanded ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+        @click="() => toggleExpanded()"
+      >
+        <template v-if="isExpanded">
+          {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.COLLAPSE') }}
+        </template>
+        <template v-else>
+          {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.EXPAND') }}
+        </template>
+      </Button>
+    </p>
   </div>
 </template>

app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue

@@ -7,8 +7,8 @@ import { useStore, useStoreGetters } from 'dashboard/composables/store';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
+import { required, minLength, helpers } from '@vuelidate/validators';
-import { shouldBeUrl } from 'shared/helpers/Validators';
+import { shouldBeUrl, isValidSlug } from 'shared/helpers/Validators';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
@@ -61,7 +61,16 @@ const liveChatWidgets = computed(() => {
 
 const rules = {
   name: { required, minLength: minLength(2) },
-  slug: { required },
+  slug: {
+    required: helpers.withMessage(
+      () => t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.ERROR'),
+      required
+    ),
+    isValidSlug: helpers.withMessage(
+      () => t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.FORMAT_ERROR'),
+      isValidSlug
+    ),
+  },
   homePageLink: { shouldBeUrl },
 };
 
@@ -71,9 +80,9 @@ const nameError = computed(() =>
   v$.value.name.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.ERROR') : ''
 );
 
-const slugError = computed(() =>
+const slugError = computed(() => {
-  v$.value.slug.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.ERROR') : ''
+  return v$.value.slug.$errors[0]?.$message || '';
-);
+});
 
 const homePageLinkError = computed(() =>
   v$.value.homePageLink.$error

app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue

@@ -6,8 +6,9 @@ import { useAlert, useTrack } from 'dashboard/composables';
 import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import { convertToCategorySlug } from 'dashboard/helper/commons.js';
 import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
+import { required, minLength, helpers } from '@vuelidate/validators';
 import { buildPortalURL } from 'dashboard/helper/portalHelper';
+import { isValidSlug } from 'shared/helpers/Validators';
 
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
@@ -31,7 +32,16 @@ const state = reactive({
 
 const rules = {
   name: { required, minLength: minLength(2) },
-  slug: { required },
+  slug: {
+    required: helpers.withMessage(
+      () => t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.ERROR'),
+      required
+    ),
+    isValidSlug: helpers.withMessage(
+      () => t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.FORMAT_ERROR'),
+      isValidSlug
+    ),
+  },
 };
 
 const v$ = useVuelidate(rules, state);
@@ -40,9 +50,9 @@ const nameError = computed(() =>
   v$.value.name.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.ERROR') : ''
 );
 
-const slugError = computed(() =>
+const slugError = computed(() => {
-  v$.value.slug.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.ERROR') : ''
+  return v$.value.slug.$errors[0]?.$message || '';
-);
+});
 
 const isSubmitDisabled = computed(() => v$.value.$invalid);
 
@@ -131,6 +141,7 @@ defineExpose({ dialogRef });
         :message="
           nameError || t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.MESSAGE')
         "
+        @blur="v$.name.$touch()"
       />
       <Input
         id="portal-slug"
@@ -140,6 +151,8 @@ defineExpose({ dialogRef });
         :label="t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.LABEL')"
         :message-type="slugError ? 'error' : 'info'"
         :message="slugError || buildPortalURL(state.slug)"
+        @input="v$.slug.$touch()"
+        @blur="v$.slug.$touch()"
       />
     </div>
   </Dialog>

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/captain/PageLayout.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import { usePolicy } from 'dashboard/composables/usePolicy';
 import Button from 'dashboard/components-next/button/Button.vue';
+import BackButton from 'dashboard/components/widgets/BackButton.vue';
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import Policy from 'dashboard/components/policy.vue';
@@ -23,6 +24,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  backUrl: {
+    type: [String, Object],
+    default: '',
+  },
   buttonPolicy: {
     type: Array,
     default: () => [],
@@ -39,6 +44,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  showKnowMore: {
+    type: Boolean,
+    default: true,
+  },
   isEmpty: {
     type: Boolean,
     default: false,
@@ -73,19 +82,23 @@ const handlePageChange = event => {
           class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
         >
           <div class="flex gap-4 items-center">
+            <BackButton v-if="backUrl" :to="backUrl" />
             <slot name="headerTitle">
               <span class="text-xl font-medium text-n-slate-12">
                 {{ headerTitle }}
               </span>
             </slot>
-            <div v-if="!isEmpty" class="flex items-center gap-2">
+            <div
+              v-if="!isEmpty && showKnowMore"
+              class="flex items-center gap-2"
+            >
               <div class="w-0.5 h-4 rounded-2xl bg-n-weak" />
               <slot name="knowMore" />
             </div>
           </div>
 
           <div
-            v-if="!showPaywall"
+            v-if="!showPaywall && buttonLabel"
             v-on-clickaway="() => emit('close')"
             class="relative group/campaign-button"
           >
@@ -104,7 +117,7 @@ const handlePageChange = event => {
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto xl:px-0">
-      <div class="w-full max-w-[60rem] mx-auto py-4">
+      <div class="w-full max-w-[60rem] h-full mx-auto py-4">
         <slot v-if="!showPaywall" name="controls" />
         <div
           v-if="isFetching"

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

@@ -76,9 +76,12 @@ const handleAction = ({ action, value }) => {
 <template>
   <CardLayout>
     <div class="flex justify-between w-full gap-1">
-      <span class="text-base text-n-slate-12 line-clamp-1">
+      <router-link
+        :to="{ name: 'captain_assistants_edit', params: { assistantId: id } }"
+        class="text-base text-n-slate-12 line-clamp-1 hover:underline transition-colors"
+      >
         {{ name }}
-      </span>
+      </router-link>
       <div class="flex items-center gap-2">
         <div
           v-on-clickaway="() => toggleDropdown(false)"

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

@@ -0,0 +1,111 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import MessageList from './MessageList.vue';
+import CaptainAssistant from 'dashboard/api/captain/assistant';
+
+const { assistantId } = defineProps({
+  assistantId: {
+    type: Number,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+const messages = ref([]);
+const newMessage = ref('');
+const isLoading = ref(false);
+
+const formatMessagesForApi = () => {
+  return messages.value.map(message => ({
+    role: message.sender,
+    content: message.content,
+  }));
+};
+
+const resetConversation = () => {
+  messages.value = [];
+  newMessage.value = '';
+};
+
+const sendMessage = async () => {
+  if (!newMessage.value.trim() || isLoading.value) return;
+
+  const userMessage = {
+    content: newMessage.value,
+    sender: 'user',
+    timestamp: new Date().toISOString(),
+  };
+  messages.value.push(userMessage);
+  const currentMessage = newMessage.value;
+  newMessage.value = '';
+
+  try {
+    isLoading.value = true;
+    const { data } = await CaptainAssistant.playground({
+      assistantId,
+      messageContent: currentMessage,
+      messageHistory: formatMessagesForApi(),
+    });
+
+    messages.value.push({
+      content: data.response,
+      sender: 'assistant',
+      timestamp: new Date().toISOString(),
+    });
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Error getting assistant response:', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+</script>
+
+<template>
+  <div
+    class="flex flex-col h-full rounded-lg p-4 border border-n-slate-4 text-n-slate-11"
+  >
+    <div class="mb-4">
+      <div class="flex justify-between items-center mb-1">
+        <h3 class="text-lg font-medium">
+          {{ t('CAPTAIN.PLAYGROUND.HEADER') }}
+        </h3>
+        <NextButton
+          ghost
+          size="small"
+          icon="i-lucide-rotate-ccw"
+          @click="resetConversation"
+        />
+      </div>
+      <p class="text-sm text-n-slate-11">
+        {{ t('CAPTAIN.PLAYGROUND.DESCRIPTION') }}
+      </p>
+    </div>
+
+    <MessageList :messages="messages" :is-loading="isLoading" />
+
+    <div
+      class="flex items-center bg-n-solid-1 outline outline-n-container rounded-lg p-3"
+    >
+      <input
+        v-model="newMessage"
+        class="flex-1 bg-transparent border-none focus:outline-none text-sm mb-0"
+        :placeholder="t('CAPTAIN.PLAYGROUND.MESSAGE_PLACEHOLDER')"
+        @keyup.enter="sendMessage"
+      />
+      <NextButton
+        ghost
+        size="small"
+        :disabled="!newMessage.trim()"
+        icon="i-lucide-send"
+        @click="sendMessage"
+      />
+    </div>
+
+    <p class="text-xs text-n-slate-11 pt-2 text-center">
+      {{ t('CAPTAIN.PLAYGROUND.CREDIT_NOTE') }}
+    </p>
+  </div>
+</template>

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

@@ -0,0 +1,91 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { ref, watch, nextTick } from 'vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+
+const props = defineProps({
+  messages: {
+    type: Array,
+    required: true,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const messageContainer = ref(null);
+
+const { t } = useI18n();
+const { formatMessage } = useMessageFormatter();
+
+const isUserMessage = sender => sender === 'user';
+
+const getMessageAlignment = sender =>
+  isUserMessage(sender) ? 'justify-end' : 'justify-start';
+
+const getMessageDirection = sender =>
+  isUserMessage(sender) ? 'flex-row-reverse' : 'flex-row';
+
+const getAvatarName = sender =>
+  isUserMessage(sender)
+    ? t('CAPTAIN.PLAYGROUND.USER')
+    : t('CAPTAIN.PLAYGROUND.ASSISTANT');
+
+const getMessageStyle = sender =>
+  isUserMessage(sender)
+    ? 'bg-n-strong text-n-white'
+    : 'bg-n-solid-iris text-n-slate-12';
+
+const scrollToBottom = async () => {
+  await nextTick();
+  if (messageContainer.value) {
+    messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
+  }
+};
+
+watch(() => props.messages.length, scrollToBottom);
+</script>
+
+<template>
+  <div ref="messageContainer" class="flex-1 overflow-y-auto mb-4 space-y-2">
+    <div
+      v-for="(message, index) in messages"
+      :key="index"
+      class="flex"
+      :class="getMessageAlignment(message.sender)"
+    >
+      <div
+        class="flex items-start gap-1.5"
+        :class="getMessageDirection(message.sender)"
+      >
+        <Avatar :name="getAvatarName(message.sender)" rounded-full :size="24" />
+        <div
+          class="max-w-[80%] rounded-lg p-3 text-sm"
+          :class="getMessageStyle(message.sender)"
+        >
+          <div class="break-words" v-html="formatMessage(message.content)" />
+        </div>
+      </div>
+    </div>
+    <div v-if="isLoading" class="flex justify-start">
+      <div class="flex items-start gap-1.5">
+        <Avatar :name="getAvatarName('assistant')" rounded-full :size="24" />
+        <div
+          class="max-w-sm rounded-lg p-3 text-sm bg-n-solid-iris text-n-slate-12"
+        >
+          <div class="flex gap-1">
+            <div class="w-2 h-2 rounded-full bg-n-iris-10 animate-bounce" />
+            <div
+              class="w-2 h-2 rounded-full bg-n-iris-10 animate-bounce [animation-delay:0.2s]"
+            />
+            <div
+              class="w-2 h-2 rounded-full bg-n-iris-10 animate-bounce [animation-delay:0.4s]"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/assistant/EditAssistantForm.vue

@@ -0,0 +1,306 @@
+<script setup>
+import { reactive, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+import Accordion from 'dashboard/components-next/Accordion/Accordion.vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    required: true,
+    validator: value => ['edit', 'create'].includes(value),
+  },
+  assistant: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['submit']);
+
+const { t } = useI18n();
+
+const formState = {
+  uiFlags: useMapGetter('captainAssistants/getUIFlags'),
+};
+
+const initialState = {
+  name: '',
+  description: '',
+  productName: '',
+  welcomeMessage: '',
+  handoffMessage: '',
+  resolutionMessage: '',
+  instructions: '',
+  features: {
+    conversationFaqs: false,
+    memories: false,
+  },
+};
+
+const state = reactive({ ...initialState });
+
+const validationRules = {
+  name: { required, minLength: minLength(1) },
+  description: { required, minLength: minLength(1) },
+  productName: { required, minLength: minLength(1) },
+  welcomeMessage: { minLength: minLength(1) },
+  handoffMessage: { minLength: minLength(1) },
+  resolutionMessage: { minLength: minLength(1) },
+  instructions: { minLength: minLength(1) },
+};
+
+const v$ = useVuelidate(validationRules, state);
+
+const isLoading = computed(() => formState.uiFlags.value.creatingItem);
+
+const getErrorMessage = field => {
+  return v$.value[field].$error ? v$.value[field].$errors[0].$message : '';
+};
+
+const formErrors = computed(() => ({
+  name: getErrorMessage('name'),
+  description: getErrorMessage('description'),
+  productName: getErrorMessage('productName'),
+  welcomeMessage: getErrorMessage('welcomeMessage'),
+  handoffMessage: getErrorMessage('handoffMessage'),
+  resolutionMessage: getErrorMessage('resolutionMessage'),
+  instructions: getErrorMessage('instructions'),
+}));
+
+const updateStateFromAssistant = assistant => {
+  const { config = {} } = assistant;
+  state.name = assistant.name;
+  state.description = assistant.description;
+  state.productName = config.product_name;
+  state.welcomeMessage = config.welcome_message;
+  state.handoffMessage = config.handoff_message;
+  state.resolutionMessage = config.resolution_message;
+  state.instructions = config.instructions;
+  state.features = {
+    conversationFaqs: config.feature_faq || false,
+    memories: config.feature_memory || false,
+  };
+};
+
+const handleBasicInfoUpdate = async () => {
+  const result = await Promise.all([
+    v$.value.name.$validate(),
+    v$.value.description.$validate(),
+    v$.value.productName.$validate(),
+  ]).then(results => results.every(Boolean));
+  if (!result) return;
+
+  const payload = {
+    name: state.name,
+    description: state.description,
+    product_name: state.productName,
+  };
+
+  emit('submit', payload);
+};
+
+const handleSystemMessagesUpdate = async () => {
+  const result = await Promise.all([
+    v$.value.welcomeMessage.$validate(),
+    v$.value.handoffMessage.$validate(),
+    v$.value.resolutionMessage.$validate(),
+  ]).then(results => results.every(Boolean));
+  if (!result) return;
+
+  const payload = {
+    config: {
+      ...props.assistant.config,
+      welcome_message: state.welcomeMessage,
+      handoff_message: state.handoffMessage,
+      resolution_message: state.resolutionMessage,
+    },
+  };
+
+  emit('submit', payload);
+};
+
+const handleInstructionsUpdate = async () => {
+  const result = await v$.value.instructions.$validate();
+  if (!result) return;
+
+  const payload = {
+    config: {
+      ...props.assistant.config,
+      instructions: state.instructions,
+    },
+  };
+
+  emit('submit', payload);
+};
+
+const handleFeaturesUpdate = () => {
+  const payload = {
+    config: {
+      ...props.assistant.config,
+      feature_faq: state.features.conversationFaqs,
+      feature_memory: state.features.memories,
+    },
+  };
+
+  emit('submit', payload);
+};
+
+watch(
+  () => props.assistant,
+  newAssistant => {
+    if (props.mode === 'edit' && newAssistant) {
+      updateStateFromAssistant(newAssistant);
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+    <!-- Basic Information Section -->
+    <Accordion
+      :title="t('CAPTAIN.ASSISTANTS.FORM.SECTIONS.BASIC_INFO')"
+      is-open
+    >
+      <div class="flex flex-col gap-4 pt-4">
+        <Input
+          v-model="state.name"
+          :label="t('CAPTAIN.ASSISTANTS.FORM.NAME.LABEL')"
+          :placeholder="t('CAPTAIN.ASSISTANTS.FORM.NAME.PLACEHOLDER')"
+          :message="formErrors.name"
+          :message-type="formErrors.name ? 'error' : 'info'"
+        />
+
+        <Editor
+          v-model="state.description"
+          :label="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.LABEL')"
+          :placeholder="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.PLACEHOLDER')"
+          :message="formErrors.description"
+          :message-type="formErrors.description ? 'error' : 'info'"
+        />
+
+        <Input
+          v-model="state.productName"
+          :label="t('CAPTAIN.ASSISTANTS.FORM.PRODUCT_NAME.LABEL')"
+          :placeholder="t('CAPTAIN.ASSISTANTS.FORM.PRODUCT_NAME.PLACEHOLDER')"
+          :message="formErrors.productName"
+          :message-type="formErrors.productName ? 'error' : 'info'"
+        />
+
+        <div class="flex justify-end">
+          <Button
+            size="small"
+            :loading="isLoading"
+            @click="handleBasicInfoUpdate"
+          >
+            {{ t('CAPTAIN.ASSISTANTS.FORM.UPDATE') }}
+          </Button>
+        </div>
+      </div>
+    </Accordion>
+
+    <!-- Instructions Section -->
+    <Accordion :title="t('CAPTAIN.ASSISTANTS.FORM.SECTIONS.INSTRUCTIONS')">
+      <div class="flex flex-col gap-4 pt-4">
+        <Editor
+          v-model="state.instructions"
+          :placeholder="t('CAPTAIN.ASSISTANTS.FORM.INSTRUCTIONS.PLACEHOLDER')"
+          :message="formErrors.instructions"
+          :max-length="20000"
+          :message-type="formErrors.instructions ? 'error' : 'info'"
+        />
+
+        <div class="flex justify-end">
+          <Button
+            size="small"
+            :loading="isLoading"
+            :label="t('CAPTAIN.ASSISTANTS.FORM.UPDATE')"
+            @click="handleInstructionsUpdate"
+          />
+        </div>
+      </div>
+    </Accordion>
+
+    <!-- Greeting Messages Section -->
+    <Accordion :title="t('CAPTAIN.ASSISTANTS.FORM.SECTIONS.SYSTEM_MESSAGES')">
+      <div class="flex flex-col gap-4 pt-4">
+        <Editor
+          v-model="state.handoffMessage"
+          :label="t('CAPTAIN.ASSISTANTS.FORM.HANDOFF_MESSAGE.LABEL')"
+          :placeholder="
+            t('CAPTAIN.ASSISTANTS.FORM.HANDOFF_MESSAGE.PLACEHOLDER')
+          "
+          :message="formErrors.handoffMessage"
+          :message-type="formErrors.handoffMessage ? 'error' : 'info'"
+        />
+
+        <Editor
+          v-model="state.resolutionMessage"
+          :label="t('CAPTAIN.ASSISTANTS.FORM.RESOLUTION_MESSAGE.LABEL')"
+          :placeholder="
+            t('CAPTAIN.ASSISTANTS.FORM.RESOLUTION_MESSAGE.PLACEHOLDER')
+          "
+          :message="formErrors.resolutionMessage"
+          :message-type="formErrors.resolutionMessage ? 'error' : 'info'"
+        />
+
+        <div class="flex justify-end">
+          <Button
+            size="small"
+            :loading="isLoading"
+            :label="t('CAPTAIN.ASSISTANTS.FORM.UPDATE')"
+            @click="handleSystemMessagesUpdate"
+          />
+        </div>
+      </div>
+    </Accordion>
+
+    <!-- Features Section -->
+    <Accordion :title="t('CAPTAIN.ASSISTANTS.FORM.SECTIONS.FEATURES')">
+      <div class="flex flex-col gap-4 pt-4">
+        <div class="flex flex-col gap-2">
+          <label class="text-sm font-medium text-n-slate-12">
+            {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.TITLE') }}
+          </label>
+          <div class="flex flex-col gap-2">
+            <label class="flex items-center gap-2">
+              <input
+                v-model="state.features.conversationFaqs"
+                type="checkbox"
+                class="form-checkbox"
+              />
+              {{
+                t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CONVERSATION_FAQS')
+              }}
+            </label>
+            <label class="flex items-center gap-2">
+              <input
+                v-model="state.features.memories"
+                type="checkbox"
+                class="form-checkbox"
+              />
+              {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_MEMORIES') }}
+            </label>
+          </div>
+        </div>
+
+        <div class="flex justify-end">
+          <Button
+            size="small"
+            :loading="isLoading"
+            :label="t('CAPTAIN.ASSISTANTS.FORM.UPDATE')"
+            @click="handleFeaturesUpdate"
+          />
+        </div>
+      </div>
+    </Accordion>
+  </form>
+</template>

app/javascript/dashboard/components-next/copilot/Copilot.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { nextTick, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useTrack } from 'dashboard/composables';
 import { COPILOT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 
@@ -39,6 +40,8 @@ const props = defineProps({
 
 const emit = defineEmits(['sendMessage', 'reset', 'setAssistant']);
 
+const { t } = useI18n();
+
 const COPILOT_USER_ROLES = ['assistant', 'system'];
 
 const sendMessage = message => {
@@ -47,7 +50,7 @@ const sendMessage = message => {
 };
 
 const useSuggestion = opt => {
-  emit('sendMessage', opt.prompt);
+  emit('sendMessage', t(opt.prompt));
   useTrack(COPILOT_EVENTS.SEND_SUGGESTED);
 };
 
@@ -66,16 +69,16 @@ const scrollToBottom = async () => {
 
 const promptOptions = [
   {
-    label: 'Summarize this conversation',
+    label: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.LABEL',
-    prompt: `Summarize the key points discussed between the customer and the support agent, including the customer's concerns, questions, and the solutions or responses provided by the support agent`,
+    prompt: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.CONTENT',
   },
   {
-    label: 'Suggest an answer',
+    label: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.LABEL',
-    prompt: `Analyze the customer’s inquiry, and draft a response that effectively addresses their concerns or questions. Ensure the reply is clear, concise, and provides helpful information.`,
+    prompt: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.CONTENT',
   },
   {
-    label: 'Rate this conversation',
+    label: 'CAPTAIN.COPILOT.PROMPTS.RATE.LABEL',
-    prompt: `Review the conversation to see how well it meets the customer’s needs. Share a rating out of 5 based on tone, clarity, and effectiveness.`,
+    prompt: 'CAPTAIN.COPILOT.PROMPTS.RATE.CONTENT',
   },
 ];
 
@@ -89,7 +92,7 @@ watch(
 </script>
 
 <template>
-  <div class="flex flex-col h-full text-sm leading-6 tracking-tight">
+  <div class="flex flex-col h-full text-sm leading-6 tracking-tight w-full">
     <div ref="chatContainer" class="flex-1 px-4 py-4 space-y-6 overflow-y-auto">
       <template v-for="message in messages" :key="message.id">
         <CopilotAgentMessage
@@ -121,7 +124,7 @@ watch(
           class="px-2 py-1 rounded-md border border-n-weak bg-n-slate-2 text-n-slate-11 flex items-center gap-1"
           @click="() => useSuggestion(prompt)"
         >
-          <span>{{ prompt.label }}</span>
+          <span>{{ t(prompt.label) }}</span>
           <Icon icon="i-lucide-chevron-right" />
         </button>
       </div>

app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue

@@ -33,6 +33,8 @@ const insertIntoRichEditor = computed(() => {
   );
 });
 
+const hasEmptyMessageContent = computed(() => !props.message?.content);
+
 const useCopilotResponse = () => {
   if (insertIntoRichEditor.value) {
     emitter.emit(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, props.message?.content);
@@ -53,9 +55,17 @@ const useCopilotResponse = () => {
     />
     <div class="flex flex-col gap-1 text-n-slate-12">
       <div class="font-medium">{{ $t('CAPTAIN.NAME') }}</div>
-      <div v-dompurify-html="messageContent" class="prose-sm break-words" />
+      <span v-if="hasEmptyMessageContent" class="text-n-ruby-11">
+        {{ $t('CAPTAIN.COPILOT.EMPTY_MESSAGE') }}
+      </span>
+      <div
+        v-else
+        v-dompurify-html="messageContent"
+        class="prose-sm break-words"
+      />
       <div class="flex flex-row mt-1">
         <Button
+          v-if="!hasEmptyMessageContent"
           :label="$t('CAPTAIN.COPILOT.USE')"
           faded
           sm

app/javascript/dashboard/components-next/dialog/Dialog.vue

@@ -125,7 +125,10 @@ defineExpose({ open, close });
           <slot />
           <!-- Dialog content will be injected here -->
           <slot name="footer">
-            <div class="flex items-center justify-between w-full gap-3">
+            <div
+              v-if="showCancelButton || showConfirmButton"
+              class="flex items-center justify-between w-full gap-3"
+            >
               <Button
                 v-if="showCancelButton"
                 variant="faded"

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/input/DurationInput.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { computed, ref } from 'vue';
+import Input from './Input.vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  min: { type: Number, default: 0 },
+  max: { type: Number, default: Infinity },
+  disabled: { type: Boolean, default: false },
+});
+
+const { t } = useI18n();
+const duration = defineModel('modelValue', { type: Number, default: null });
+
+const UNIT_TYPES = {
+  MINUTES: 'minutes',
+  HOURS: 'hours',
+  DAYS: 'days',
+};
+const unit = ref(UNIT_TYPES.MINUTES);
+
+const transformedValue = computed({
+  get() {
+    if (unit.value === UNIT_TYPES.MINUTES) return duration.value;
+    if (unit.value === UNIT_TYPES.HOURS) return Math.floor(duration.value / 60);
+    if (unit.value === UNIT_TYPES.DAYS)
+      return Math.floor(duration.value / 24 / 60);
+
+    return 0;
+  },
+  set(newValue) {
+    let minuteValue;
+    if (unit.value === UNIT_TYPES.MINUTES) {
+      minuteValue = Math.floor(newValue);
+    } else if (unit.value === UNIT_TYPES.HOURS) {
+      minuteValue = Math.floor(newValue * 60);
+    } else if (unit.value === UNIT_TYPES.DAYS) {
+      minuteValue = Math.floor(newValue * 24 * 60);
+    }
+
+    duration.value = Math.min(Math.max(minuteValue, props.min), props.max);
+  },
+});
+</script>
+
+<template>
+  <Input
+    v-model="transformedValue"
+    type="number"
+    autocomplete="off"
+    :disabled="disabled"
+    :placeholder="t('DURATION_INPUT.PLACEHOLDER')"
+    class="flex-grow w-full disabled:"
+  />
+  <select
+    v-model="unit"
+    :disabled="disabled"
+    class="mb-0 text-sm disabled:outline-n-weak disabled:opacity-40"
+  >
+    <option :value="UNIT_TYPES.MINUTES">
+      {{ t('DURATION_INPUT.MINUTES') }}
+    </option>
+    <option :value="UNIT_TYPES.HOURS">{{ t('DURATION_INPUT.HOURS') }}</option>
+    <option :value="UNIT_TYPES.DAYS">{{ t('DURATION_INPUT.DAYS') }}</option>
+  </select>
+</template>

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

@@ -117,7 +117,7 @@ const props = defineProps({
   },
   conversationId: { type: Number, required: true },
   createdAt: { type: Number, required: true }, // eslint-disable-line vue/no-unused-properties
-  currentUserId: { type: Number, required: true },
+  currentUserId: { type: Number, required: true }, // eslint-disable-line vue/no-unused-properties
   groupWithNext: { type: Boolean, default: false },
   inboxId: { type: Number, default: null }, // eslint-disable-line vue/no-unused-properties
   inboxSupportsReplyTo: { type: Object, default: () => ({}) },
@@ -173,7 +173,10 @@ const variant = computed(() => {
   return variants[props.messageType] || MESSAGE_VARIANTS.USER;
 });
 
-const isMyMessage = computed(() => {
+const isBotOrAgentMessage = computed(() => {
+  if (props.messageType === MESSAGE_TYPES.ACTIVITY) {
+    return false;
+  }
   // if an outgoing message is still processing, then it's definitely a
   // message sent by the current user
   if (
@@ -186,13 +189,10 @@ const isMyMessage = computed(() => {
   const senderType = props.senderType ?? props.sender?.type;
 
   if (!senderType || !senderId) {
-    return false;
+    return true;
   }
 
-  return (
+  return senderType.toLowerCase() === SENDER_TYPES.USER.toLowerCase();
-    senderType.toLowerCase() === SENDER_TYPES.USER.toLowerCase() &&
-    props.currentUserId === senderId
-  );
 });
 
 /**
@@ -200,7 +200,7 @@ const isMyMessage = computed(() => {
  * @returns {import('vue').ComputedRef<'left'|'right'|'center'>} The computed orientation
  */
 const orientation = computed(() => {
-  if (isMyMessage.value) {
+  if (isBotOrAgentMessage.value) {
     return ORIENTATION.RIGHT;
   }
 
@@ -221,8 +221,8 @@ const flexOrientationClass = computed(() => {
 
 const gridClass = computed(() => {
   const map = {
-    [ORIENTATION.LEFT]: 'grid grid-cols-[24px_1fr]',
+    [ORIENTATION.LEFT]: 'grid grid-cols-1fr',
-    [ORIENTATION.RIGHT]: 'grid grid-cols-1fr',
+    [ORIENTATION.RIGHT]: 'grid grid-cols-[1fr_24px]',
   };
 
   return map[orientation.value];
@@ -231,13 +231,13 @@ const gridClass = computed(() => {
 const gridTemplate = computed(() => {
   const map = {
     [ORIENTATION.LEFT]: `
-      "avatar bubble"
-      "spacer meta"
-    `,
-    [ORIENTATION.RIGHT]: `
       "bubble"
       "meta"
     `,
+    [ORIENTATION.RIGHT]: `
+      "bubble avatar"
+      "meta spacer"
+    `,
   };
 
   return map[orientation.value];
@@ -251,7 +251,7 @@ const shouldGroupWithNext = computed(() => {
 
 const shouldShowAvatar = computed(() => {
   if (props.messageType === MESSAGE_TYPES.ACTIVITY) return false;
-  if (orientation.value === ORIENTATION.RIGHT) return false;
+  if (orientation.value === ORIENTATION.LEFT) return false;
 
   return true;
 });
@@ -394,23 +394,29 @@ function handleReplyTo() {
 }
 
 const avatarInfo = computed(() => {
-  if (!props.sender || props.sender.type === SENDER_TYPES.AGENT_BOT) {
+  // If no sender, return bot info
+  if (!props.sender) {
     return {
       name: t('CONVERSATION.BOT'),
       src: '',
     };
   }
 
-  if (props.sender) {
+  const { sender } = props;
+  const { name, type, avatarUrl, thumbnail } = sender || {};
+
+  // If sender type is agent bot, use avatarUrl
+  if (type === SENDER_TYPES.AGENT_BOT) {
     return {
-      name: props.sender.name,
+      name: name ?? '',
-      src: props.sender?.thumbnail,
+      src: avatarUrl ?? '',
     };
   }
 
+  // For all other senders, use thumbnail
   return {
-    name: '',
+    name: name ?? '',
-    src: '',
+    src: thumbnail ?? '',
   };
 });
 
@@ -438,7 +444,7 @@ provideMessageContext({
   isPrivate: computed(() => props.private),
   variant,
   orientation,
-  isMyMessage,
+  isBotOrAgentMessage,
   shouldGroupWithNext,
 });
 </script>
@@ -470,14 +476,14 @@ provideMessageContext({
           'w-full': variant === MESSAGE_VARIANTS.EMAIL,
         },
       ]"
-      class="gap-x-3"
+      class="gap-x-2"
       :style="{
         gridTemplateAreas: gridTemplate,
       }"
     >
       <div
         v-if="!shouldGroupWithNext && shouldShowAvatar"
-        v-tooltip.right-end="avatarTooltip"
+        v-tooltip.left-end="avatarTooltip"
         class="[grid-area:avatar] flex items-end"
       >
         <Avatar v-bind="avatarInfo" :size="24" />
@@ -485,7 +491,8 @@ provideMessageContext({
       <div
         class="[grid-area:bubble] flex"
         :class="{
-          'ltr:pl-9 rtl:pl-0 justify-end': orientation === ORIENTATION.RIGHT,
+          'ltr:pl-8 rtl:pr-8 justify-end': orientation === ORIENTATION.RIGHT,
+          'ltr:pr-8 rtl:pl-8': orientation === ORIENTATION.LEFT,
           'min-w-0': variant === MESSAGE_VARIANTS.EMAIL,
         }"
         @contextmenu="openContextMenu($event)"

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

@@ -19,10 +19,17 @@ const {
   isAWebWidgetInbox,
   isAWhatsAppChannel,
   isAnEmailChannel,
+  isAnInstagramChannel,
 } = useInbox();
 
-const { status, isPrivate, createdAt, sourceId, messageType } =
+const {
-  useMessageContext();
+  status,
+  isPrivate,
+  createdAt,
+  sourceId,
+  messageType,
+  contentAttributes,
+} = useMessageContext();
 
 const readableTime = computed(() =>
   messageTimestamp(createdAt.value, 'LLL d, h:mm a')
@@ -30,6 +37,11 @@ const readableTime = computed(() =>
 
 const showStatusIndicator = computed(() => {
   if (isPrivate.value) return false;
+  // Don't show status for failed messages, we already show error message
+  if (status.value === MESSAGE_STATUS.FAILED) return false;
+  // Don't show status for deleted messages
+  if (contentAttributes.value?.deleted) return false;
+
   if (messageType.value === MESSAGE_TYPES.OUTGOING) return true;
   if (messageType.value === MESSAGE_TYPES.TEMPLATE) return true;
 
@@ -47,7 +59,8 @@ const isSent = computed(() => {
     isATwilioChannel.value ||
     isAFacebookInbox.value ||
     isASmsInbox.value ||
-    isATelegramChannel.value
+    isATelegramChannel.value ||
+    isAnInstagramChannel.value
   ) {
     return sourceId.value && status.value === MESSAGE_STATUS.SENT;
   }
@@ -86,7 +99,8 @@ const isRead = computed(() => {
   if (
     isAWhatsAppChannel.value ||
     isATwilioChannel.value ||
-    isAFacebookInbox.value
+    isAFacebookInbox.value ||
+    isAnInstagramChannel.value
   ) {
     return sourceId.value && status.value === MESSAGE_STATUS.READ;
   }
@@ -102,7 +116,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/message/TranslationToggle.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+
+defineProps({
+  showingOriginal: Boolean,
+});
+
+defineEmits(['toggle']);
+</script>
+
+<template>
+  <span>
+    <span
+      class="text-xs text-n-slate-11 cursor-pointer hover:underline select-none"
+      @click="$emit('toggle')"
+    >
+      {{
+        showingOriginal
+          ? $t('CONVERSATION.VIEW_TRANSLATED')
+          : $t('CONVERSATION.VIEW_ORIGINAL')
+      }}
+    </span>
+  </span>
+</template>

app/javascript/dashboard/components-next/message/bubbles/Activity.vue

@@ -14,7 +14,7 @@ const readableTime = computed(() =>
 <template>
   <BaseBubble
     v-tooltip.top="readableTime"
-    class="px-2 py-0.5 !rounded-full flex min-w-0 items-center gap-2"
+    class="px-3 py-1 !rounded-xl flex min-w-0 items-center gap-2"
     data-bubble-name="activity"
   >
     <span v-dompurify-html="content" :title="content" />

app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue

@@ -9,9 +9,11 @@ import BaseBubble from 'next/message/bubbles/Base.vue';
 import FormattedContent from 'next/message/bubbles/Text/FormattedContent.vue';
 import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
 import EmailMeta from './EmailMeta.vue';
+import TranslationToggle from 'dashboard/components-next/message/TranslationToggle.vue';
 
 import { useMessageContext } from '../../provider.js';
 import { MESSAGE_TYPES } from 'next/message/constants.js';
+import { useTranslations } from 'dashboard/composables/useTranslations';
 
 const { content, contentAttributes, attachments, messageType } =
   useMessageContext();
@@ -19,35 +21,77 @@ const { content, contentAttributes, attachments, messageType } =
 const isExpandable = ref(false);
 const isExpanded = ref(false);
 const showQuotedMessage = ref(false);
+const renderOriginal = ref(false);
 const contentContainer = useTemplateRef('contentContainer');
 
 onMounted(() => {
   isExpandable.value = contentContainer.value?.scrollHeight > 400;
 });
 
-const isOutgoing = computed(() => {
+const isOutgoing = computed(() => messageType.value === MESSAGE_TYPES.OUTGOING);
-  return messageType.value === MESSAGE_TYPES.OUTGOING;
-});
 const isIncoming = computed(() => !isOutgoing.value);
 
-const textToShow = computed(() => {
+const { hasTranslations, translationContent } =
+  useTranslations(contentAttributes);
+
+const originalEmailText = computed(() => {
   const text =
     contentAttributes?.value?.email?.textContent?.full ?? content.value;
   return text?.replace(/\n/g, '<br>');
 });
 
-// Use TextContent as the default to fullHTML
+const originalEmailHtml = computed(
+  () =>
+    contentAttributes?.value?.email?.htmlContent?.full ??
+    originalEmailText.value
+);
+
+const messageContent = computed(() => {
+  // If translations exist and we're showing translations (not original)
+  if (hasTranslations.value && !renderOriginal.value) {
+    return translationContent.value;
+  }
+  // Otherwise show original content
+  return content.value;
+});
+
+const textToShow = computed(() => {
+  // If translations exist and we're showing translations (not original)
+  if (hasTranslations.value && !renderOriginal.value) {
+    return translationContent.value;
+  }
+  // Otherwise show original text
+  return originalEmailText.value;
+});
+
 const fullHTML = computed(() => {
-  return contentAttributes?.value?.email?.htmlContent?.full ?? textToShow.value;
+  // If translations exist and we're showing translations (not original)
+  if (hasTranslations.value && !renderOriginal.value) {
+    return translationContent.value;
+  }
+  // Otherwise show original HTML
+  return originalEmailHtml.value;
 });
 
-const unquotedHTML = computed(() => {
+const unquotedHTML = computed(() =>
-  return EmailQuoteExtractor.extractQuotes(fullHTML.value);
+  EmailQuoteExtractor.extractQuotes(fullHTML.value)
+);
+
+const hasQuotedMessage = computed(() =>
+  EmailQuoteExtractor.hasQuotes(fullHTML.value)
+);
+
+// Ensure unique keys for <Letter> when toggling between original and translated views.
+// This forces Vue to re-render the component and update content correctly.
+const translationKeySuffix = computed(() => {
+  if (renderOriginal.value) return 'original';
+  if (hasTranslations.value) return 'translated';
+  return 'original';
 });
 
-const hasQuotedMessage = computed(() => {
+const handleSeeOriginal = () => {
-  return EmailQuoteExtractor.hasQuotes(fullHTML.value);
+  renderOriginal.value = !renderOriginal.value;
-});
+};
 </script>
 
 <template>
@@ -75,7 +119,7 @@ const hasQuotedMessage = computed(() => {
       >
         <div
           v-if="isExpandable && !isExpanded"
-          class="absolute left-0 right-0 bottom-0 h-40 px-8 flex items-end bg-gradient-to-t from-n-gray-3 via-n-gray-3 via-20% to-transparent"
+          class="absolute left-0 right-0 bottom-0 h-40 px-8 flex items-end bg-gradient-to-t from-n-slate-4 via-n-slate-4 via-20% to-transparent"
         >
           <button
             class="text-n-slate-12 py-2 px-8 mx-auto text-center flex items-center gap-2"
@@ -88,11 +132,12 @@ const hasQuotedMessage = computed(() => {
         <FormattedContent
           v-if="isOutgoing && content"
           class="text-n-slate-12"
-          :content="content"
+          :content="messageContent"
         />
         <template v-else>
           <Letter
             v-if="showQuotedMessage"
+            :key="`letter-quoted-${translationKeySuffix}`"
             class-name="prose prose-bubble !max-w-none letter-render"
             :allowed-css-properties="[
               ...allowedCssProperties,
@@ -104,6 +149,7 @@ const hasQuotedMessage = computed(() => {
           />
           <Letter
             v-else
+            :key="`letter-unquoted-${translationKeySuffix}`"
             class-name="prose prose-bubble !max-w-none letter-render"
             :html="unquotedHTML"
             :allowed-css-properties="[
@@ -135,6 +181,12 @@ const hasQuotedMessage = computed(() => {
         </button>
       </div>
     </section>
+    <TranslationToggle
+      v-if="hasTranslations"
+      class="py-2 px-3"
+      :showing-original="renderOriginal"
+      @toggle="handleSeeOriginal"
+    />
     <section
       v-if="Array.isArray(attachments) && attachments.length"
       class="px-4 pb-4 space-y-2"

app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue

@@ -3,16 +3,16 @@ import { computed, ref } from 'vue';
 import BaseBubble from 'next/message/bubbles/Base.vue';
 import FormattedContent from './FormattedContent.vue';
 import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
+import TranslationToggle from 'dashboard/components-next/message/TranslationToggle.vue';
 import { MESSAGE_TYPES } from '../../constants';
 import { useMessageContext } from '../../provider.js';
+import { useTranslations } from 'dashboard/composables/useTranslations';
 
 const { content, attachments, contentAttributes, messageType } =
   useMessageContext();
 
-const hasTranslations = computed(() => {
+const { hasTranslations, translationContent } =
-  const { translations = {} } = contentAttributes.value;
+  useTranslations(contentAttributes);
-  return Object.keys(translations || {}).length > 0;
-});
 
 const renderOriginal = ref(false);
 
@@ -22,8 +22,7 @@ const renderContent = computed(() => {
   }
 
   if (hasTranslations.value) {
-    const translations = contentAttributes.value.translations;
+    return translationContent.value;
-    return translations[Object.keys(translations)[0]];
   }
 
   return content.value;
@@ -37,12 +36,6 @@ const isEmpty = computed(() => {
   return !content.value && !attachments.value?.length;
 });
 
-const viewToggleKey = computed(() => {
-  return renderOriginal.value
-    ? 'CONVERSATION.VIEW_TRANSLATED'
-    : 'CONVERSATION.VIEW_ORIGINAL';
-});
-
 const handleSeeOriginal = () => {
   renderOriginal.value = !renderOriginal.value;
 };
@@ -55,15 +48,12 @@ const handleSeeOriginal = () => {
         {{ $t('CONVERSATION.NO_CONTENT') }}
       </span>
       <FormattedContent v-if="renderContent" :content="renderContent" />
-      <span class="-mt-3">
+      <TranslationToggle
-        <span
+        v-if="hasTranslations"
-          v-if="hasTranslations"
+        class="-mt-3"
-          class="text-xs text-n-slate-11 cursor-pointer hover:underline"
+        :showing-original="renderOriginal"
-          @click="handleSeeOriginal"
+        @toggle="handleSeeOriginal"
-        >
+      />
-          {{ $t(viewToggleKey) }}
-        </span>
-      </span>
       <AttachmentChips :attachments="attachments" class="gap-2" />
       <template v-if="isTemplate">
         <div

app/javascript/dashboard/components-next/message/chips/File.vue

@@ -39,7 +39,7 @@ const textColorClass = computed(() => {
     docx: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
     json: 'text-n-slate-12',
     odt: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
-    pdf: 'text-n-ruby-12',
+    pdf: 'text-n-slate-12',
     ppt: 'dark:text-[#FFE0C2] text-[#582D1D]',
     pptx: 'dark:text-[#FFE0C2] text-[#582D1D]',
     rar: 'dark:text-[#EDEEF0] text-[#2F265F]',

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

@@ -98,7 +98,7 @@ const MessageControl = Symbol('MessageControl');
  * @property {import('vue').Ref<Sender|null>} [sender=null] - The sender information
  * @property {import('vue').ComputedRef<MessageOrientation>} orientation - The visual variant of the message
  * @property {import('vue').ComputedRef<MessageVariant>} variant - The visual variant of the message
- * @property {import('vue').ComputedRef<boolean>} isMyMessage - Does the message belong to the current user
+ * @property {import('vue').ComputedRef<boolean>} isBotOrAgentMessage - Does the message belong to the current user
  * @property {import('vue').ComputedRef<boolean>} isPrivate - Proxy computed value for private
  * @property {import('vue').ComputedRef<boolean>} shouldGroupWithNext - Should group with the next message or not, it is differnt from groupWithNext, this has a bypass for a failed message
  */

app/javascript/dashboard/components-next/selectmenu/SelectMenu.vue

@@ -15,6 +15,13 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  subMenuPosition: {
+    type: String,
+    default: 'right',
+    validator: value => {
+      return ['right', 'left', 'bottom'].includes(value);
+    },
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -44,14 +51,21 @@ const handleSelect = value => {
       trailing-icon
       color="slate"
       variant="faded"
-      class="!w-fit"
+      class="!w-fit max-w-40"
       :class="{ 'dark:!bg-n-alpha-2 !bg-n-slate-9/20': isOpen }"
       :label="labelValue"
       @click="toggleMenu"
     />
     <div
       v-if="isOpen"
-      class="absolute ltr:left-full rtl:right-full select-none max-w-48 ltr:ml-1 rtl:mr-1 flex flex-col gap-1 bg-n-alpha-3 backdrop-blur-[100px] p-1 top-0 shadow-lg rounded-lg border border-n-weak"
+      class="absolute select-none max-w-64 flex flex-col gap-1 bg-n-alpha-3 backdrop-blur-[100px] p-1 top-0 shadow-lg z-40 rounded-lg border border-n-weak dark:border-n-strong/50"
+      :class="{
+        'ltr:left-full rtl:right-full ltr:ml-1 rtl:mr-1':
+          subMenuPosition === 'right',
+        'ltr:right-full rtl:left-full ltr:mr-1 rtl:ml-1':
+          subMenuPosition === 'left',
+        'top-full mt-1 ltr:right-0 rtl:left-0': subMenuPosition === 'bottom',
+      }"
     >
       <Button
         v-for="option in options"

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

@@ -8,7 +8,6 @@ import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import { useStorage } from '@vueuse/core';
 import { useSidebarKeyboardShortcuts } from './useSidebarKeyboardShortcuts';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import SidebarGroup from './SidebarGroup.vue';
@@ -37,18 +36,6 @@ const toggleShortcutModalFn = show => {
   }
 };
 
-const currentAccountId = useMapGetter('getCurrentAccountId');
-const isFeatureEnabledonAccount = useMapGetter(
-  'accounts/isFeatureEnabledonAccount'
-);
-
-const showV4Routes = computed(() => {
-  return isFeatureEnabledonAccount.value(
-    currentAccountId.value,
-    FEATURE_FLAGS.REPORT_V4
-  );
-});
-
 useSidebarKeyboardShortcuts(toggleShortcutModalFn);
 
 // We're using localStorage to store the expanded item in the sidebar
@@ -116,32 +103,7 @@ const newReportRoutes = () => [
   },
 ];
 
-const oldReportRoutes = () => [
+const reportRoutes = computed(() => newReportRoutes());
-  {
-    name: 'Reports Agent',
-    label: t('SIDEBAR.REPORTS_AGENT'),
-    to: accountScopedRoute('agent_reports'),
-  },
-  {
-    name: 'Reports Label',
-    label: t('SIDEBAR.REPORTS_LABEL'),
-    to: accountScopedRoute('label_reports'),
-  },
-  {
-    name: 'Reports Inbox',
-    label: t('SIDEBAR.REPORTS_INBOX'),
-    to: accountScopedRoute('inbox_reports'),
-  },
-  {
-    name: 'Reports Team',
-    label: t('SIDEBAR.REPORTS_TEAM'),
-    to: accountScopedRoute('team_reports'),
-  },
-];
-
-const reportRoutes = computed(() =>
-  showV4Routes.value ? newReportRoutes() : oldReportRoutes()
-);
 
 const menuItems = computed(() => {
   return [

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-next/switch/Switch.vue

@@ -27,10 +27,10 @@ const updateValue = () => {
   >
     <span class="sr-only">{{ t('SWITCH.TOGGLE') }}</span>
     <span
-      class="absolute top-[0.07rem] left-0.5 h-3 w-3 transform rounded-full shadow-sm transition-transform duration-200 ease-in-out"
+      class="absolute top-0.5 left-0.5 h-3 w-3 transform rounded-full shadow-sm transition-transform duration-200 ease-in-out"
       :class="
         modelValue
-          ? 'translate-x-2.5 bg-white'
+          ? 'translate-x-3 bg-white'
           : 'translate-x-0 bg-white dark:bg-n-black'
       "
     />

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"
+    icon="i-lucide-menu"
-    color-scheme="secondary"
+    class="-ml-3"
-    class="-ml-3 text-black-900 dark:text-slate-300"
-    icon="list"
     @click="onMenuItemClick"
   />
 </template>

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

@@ -35,7 +35,7 @@ export default {
     color-scheme="alert"
     :banner-message="bannerMessage"
     :action-button-label="actionButtonMessage"
-    action-button-icon="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
+      <NextButton
-        size="small"
+        sm
-        :color-scheme="status.disabled ? '' : 'secondary'"
+        :color="status.disabled ? 'blue' : 'slate'"
-        :variant="status.disabled ? 'smooth' : 'clear'"
+        :variant="status.disabled ? 'faded' : 'ghost'"
-        class="status-change--dropdown-button"
+        class="status-change--dropdown-button !w-full !justify-start"
         @click="changeAvailabilityStatus(status.value)"
       >
         <AvailabilityStatusBadge :status="status.value" />
-        {{ status.label }}
+        <span class="min-w-0 truncate font-medium text-xs">
-      </woot-button>
+          {{ 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/config/sidebarItems/settings.js

@@ -127,7 +127,6 @@ const settings = accountId => ({
       meta: {
         permissions: ['administrator'],
       },
-      globalConfigFlag: 'csmlEditorHost',
       toState: frontendURL(`accounts/${accountId}/settings/agent-bots`),
       toStateName: 'agent_bots',
       featureFlag: FEATURE_FLAGS.AGENT_BOTS,

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
+          <NextButton
-            variant="clear"
+            ghost
-            size="tiny"
+            xs
-            icon="arrow-swap"
+            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 flex justify-end gap-2 items-center">
-          <div class="w-full">
+          <NextButton
-            <woot-submit-button
+            faded
-              :disabled="
+            slate
-                v$.accountName.$invalid ||
+            type="reset"
-                v$.accountName.$invalid ||
+            :label="$t('CREATE_ACCOUNT.FORM.CANCEL')"
-                uiFlags.isCreating
+            @click.prevent="() => $emit('closeAccountCreateModal')"
-              "
+          />
-              :button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
+          <NextButton
-              :loading="uiFlags.isCreating"
+            type="submit"
-              button-class="large expanded"
+            :label="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
-            />
+            :is-loading="uiFlags.isCreating"
-          </div>
+            :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"
+    link
-    class="flex items-center rounded-full"
+    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
+          <NextButton
-            variant="clear"
+            ghost
-            color-scheme="secondary"
+            sm
-            size="small"
+            slate
-            icon="arrow-swap"
+            icon="i-lucide-arrow-right-left"
+            class="!w-full !justify-start"
             @click="$emit('toggleAccounts')"
           >
-            {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
+            <span class="min-w-0 truncate font-medium text-xs">
-          </woot-button>
+              {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
+            </span>
+          </NextButton>
         </WootDropdownItem>
         <WootDropdownItem v-if="showChatSupport">
-          <woot-button
+          <NextButton
-            variant="clear"
+            ghost
-            color-scheme="secondary"
+            sm
-            size="small"
+            slate
-            icon="chat-help"
+            icon="i-lucide-message-circle-question"
+            class="!w-full !justify-start"
             @click="$emit('showSupportChatWindow')"
           >
-            {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
+            <span class="min-w-0 truncate font-medium text-xs">
-          </woot-button>
+              {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
+            </span>
+          </NextButton>
         </WootDropdownItem>
         <WootDropdownItem>
-          <woot-button
+          <NextButton
-            variant="clear"
+            ghost
-            color-scheme="secondary"
+            sm
-            size="small"
+            slate
-            icon="keyboard"
+            icon="i-lucide-keyboard"
+            class="!w-full !justify-start"
             @click="handleKeyboardHelpClick"
           >
-            {{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
+            <span class="min-w-0 truncate font-medium text-xs">
-          </woot-button>
+              {{ $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" />
+              <NextButton
-              <span class="button__content">
+                ghost
-                {{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
+                sm
-              </span>
+                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
+          <NextButton
-            variant="clear"
+            ghost
-            color-scheme="secondary"
+            sm
-            size="small"
+            slate
-            icon="appearance"
+            icon="i-lucide-sun-moon"
+            class="!w-full !justify-start"
             @click="openAppearanceOptions"
           >
-            {{ $t('SIDEBAR_ITEMS.APPEARANCE') }}
+            <span class="min-w-0 truncate font-medium text-xs">
-          </woot-button>
+              {{ $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
+            <NextButton
-              icon="content-settings"
+              ghost
-              size="14"
+              sm
-              class="icon icon--font"
+              slate
-            />
+              icon="i-lucide-layout-dashboard"
-            <span class="button__content">
+              class="!w-full !justify-start"
-              {{ $t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE') }}
+            >
-            </span>
+              <span class="min-w-0 truncate font-medium text-xs">
+                {{ $t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE') }}
+              </span>
+            </NextButton>
           </a>
         </WootDropdownItem>
         <WootDropdownItem>
-          <woot-button
+          <NextButton
-            variant="clear"
+            ghost
-            color-scheme="secondary"
+            sm
-            size="small"
+            slate
-            icon="power"
+            icon="i-lucide-circle-power"
+            class="!w-full !justify-start"
             @click="logout"
           >
-            {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
+            <span class="min-w-0 truncate font-medium text-xs">
-          </woot-button>
+              {{ $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,
@@ -48,13 +49,6 @@ export default {
       return !!this.menuItem.children;
     },
     isMenuItemVisible() {
-      if (this.menuItem.globalConfigFlag) {
-        // this checks for the `csmlEditorHost` flag in the global config
-        // if this is present, we toggle the CSML editor menu item
-        // TODO: This is very specific, and can be handled better, fix it
-        return !!this.globalConfig[this.menuItem.globalConfigFlag];
-      }
-
       let isFeatureEnabled = true;
       if (this.menuItem.featureFlag) {
         isFeatureEnabled = this.isFeatureEnabledonAccount(
@@ -205,14 +199,7 @@ export default {
         {{ $t(`SIDEBAR.${menuItem.label}`) }}
       </span>
       <div v-if="menuItem.showNewButton" class="flex items-center">
-        <woot-button
+        <NextButton ghost xs slate icon="i-lucide-plus" @click="onClickOpen" />
-          size="tiny"
-          variant="clear"
-          color-scheme="secondary"
-          icon="add"
-          class="p-0 ml-2"
-          @click="onClickOpen"
-        />
       </div>
     </div>
     <router-link
@@ -272,16 +259,15 @@ export default {
         >
           <li class="pl-1">
             <a :href="href">
-              <woot-button
+              <NextButton
-                size="tiny"
+                ghost
-                variant="clear"
+                xs
-                color-scheme="secondary"
+                slate
-                icon="add"
+                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"
+  class="-ml-3"
-  color-scheme="secondary"
+  ghost=""
-  icon="list"
+  icon="i-lucide-menu"
-  size="small"
+  size="sm"
-  variant="clear"
+  slate=""
 >