validate swagger api specification

update the commit id in docs.json
add tags to swagger
2025-05-20 17:00:52 +07:00 · 2025-05-20 16:55:50 +07:00 · 2025-05-20 16:43:22 +07:00 · 2025-05-20 16:09:44 +07:00 · 2025-05-20 15:49:16 +07:00 · 2025-05-20 15:41:50 +07:00
1220 changed files with 64417 additions and 11851 deletions
@@ -2,7 +2,7 @@
 # https://www.chatwoot.com/docs/self-hosted/configuration/environment-variables/#rails-production-variables

 # Used to verify the integrity of signed cookies. so ensure a secure value is set
-# SECRET_KEY_BASE should be alphanumeric. Avoid special characters or symbols. 
+# SECRET_KEY_BASE should be alphanumeric. Avoid special characters or symbols.
 # Use `rake secret` to generate this variable
 SECRET_KEY_BASE=replace_with_lengthy_secure_hex

@@ -216,6 +216,8 @@ ANDROID_SHA256_CERT_FINGERPRINT=AC:73:8E:DE:EB:56:EA:CC:10:87:02:A7:65:37:7B:38:
 # ENABLE_RACK_ATTACK=true
 # RACK_ATTACK_LIMIT=300
 # ENABLE_RACK_ATTACK_WIDGET_API=true
+# Comma-separated list of trusted IPs that bypass Rack Attack throttling rules
+# RACK_ATTACK_ALLOWED_IPS=127.0.0.1,::1,192.168.0.10

 ## Running chatwoot as an API only server
 ## setting this value to true will disable the frontend dashboard endpoints
@@ -257,4 +259,3 @@ AZURE_APP_SECRET=
 # Set to true if you want to remove stale contact inboxes
 # contact_inboxes with no conversation older than 90 days will be removed
 # REMOVE_STALE_CONTACT_INBOX_JOB_STATUS=false
-
@@ -10,7 +10,7 @@ on:

 jobs:
  test:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04

    steps:
      - uses: actions/checkout@v4
@@ -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.
@@ -9,7 +9,7 @@ on:

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

 jobs:
  test:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04

    steps:
      - uses: actions/checkout@v4
@@ -4,8 +4,8 @@
 # lint js and vue files
 npx --no-install lint-staged

-# lint only staged ruby files
-git diff --name-only --cached | xargs ls -1 2>/dev/null | grep '\.rb$' | xargs bundle exec rubocop --force-exclusion -a
+# lint only staged ruby files that still exist (not deleted)
+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
@@ -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)
@@ -567,7 +567,7 @@ GEM
      activesupport (>= 3.0.0)
    raabro (1.4.0)
    racc (1.8.1)
-    rack (2.2.13)
+    rack (2.2.14)
    rack-attack (6.7.0)
      rack (>= 1.0, < 4)
    rack-contrib (2.5.0)
@@ -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
@@ -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?

@@ -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
@@ -1,200 +1,42 @@
-# This class creates both outgoing messages from chatwoot and echo outgoing messages based on the flag `outgoing_echo`
-# Assumptions
-# 1. Incase of an outgoing message which is echo, source_id will NOT be nil,
-#    based on this we are showing "not sent from chatwoot" message in frontend
-#    Hence there is no need to set user_id in message for outgoing echo messages.
-
-class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
-  attr_reader :messaging
-
+class Messages::Instagram::MessageBuilder < Messages::Instagram::BaseMessageBuilder
  def initialize(messaging, inbox, outgoing_echo: false)
-    super()
-    @messaging = messaging
-    @inbox = inbox
-    @outgoing_echo = outgoing_echo
-  end
-
-  def perform
-    return if @inbox.channel.reauthorization_required?
-
-    ActiveRecord::Base.transaction do
-      build_message
-    end
-  rescue Koala::Facebook::AuthenticationError => e
-    Rails.logger.warn("Instagram authentication error for inbox: #{@inbox.id} with error: #{e.message}")
-    Rails.logger.error e
-    @inbox.channel.authorization_error!
-    raise
-  rescue StandardError => e
-    ChatwootExceptionTracker.new(e, account: @inbox.account).capture_exception
-    true
+    super(messaging, inbox, outgoing_echo: outgoing_echo)
  end

  private

-  def attachments
-    @messaging[:message][:attachments] || {}
+  def get_story_object_from_source_id(source_id)
+    url = "#{base_uri}/#{source_id}?fields=story,from&access_token=#{@inbox.channel.access_token}"
+
+    response = HTTParty.get(url)
+
+    return JSON.parse(response.body).with_indifferent_access if response.success?
+
+    # Create message first if it doesn't exist
+    @message ||= conversation.messages.create!(message_params)
+    handle_error_response(response)
+    nil
  end

-  def message_type
-    @outgoing_echo ? :outgoing : :incoming
-  end
+  def handle_error_response(response)
+    parsed_response = JSON.parse(response.body)
+    error_code = parsed_response.dig('error', 'code')

-  def message_identifier
-    message[:mid]
-  end
+    # https://developers.facebook.com/docs/messenger-platform/error-codes
+    # Access token has expired or become invalid.
+    channel.authorization_error! if error_code == 190

-  def message_source_id
-    @outgoing_echo ? recipient_id : sender_id
-  end
-
-  def message_is_unsupported?
-    message[:is_unsupported].present? && @messaging[:message][:is_unsupported] == true
-  end
-
-  def sender_id
-    @messaging[:sender][:id]
-  end
-
-  def recipient_id
-    @messaging[:recipient][:id]
-  end
-
-  def message
-    @messaging[:message]
-  end
-
-  def contact
-    @contact ||= @inbox.contact_inboxes.find_by(source_id: message_source_id)&.contact
-  end
-
-  def conversation
-    @conversation ||= set_conversation_based_on_inbox_config
-  end
-
-  def instagram_direct_message_conversation
-    Conversation.where(conversation_params)
-                .where("additional_attributes ->> 'type' = 'instagram_direct_message'")
-  end
-
-  def set_conversation_based_on_inbox_config
-    if @inbox.lock_to_single_conversation
-      instagram_direct_message_conversation.order(created_at: :desc).first || build_conversation
-    else
-      find_or_build_for_multiple_conversations
+    # There was a problem scraping data from the provided link.
+    # https://developers.facebook.com/docs/graph-api/guides/error-handling/ search for error code 1609005
+    if error_code == 1_609_005
+      @message.attachments.destroy_all
+      @message.update(content: I18n.t('conversations.messages.instagram_deleted_story_content'))
    end
+
+    Rails.logger.error("[InstagramStoryFetchError]: #{parsed_response.dig('error', 'message')} #{error_code}")
  end

-  def find_or_build_for_multiple_conversations
-    last_conversation = instagram_direct_message_conversation.where.not(status: :resolved).order(created_at: :desc).first
-
-    return build_conversation if last_conversation.nil?
-
-    last_conversation
+  def base_uri
+    "https://graph.instagram.com/#{GlobalConfigService.load('INSTAGRAM_API_VERSION', 'v22.0')}"
  end
-
-  def message_content
-    @messaging[:message][:text]
-  end
-
-  def story_reply_attributes
-    message[:reply_to][:story] if message[:reply_to].present? && message[:reply_to][:story].present?
-  end
-
-  def message_reply_attributes
-    message[:reply_to][:mid] if message[:reply_to].present? && message[:reply_to][:mid].present?
-  end
-
-  def build_message
-    return if @outgoing_echo && already_sent_from_chatwoot?
-    return if message_content.blank? && all_unsupported_files?
-
-    @message = conversation.messages.create!(message_params)
-    save_story_id
-
-    attachments.each do |attachment|
-      process_attachment(attachment)
-    end
-  end
-
-  def save_story_id
-    return if story_reply_attributes.blank?
-
-    @message.save_story_info(story_reply_attributes)
-  end
-
-  def build_conversation
-    @contact_inbox ||= contact.contact_inboxes.find_by!(source_id: message_source_id)
-
-    Conversation.create!(conversation_params.merge(
-                           contact_inbox_id: @contact_inbox.id,
-                           additional_attributes: { type: 'instagram_direct_message' }
-                         ))
-  end
-
-  def conversation_params
-    {
-      account_id: @inbox.account_id,
-      inbox_id: @inbox.id,
-      contact_id: contact.id
-    }
-  end
-
-  def message_params
-    params = {
-      account_id: conversation.account_id,
-      inbox_id: conversation.inbox_id,
-      message_type: message_type,
-      source_id: message_identifier,
-      content: message_content,
-      sender: @outgoing_echo ? nil : contact,
-      content_attributes: {
-        in_reply_to_external_id: message_reply_attributes
-      }
-    }
-
-    params[:content_attributes][:is_unsupported] = true if message_is_unsupported?
-    params
-  end
-
-  def already_sent_from_chatwoot?
-    cw_message = conversation.messages.where(
-      source_id: @messaging[:message][:mid]
-    ).first
-
-    cw_message.present?
-  end
-
-  def all_unsupported_files?
-    return if attachments.empty?
-
-    attachments_type = attachments.pluck(:type).uniq.first
-    unsupported_file_type?(attachments_type)
-  end
-
-  ### Sample response
-  # {
-  #   "object": "instagram",
-  #   "entry": [
-  #     {
-  #       "id": "<IGID>",// ig id of the business
-  #       "time": 1569262486134,
-  #       "messaging": [
-  #         {
-  #           "sender": {
-  #             "id": "<IGSID>"
-  #           },
-  #           "recipient": {
-  #             "id": "<IGID>"
-  #           },
-  #           "timestamp": 1569262485349,
-  #           "message": {
-  #             "mid": "<MESSAGE_ID>",
-  #             "text": "<MESSAGE_CONTENT>"
-  #           }
-  #         }
-  #       ]
-  #     }
-  #   ],
-  # }
 end
@@ -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
@@ -68,20 +68,8 @@ class Messages::Messenger::MessageBuilder
    message.save!
  end

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

@@ -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
@@ -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
@@ -68,7 +68,7 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController

  def article_params
    params.require(:article).permit(
-      :title, :slug, :position, :content, :description, :position, :category_id, :author_id, :associated_article_id, :status,
+      :title, :slug, :position, :content, :description, :category_id, :author_id, :associated_article_id, :status,
      :locale, meta: [:title,
                      :description,
                      { tags: [] }]
@@ -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).merge({ custom_attributes: contact_custom_attributes })
+    permitted_params.except(:custom_attributes, :avatar_url)
+                    .merge({ custom_attributes: contact_custom_attributes })
+                    .merge({ additional_attributes: contact_additional_attributes })
  end

  def set_include_contact_inboxes
@@ -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
@@ -1,6 +1,6 @@
 class Api::V1::Accounts::CustomFiltersController < Api::V1::Accounts::BaseController
  before_action :check_authorization
-  before_action :fetch_custom_filters, except: [:create]
+  before_action :fetch_custom_filters, only: [:index]
  before_action :fetch_custom_filter, only: [:show, :update, :destroy]
  DEFAULT_FILTER_TYPE = 'conversation'.freeze

@@ -9,8 +9,8 @@ class Api::V1::Accounts::CustomFiltersController < Api::V1::Accounts::BaseContro
  def show; end

  def create
-    @custom_filter = current_user.custom_filters.create!(
-      permitted_payload.merge(account_id: Current.account.id)
+    @custom_filter = Current.account.custom_filters.create!(
+      permitted_payload.merge(user: Current.user)
    )
    render json: { error: @custom_filter.errors.messages }, status: :unprocessable_entity and return unless @custom_filter.valid?
  end
@@ -27,14 +27,16 @@ class Api::V1::Accounts::CustomFiltersController < Api::V1::Accounts::BaseContro
  private

  def fetch_custom_filters
-    @custom_filters = current_user.custom_filters.where(
-      account_id: Current.account.id,
+    @custom_filters = Current.account.custom_filters.where(
+      user: Current.user,
      filter_type: permitted_params[:filter_type] || DEFAULT_FILTER_TYPE
    )
  end

  def fetch_custom_filter
-    @custom_filter = @custom_filters.find(permitted_params[:id])
+    @custom_filter = Current.account.custom_filters.where(
+      user: Current.user
+    ).find(permitted_params[:id])
  end

  def permitted_payload
@@ -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, :auto_resolve_ignore_waiting)
+  end
+
  def check_signup_enabled
    raise ActionController::RoutingError, 'Not Found' if GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false') == 'false'
  end
@@ -2,10 +2,15 @@ class Api::V1::Widget::CampaignsController < Api::V1::Widget::BaseController
  skip_before_action :set_contact

  def index
-    @campaigns = @web_widget
-                 .inbox
-                 .campaigns
-                 .where(enabled: true, account_id: @web_widget.inbox.account_id)
-                 .includes(:sender)
+    account = @web_widget.inbox.account
+    @campaigns = if account.feature_enabled?('campaigns')
+                   @web_widget
+                     .inbox
+                     .campaigns
+                     .where(enabled: true, account_id: account.id)
+                     .includes(:sender)
+                 else
+                   []
+                 end
  end
 end
@@ -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
@@ -1,6 +1,6 @@
 module AccessTokenAuthHelper
  BOT_ACCESSIBLE_ENDPOINTS = {
-    'api/v1/accounts/conversations' => %w[toggle_status toggle_priority create update],
+    'api/v1/accounts/conversations' => %w[toggle_status toggle_priority create update custom_attributes],
    'api/v1/accounts/conversations/messages' => ['create'],
    'api/v1/accounts/conversations/assignments' => ['create']
  }.freeze
@@ -1,6 +1,5 @@
 module InstagramConcern
  extend ActiveSupport::Concern
-  include HTTParty

  def instagram_client
    ::OAuth2::Client.new(
@@ -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', ''),
@@ -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
@@ -66,3 +66,5 @@ class SuperAdmin::AccountsController < SuperAdmin::ApplicationController
    # rubocop:enable Rails/I18nLocaleTexts
  end
 end
+
+SuperAdmin::AccountsController.prepend_mod_with('SuperAdmin::AccountsController')
@@ -9,10 +9,17 @@ class AccountDashboard < Administrate::BaseDashboard
  # on pages throughout the dashboard.

  enterprise_attribute_types = if ChatwootApp.enterprise?
-                                 {
-                                   limits: Enterprise::AccountLimitsField,
-                                   all_features: Enterprise::AccountFeaturesField
+                                 attributes = {
+                                   limits: AccountLimitsField
                                 }
+
+                                 # 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
@@ -96,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
@@ -1,7 +0,0 @@
-require 'administrate/field/base'
-
-class Enterprise::AccountFeaturesField < Administrate::Field::Base
-  def to_s
-    data
-  end
-end
@@ -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)
@@ -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();
@@ -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();
@@ -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;
@@ -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>
@@ -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"
        />
@@ -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',
@@ -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>
@@ -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
-    class="flex flex-col gap-2 py-2 mx-6 border-b border-n-strong group/note"
-  >
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-1.5 py-2.5 min-w-0">
+  <div class="flex flex-col gap-2 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">
        <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>
@@ -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 { shouldBeUrl } from 'shared/helpers/Validators';
+import { required, minLength, helpers } from '@vuelidate/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(() =>
-  v$.value.slug.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.ERROR') : ''
-);
+const slugError = computed(() => {
+  return v$.value.slug.$errors[0]?.$message || '';
+});

 const homePageLinkError = computed(() =>
  v$.value.homePageLink.$error
@@ -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(() =>
-  v$.value.slug.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.ERROR') : ''
-);
+const slugError = computed(() => {
+  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>
@@ -0,0 +1,28 @@
+<!--
+ * Preserves RTL/LTR context when teleporting content
+ * Ensures direction-specific classes (ltr:tailwind-class, rtl:tailwind-class) work correctly
+ * when content is teleported outside the app's container with [dir] attribute
+-->
+<script setup>
+import { computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+
+defineProps({
+  to: {
+    type: String,
+    default: 'body',
+  },
+});
+
+const isRTL = useMapGetter('accounts/isRTL');
+
+const contentDirection = computed(() => (isRTL.value ? 'rtl' : 'ltr'));
+</script>
+
+<template>
+  <Teleport :to="to">
+    <div :dir="contentDirection">
+      <slot />
+    </div>
+  </Teleport>
+</template>
@@ -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"
@@ -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)"
@@ -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>
@@ -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>
@@ -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>
@@ -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',
-    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`,
+    label: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.LABEL',
+    prompt: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.CONTENT',
  },
  {
-    label: 'Suggest an answer',
-    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.`,
+    label: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.LABEL',
+    prompt: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.CONTENT',
  },
  {
-    label: 'Rate this conversation',
-    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.`,
+    label: 'CAPTAIN.COPILOT.PROMPTS.RATE.LABEL',
+    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>
@@ -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
@@ -2,9 +2,9 @@
 import { ref, computed } from 'vue';
 import { OnClickOutside } from '@vueuse/components';
 import { useI18n } from 'vue-i18n';
-import { useMapGetter } from 'dashboard/composables/store.js';

 import Button from 'dashboard/components-next/button/Button.vue';
+import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';

 const props = defineProps({
  type: {
@@ -59,8 +59,6 @@ const emit = defineEmits(['confirm', 'close']);

 const { t } = useI18n();

-const isRTL = useMapGetter('accounts/isRTL');
-
 const dialogRef = ref(null);
 const dialogContentRef = ref(null);

@@ -94,7 +92,7 @@ defineExpose({ open, close });
 </script>

 <template>
-  <Teleport to="body">
+  <TeleportWithDirection to="body">
    <dialog
      ref="dialogRef"
      class="w-full transition-all duration-300 ease-in-out shadow-xl rounded-xl"
@@ -102,7 +100,6 @@ defineExpose({ open, close });
        maxWidthClass,
        overflowYAuto ? 'overflow-y-auto' : 'overflow-visible',
      ]"
-      :dir="isRTL ? 'rtl' : 'ltr'"
      @close="close"
    >
      <OnClickOutside @trigger="close">
@@ -125,7 +122,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"
@@ -149,7 +149,7 @@ defineExpose({ open, close });
        </form>
      </OnClickOutside>
    </dialog>
-  </Teleport>
+  </TeleportWithDirection>
 </template>

 <style scoped>
@@ -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 = {
@@ -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>
@@ -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 (
-    senderType.toLowerCase() === SENDER_TYPES.USER.toLowerCase() &&
-    props.currentUserId === senderId
-  );
+  return senderType.toLowerCase() === SENDER_TYPES.USER.toLowerCase();
 });

 /**
@@ -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.RIGHT]: 'grid grid-cols-1fr',
+    [ORIENTATION.LEFT]: '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,
-      src: props.sender?.thumbnail,
+      name: name ?? '',
+      src: avatarUrl ?? '',
    };
  }

+  // For all other senders, use thumbnail
  return {
-    name: '',
-    src: '',
+    name: name ?? '',
+    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)"
@@ -19,10 +19,17 @@ const {
  isAWebWidgetInbox,
  isAWhatsAppChannel,
  isAnEmailChannel,
+  isAnInstagramChannel,
 } = useInbox();

-const { status, isPrivate, createdAt, sourceId, messageType } =
-  useMessageContext();
+const {
+  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;
 });
@@ -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>
@@ -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" />
@@ -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(() => {
-  return messageType.value === MESSAGE_TYPES.OUTGOING;
-});
+const isOutgoing = computed(() => 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(() => {
-  return EmailQuoteExtractor.extractQuotes(fullHTML.value);
+const unquotedHTML = computed(() =>
+  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(() => {
-  return EmailQuoteExtractor.hasQuotes(fullHTML.value);
-});
+const handleSeeOriginal = () => {
+  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"
@@ -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 { translations = {} } = contentAttributes.value;
-  return Object.keys(translations || {}).length > 0;
-});
+const { hasTranslations, translationContent } =
+  useTranslations(contentAttributes);

 const renderOriginal = ref(false);

@@ -22,8 +22,7 @@ const renderContent = computed(() => {
  }

  if (hasTranslations.value) {
-    const translations = contentAttributes.value.translations;
-    return translations[Object.keys(translations)[0]];
+    return translationContent.value;
  }

  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">
-        <span
-          v-if="hasTranslations"
-          class="text-xs text-n-slate-11 cursor-pointer hover:underline"
-          @click="handleSeeOriginal"
-        >
-          {{ $t(viewToggleKey) }}
-        </span>
-      </span>
+      <TranslationToggle
+        v-if="hasTranslations"
+        class="-mt-3"
+        :showing-original="renderOriginal"
+        @toggle="handleSeeOriginal"
+      />
      <AttachmentChips :attachments="attachments" class="gap-2" />
      <template v-if="isTemplate">
        <div
@@ -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]',
@@ -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
 */
@@ -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"
@@ -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 = () => [
-  {
-    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 reportRoutes = computed(() => newReportRoutes());

 const menuItems = computed(() => {
  return [
@@ -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'
      "
    />
@@ -8,6 +8,7 @@ import {
  computed,
  watch,
  onMounted,
+  onUnmounted,
  defineEmits,
 } from 'vue';
 import { useStore } from 'vuex';
@@ -29,6 +30,7 @@ import ConversationItem from './ConversationItem.vue';
 import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
 import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
 import IntersectionObserver from './IntersectionObserver.vue';
+import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';

 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAlert } from 'dashboard/composables';
@@ -42,7 +44,7 @@ import {
  useSnakeCase,
 } from 'dashboard/composables/useTransformKeys';
 import { useEmitter } from 'dashboard/composables/emitter';
-import { useEventListener } from '@vueuse/core';
+import { useEventListener, useScrollLock } from '@vueuse/core';

 import { emitter } from 'shared/helpers/mitt';

@@ -85,6 +87,12 @@ const store = useStore();

 const conversationListRef = ref(null);
 const conversationDynamicScroller = ref(null);
+const conversationListScrollableElement = computed(
+  () => conversationDynamicScroller.value?.$el
+);
+const conversationListScrollLock = useScrollLock(
+  conversationListScrollableElement
+);

 const activeAssigneeTab = ref(wootConstants.ASSIGNEE_TYPE.ME);
 const activeStatus = ref(wootConstants.STATUS_TYPE.OPEN);
@@ -738,6 +746,7 @@ function allSelectedConversationsStatus(status) {

 function onContextMenuToggle(state) {
  isContextMenuOpen.value = state;
+  conversationListScrollLock.value = state;
 }

 function toggleSelectAll(check) {
@@ -761,6 +770,10 @@ onMounted(() => {
  }
 });

+onUnmounted(() => {
+  conversationListScrollLock.value = false;
+});
+
 provide('selectConversation', selectConversation);
 provide('deSelectConversation', deSelectConversation);
 provide('assignAgent', onAssignAgent);
@@ -828,14 +841,17 @@ watch(conversationFilters, (newVal, oldVal) => {
      @basic-filter-change="onBasicFilterChange"
    />

-    <Teleport v-if="showAddFoldersModal" to="#saveFilterTeleportTarget">
+    <TeleportWithDirection
+      v-if="showAddFoldersModal"
+      to="#saveFilterTeleportTarget"
+    >
      <SaveCustomView
        v-model="appliedFilter"
        :custom-views-query="foldersQuery"
        :open-last-saved-item="openLastSavedItemInFolder"
        @close="onCloseAddFoldersModal"
      />
-    </Teleport>
+    </TeleportWithDirection>

    <DeleteCustomViews
      v-if="showDeleteFoldersModal"
@@ -932,7 +948,10 @@ watch(conversationFilters, (newVal, oldVal) => {
        </template>
      </DynamicScroller>
    </div>
-    <Teleport v-if="showAdvancedFilters" to="#conversationFilterTeleportTarget">
+    <TeleportWithDirection
+      v-if="showAdvancedFilters"
+      to="#conversationFilterTeleportTarget"
+    >
      <ConversationFilter
        v-model="appliedFilter"
        :folder-name="activeFolderName"
@@ -941,6 +960,6 @@ watch(conversationFilters, (newVal, oldVal) => {
        @update-folder="onUpdateSavedFilter"
        @close="closeAdvanceFiltersModal"
      />
-    </Teleport>
+    </TeleportWithDirection>
  </div>
 </template>
@@ -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,
@@ -49,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(
@@ -2,6 +2,8 @@
 import { computed, onMounted, nextTick, useTemplateRef } from 'vue';
 import { useWindowSize, useElementBounding } from '@vueuse/core';

+import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
+
 const props = defineProps({
  x: { type: Number, default: 0 },
  y: { type: Number, default: 0 },
@@ -57,7 +59,7 @@ onMounted(() => {
 </script>

 <template>
-  <Teleport to="body">
+  <TeleportWithDirection to="body">
    <div
      ref="menuRef"
      class="fixed outline-none z-[9999] cursor-pointer"
@@ -67,5 +69,5 @@ onMounted(() => {
    >
      <slot />
    </div>
-  </Teleport>
+  </TeleportWithDirection>
 </template>
@@ -218,14 +218,14 @@ const emitDateRange = () => {
    />
    <div
      v-if="showDatePicker"
-      class="flex absolute top-9 ltr:left-0 rtl:right-0 z-30 shadow-md select-none w-[880px] h-[490px] rounded-2xl border border-slate-50 dark:border-slate-800 bg-white dark:bg-slate-800"
+      class="flex absolute top-9 ltr:left-0 rtl:right-0 z-30 shadow-md select-none w-[880px] h-[490px] rounded-2xl bg-n-alpha-3 backdrop-blur-[100px] border-0 outline outline-1 outline-n-container"
    >
      <CalendarDateRange
        :selected-range="selectedRange"
        @set-range="setDateRange"
      />
      <div
-        class="flex flex-col w-[680px] ltr:border-l rtl:border-r border-slate-50 dark:border-slate-700/50"
+        class="flex flex-col w-[680px] ltr:border-l rtl:border-r border-n-strong"
      >
        <div class="flex justify-around h-fit">
          <!-- Calendars for Start and End Dates -->
@@ -251,12 +251,12 @@ const emitDateRange = () => {
              @validate="updateManualInput($event, calendar)"
              @error="handleManualInputError($event)"
            />
-            <div class="py-5 border-b border-slate-50 dark:border-slate-700/50">
+            <div class="py-5 border-b border-n-strong">
              <div
                class="flex flex-col items-center gap-2 px-5 min-w-[340px] max-h-[352px]"
                :class="
                  calendar === START_CALENDAR &&
-                  'ltr:border-r rtl:border-l border-slate-50 dark:border-slate-700/50'
+                  'ltr:border-r rtl:border-l border-n-strong'
                "
              >
                <CalendarYear
@@ -1,6 +1,8 @@
 <script setup>
 import { CALENDAR_PERIODS } from '../helpers/DatePickerHelper';

+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 defineProps({
  calendarType: {
    type: String,
@@ -38,42 +40,38 @@ const onClickSetView = (type, mode) => {

 <template>
  <div class="flex items-start justify-between w-full h-9">
-    <button
-      class="p-1 rounded-lg hover:bg-slate-75 dark:hover:bg-slate-700/50 rtl:rotate-180"
+    <NextButton
+      slate
+      ghost
+      xs
+      icon="i-lucide-chevron-left"
+      class="rtl:rotate-180"
      @click="onClickPrev(calendarType)"
-    >
-      <fluent-icon
-        icon="chevron-left"
-        size="14"
-        class="text-slate-900 dark:text-slate-50"
-      />
-    </button>
+    />
    <div class="flex items-center gap-1">
      <button
        v-if="firstButtonLabel"
-        class="p-0 text-sm font-medium text-center text-slate-800 dark:text-slate-50 hover:text-woot-600 dark:hover:text-woot-600"
+        class="p-0 text-sm font-medium text-center text-n-slate-12 hover:text-n-brand"
        @click="onClickSetView(calendarType, viewMode)"
      >
        {{ firstButtonLabel }}
      </button>
      <button
        v-if="buttonLabel"
-        class="p-0 text-sm font-medium text-center text-slate-800 dark:text-slate-50"
-        :class="{ 'hover:text-woot-600 dark:hover:text-woot-600': viewMode }"
+        class="p-0 text-sm font-medium text-center text-n-slate-12"
+        :class="{ 'hover:text-n-brand': viewMode }"
        @click="onClickSetView(calendarType, YEAR)"
      >
        {{ buttonLabel }}
      </button>
    </div>
-    <button
-      class="p-1 rounded-lg hover:bg-slate-75 dark:hover:bg-slate-700/50 rtl:rotate-180"
+    <NextButton
+      slate
+      ghost
+      xs
+      icon="i-lucide-chevron-right"
+      class="rtl:rotate-180"
      @click="onClickNext(calendarType)"
-    >
-      <fluent-icon
-        icon="chevron-right"
-        size="14"
-        class="text-slate-900 dark:text-slate-50"
-      />
-    </button>
+    />
  </div>
 </template>
@@ -65,7 +65,7 @@ const validateDate = () => {
    <input
      v-model="localDateValue"
      type="text"
-      class="reset-base border bg-slate-25 dark:bg-slate-900 ring-offset-ash-900 border-slate-50 dark:border-slate-700/50 w-full disabled:text-slate-200 dark:disabled:text-slate-700 disabled:cursor-not-allowed text-slate-800 dark:text-slate-50 px-1.5 py-1 text-sm rounded-xl h-10"
+      class="!text-sm !mb-0 disabled:!outline-n-strong"
      :placeholder="dateFormat"
      :disabled="isDisabled"
      @keypress.enter="validateDate"
@@ -18,7 +18,7 @@ const setDateRange = range => {
 <template>
  <div class="w-[200px] flex flex-col items-start">
    <h4
-      class="w-full px-5 py-4 text-sm font-medium capitalize text-start text-slate-600 dark:text-slate-200"
+      class="w-full px-5 py-4 text-sm font-medium capitalize text-start text-n-slate-12"
    >
      {{ $t('DATE_PICKER.DATE_RANGE_OPTIONS.TITLE') }}
    </h4>
@@ -26,11 +26,11 @@ const setDateRange = range => {
      <button
        v-for="range in dateRanges"
        :key="range.label"
-        class="w-full px-5 py-3 text-sm font-medium truncate border-none rounded-none text-start hover:bg-slate-50 dark:hover:bg-slate-700"
+        class="w-full px-5 py-3 text-sm font-medium truncate border-none rounded-none text-start hover:bg-n-alpha-2 dark:hover:bg-n-solid-3"
        :class="
          range.value === selectedRange
-            ? 'text-slate-800 dark:text-slate-50 bg-slate-50 dark:bg-slate-700'
-            : 'text-slate-600 dark:text-slate-200'
+            ? 'text-n-slate-12 bg-n-alpha-1 dark:bg-n-solid-active'
+            : 'text-n-slate-12'
        "
        @click="setDateRange(range)"
      >
@@ -1,4 +1,6 @@
 <script setup>
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 const emit = defineEmits(['clear', 'change']);

 const onClickClear = () => {
@@ -11,18 +13,19 @@ const onClickApply = () => {
 </script>

 <template>
-  <div class="h-[56px] flex justify-between px-5 py-3 items-center">
-    <button
-      class="p-1.5 rounded-lg w-fit text-sm font-medium text-slate-600 dark:text-slate-200 hover:text-slate-800 dark:hover:text-slate-100"
+  <div class="h-[56px] flex justify-between gap-2 px-2 py-3 items-center">
+    <NextButton
+      slate
+      ghost
+      sm
+      :label="$t('DATE_PICKER.CLEAR_BUTTON')"
      @click="onClickClear"
-    >
-      {{ $t('DATE_PICKER.CLEAR_BUTTON') }}
-    </button>
-    <button
-      class="p-1.5 rounded-lg w-fit text-sm font-medium text-woot-500 dark:text-woot-300 hover:text-woot-700 dark:hover:text-woot-500"
+    />
+    <NextButton
+      sm
+      ghost
+      :label="$t('DATE_PICKER.APPLY_BUTTON')"
      @click="onClickApply"
-    >
-      {{ $t('DATE_PICKER.APPLY_BUTTON') }}
-    </button>
+    />
  </div>
 </template>
@@ -71,10 +71,12 @@ const selectMonth = index => {
      <button
        v-for="(month, index) in months"
        :key="index"
-        class="p-2 text-sm font-medium text-center text-slate-800 dark:text-slate-50 w-[92px] h-10 rounded-lg py-2.5 px-2 hover:bg-slate-75 dark:hover:bg-slate-700"
+        class="p-2 text-sm font-medium text-center text-n-slate-12 w-[92px] h-10 rounded-lg py-2.5 px-2"
        :class="{
-          'bg-woot-600 dark:bg-woot-600 text-white dark:text-white hover:bg-woot-500 dark:bg-woot-700':
+          'bg-n-brand text-white hover:bg-n-blue-10':
            index === activeMonthIndex,
+          'hover:bg-n-alpha-2 dark:hover:bg-n-solid-3':
+            index !== activeMonthIndex,
        }"
        @click="selectMonth(index)"
      >
@@ -107,17 +107,16 @@ const isNextDayInRange = day => {
 };

 const dayClasses = day => ({
-  'text-slate-500 dark:text-slate-400 pointer-events-none':
-    !isInCurrentMonth(day),
-  'text-slate-800 dark:text-slate-50 hover:text-slate-800 dark:hover:text-white hover:bg-woot-100 dark:hover:bg-woot-700':
+  'text-n-slate-10 pointer-events-none': !isInCurrentMonth(day),
+  'text-n-slate-12 hover:text-n-slate-12 hover:bg-n-blue-6 dark:hover:bg-n-blue-7':
    isInCurrentMonth(day),
-  'bg-woot-600 dark:bg-woot-600 text-white dark:text-white':
+  'bg-n-brand text-white':
    isSelectedStartOrEndDate(day) && isInCurrentMonth(day),
-  'bg-woot-50 dark:bg-woot-800':
+  'bg-n-blue-4 dark:bg-n-blue-5':
    (isInRange(day) || isHoveringInRange(day)) &&
    !isSelectedStartOrEndDate(day) &&
    isInCurrentMonth(day),
-  'outline outline-1 outline-woot-200 -outline-offset-1 dark:outline-woot-700 text-woot-600 dark:text-woot-400':
+  'outline outline-1 outline-n-blue-8 -outline-offset-1 !text-n-blue-text':
    isToday(props.currentDate, day) && !isSelectedStartOrEndDate(day),
 });
 </script>
@@ -164,7 +163,7 @@ const dayClasses = day => ({
            !isLastDayOfMonth(day) &&
            isInCurrentMonth(day)
          "
-          class="absolute bottom-0 w-6 h-8 ltr:-right-4 rtl:-left-4 bg-woot-50 dark:bg-woot-800 -z-10"
+          class="absolute bottom-0 w-6 h-8 ltr:-right-4 rtl:-left-4 bg-n-blue-4 dark:bg-n-blue-5 -z-10"
        />
      </div>
    </div>
@@ -72,10 +72,10 @@ const selectYear = year => {
      <button
        v-for="year in years"
        :key="year"
-        class="p-2 text-sm font-medium text-center text-slate-800 dark:text-slate-50 w-[144px] h-10 rounded-lg py-2.5 px-2 hover:bg-slate-75 dark:hover:bg-slate-700"
+        class="p-2 text-sm font-medium text-center text-n-slate-12 w-[144px] h-10 rounded-lg py-2.5 px-2"
        :class="{
-          'bg-woot-600 dark:bg-woot-600 text-white dark:text-white hover:bg-woot-500 dark:hover:bg-woot-700':
-            year === activeYear,
+          'bg-n-brand text-white hover:bg-n-blue-10': year === activeYear,
+          'hover:bg-n-alpha-2 dark:hover:bg-n-solid-3': year !== activeYear,
        }"
        @click="selectYear(year)"
      >
@@ -48,7 +48,7 @@ const openDatePicker = () => {

 <template>
  <button
-    class="inline-flex relative items-center rounded-lg gap-2 py-1.5 px-3 h-8 bg-slate-50 dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800 active:bg-slate-75 dark:active:bg-slate-800"
+    class="inline-flex relative items-center rounded-lg gap-2 py-1.5 px-3 h-8 bg-n-alpha-2 hover:bg-n-alpha-1 active:bg-n-alpha-1"
    @click="openDatePicker"
  >
    <fluent-icon
@@ -17,6 +17,9 @@ export default {
    hasFbConfigured() {
      return window.chatwootConfig?.fbAppId;
    },
+    hasInstagramConfigured() {
+      return window.chatwootConfig?.instagramAppId;
+    },
    isActive() {
      const { key } = this.channel;
      if (Object.keys(this.enabledFeatures).length === 0) {
@@ -32,6 +35,12 @@ export default {
        return this.enabledFeatures.channel_email;
      }

+      if (key === 'instagram') {
+        return (
+          this.enabledFeatures.channel_instagram && this.hasInstagramConfigured
+        );
+      }
+
      return [
        'website',
        'twilio',
@@ -40,6 +49,7 @@ export default {
        'sms',
        'telegram',
        'line',
+        'instagram',
      ].includes(key);
    },
  },
@@ -220,6 +220,7 @@ const plugins = computed(() => {
      trigger: '@',
      showMenu: showUserMentions,
      searchTerm: mentionSearchKey,
+      isAllowed: () => props.isPrivate,
    }),
    createSuggestionPlugin({
      trigger: '/',
@@ -774,10 +775,24 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
 }

 .ProseMirror-prompt {
-  @apply z-[9999] bg-slate-25 dark:bg-slate-700 rounded-md border border-solid border-slate-75 dark:border-slate-800 shadow-lg;
+  @apply z-[9999] bg-n-alpha-3 backdrop-blur-[100px] border border-n-strong p-6 shadow-xl rounded-xl;

  h5 {
-    @apply dark:text-slate-25 text-slate-800;
+    @apply text-n-slate-12 mb-1.5;
+  }
+
+  .ProseMirror-prompt-buttons {
+    button {
+      @apply h-8 px-3;
+
+      &[type='submit'] {
+        @apply bg-n-brand text-white hover:bg-n-brand/90;
+      }
+
+      &[type='button'] {
+        @apply bg-n-slate-9/10 text-n-slate-12 hover:bg-n-slate-9/20;
+      }
+    }
  }
 }

@@ -328,11 +328,24 @@ export default {
 }

 .ProseMirror-prompt {
-  z-index: var(--z-index-highest);
-  background: var(--white);
-  box-shadow: var(--shadow-large);
-  border-radius: var(--border-radius-normal);
-  border: 1px solid var(--color-border);
-  min-width: 25rem;
+  @apply z-[9999] bg-n-alpha-3 min-w-80 backdrop-blur-[100px] border border-n-strong p-6 shadow-xl rounded-xl;
+
+  h5 {
+    @apply text-n-slate-12 mb-1.5;
+  }
+
+  .ProseMirror-prompt-buttons {
+    button {
+      @apply h-8 px-3;
+
+      &[type='submit'] {
+        @apply bg-n-brand text-white hover:bg-n-brand/90;
+      }
+
+      &[type='button'] {
+        @apply bg-n-slate-9/10 text-n-slate-12 hover:bg-n-slate-9/20;
+      }
+    }
+  }
 }
 </style>
@@ -10,6 +10,7 @@ import {
  ALLOWED_FILE_TYPES,
  ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP,
  ALLOWED_FILE_TYPES_FOR_LINE,
+  ALLOWED_FILE_TYPES_FOR_INSTAGRAM,
 } from 'shared/constants/messages';
 import VideoCallButton from '../VideoCallButton.vue';
 import AIAssistanceButton from '../AIAssistanceButton.vue';
@@ -113,6 +114,10 @@ export default {
      type: String,
      required: true,
    },
+    conversationType: {
+      type: String,
+      default: '',
+    },
  },
  emits: [
    'replaceText',
@@ -187,6 +192,9 @@ export default {
    showAudioPlayStopButton() {
      return this.showAudioRecorder && this.isRecordingAudio;
    },
+    isInstagramDM() {
+      return this.conversationType === 'instagram_direct_message';
+    },
    allowedFileTypes() {
      if (this.isATwilioWhatsAppChannel) {
        return ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP;
@@ -194,6 +202,10 @@ export default {
      if (this.isALineChannel) {
        return ALLOWED_FILE_TYPES_FOR_LINE;
      }
+      if (this.isAnInstagramChannel || this.isInstagramDM) {
+        return ALLOWED_FILE_TYPES_FOR_INSTAGRAM;
+      }
+
      return ALLOWED_FILE_TYPES;
    },
    enableDragAndDrop() {
@@ -1,93 +1,129 @@
-<script>
-import wootConstants from 'dashboard/constants/globals';
-import { mapGetters } from 'vuex';
-import FilterItem from './FilterItem.vue';
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
 import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useMapGetter, useStore } from 'dashboard/composables/store.js';
+import wootConstants from 'dashboard/constants/globals';
+import SelectMenu from 'dashboard/components-next/selectmenu/SelectMenu.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';

-const CHAT_STATUS_FILTER_ITEMS = Object.freeze([
-  'open',
-  'resolved',
-  'pending',
-  'snoozed',
-  'all',
-]);
+defineProps({
+  isOnExpandedLayout: {
+    type: Boolean,
+    required: true,
+  },
+});

-const SORT_ORDER_ITEMS = Object.freeze([
-  'last_activity_at_asc',
-  'last_activity_at_desc',
-  'created_at_desc',
-  'created_at_asc',
-  'priority_desc',
-  'priority_asc',
-  'waiting_since_asc',
-  'waiting_since_desc',
-]);
+const emit = defineEmits(['changeFilter']);

-export default {
-  components: {
-    FilterItem,
-    NextButton,
-  },
-  props: {
-    isOnExpandedLayout: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  emits: ['changeFilter'],
-  setup() {
-    const { updateUISettings } = useUISettings();
+const store = useStore();
+const { t } = useI18n();

-    return {
-      updateUISettings,
-    };
+const { updateUISettings } = useUISettings();
+
+const chatStatusFilter = useMapGetter('getChatStatusFilter');
+const chatSortFilter = useMapGetter('getChatSortFilter');
+
+const [showActionsDropdown, toggleDropdown] = useToggle();
+
+const currentStatusFilter = computed(() => {
+  return chatStatusFilter.value || wootConstants.STATUS_TYPE.OPEN;
+});
+
+const currentSortBy = computed(() => {
+  return (
+    chatSortFilter.value || wootConstants.SORT_BY_TYPE.LAST_ACTIVITY_AT_DESC
+  );
+});
+
+const chatStatusOptions = [
+  {
+    label: t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.open.TEXT'),
+    value: 'open',
  },
-  data() {
-    return {
-      showActionsDropdown: false,
-      chatStatusItems: CHAT_STATUS_FILTER_ITEMS,
-      chatSortItems: SORT_ORDER_ITEMS,
-    };
+  {
+    label: t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.resolved.TEXT'),
+    value: 'resolved',
  },
-  computed: {
-    ...mapGetters({
-      chatStatusFilter: 'getChatStatusFilter',
-      chatSortFilter: 'getChatSortFilter',
-    }),
-    chatStatus() {
-      return this.chatStatusFilter || wootConstants.STATUS_TYPE.OPEN;
-    },
-    sortFilter() {
-      return (
-        this.chatSortFilter || wootConstants.SORT_BY_TYPE.LAST_ACTIVITY_AT_DESC
-      );
-    },
+  {
+    label: t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.pending.TEXT'),
+    value: 'pending',
  },
-  methods: {
-    onTabChange(value) {
-      this.$emit('changeFilter', value);
-      this.closeDropdown();
-    },
-    toggleDropdown() {
-      this.showActionsDropdown = !this.showActionsDropdown;
-    },
-    closeDropdown() {
-      this.showActionsDropdown = false;
-    },
-    onChangeFilter(value, type) {
-      this.$emit('changeFilter', value, type);
-      this.saveSelectedFilter(type, value);
-    },
-    saveSelectedFilter(type, value) {
-      this.updateUISettings({
-        conversations_filter_by: {
-          status: type === 'status' ? value : this.chatStatus,
-          order_by: type === 'sort' ? value : this.sortFilter,
-        },
-      });
-    },
+  {
+    label: t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.snoozed.TEXT'),
+    value: 'snoozed',
  },
+  {
+    label: t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.all.TEXT'),
+    value: 'all',
+  },
+];
+
+const chatSortOptions = [
+  {
+    label: t('CHAT_LIST.SORT_ORDER_ITEMS.last_activity_at_asc.TEXT'),
+    value: 'last_activity_at_asc',
+  },
+  {
+    label: t('CHAT_LIST.SORT_ORDER_ITEMS.last_activity_at_desc.TEXT'),
+    value: 'last_activity_at_desc',
+  },
+  {
+    label: t('CHAT_LIST.SORT_ORDER_ITEMS.created_at_desc.TEXT'),
+    value: 'created_at_desc',
+  },
+  {
+    label: t('CHAT_LIST.SORT_ORDER_ITEMS.created_at_asc.TEXT'),
+    value: 'created_at_asc',
+  },
+  {
+    label: t('CHAT_LIST.SORT_ORDER_ITEMS.priority_desc.TEXT'),
+    value: 'priority_desc',
+  },
+  {
+    label: t('CHAT_LIST.SORT_ORDER_ITEMS.priority_asc.TEXT'),
+    value: 'priority_asc',
+  },
+  {
+    label: t('CHAT_LIST.SORT_ORDER_ITEMS.waiting_since_asc.TEXT'),
+    value: 'waiting_since_asc',
+  },
+  {
+    label: t('CHAT_LIST.SORT_ORDER_ITEMS.waiting_since_desc.TEXT'),
+    value: 'waiting_since_desc',
+  },
+];
+
+const activeChatStatusLabel = computed(
+  () =>
+    chatStatusOptions.find(m => m.value === chatStatusFilter.value)?.label || ''
+);
+
+const activeChatSortLabel = computed(
+  () => chatSortOptions.find(m => m.value === chatSortFilter.value)?.label || ''
+);
+
+const saveSelectedFilter = (type, value) => {
+  updateUISettings({
+    conversations_filter_by: {
+      status: type === 'status' ? value : currentStatusFilter.value,
+      order_by: type === 'sort' ? value : currentSortBy.value,
+    },
+  });
+};
+
+const handleStatusChange = value => {
+  emit('changeFilter', value, 'status');
+  store.dispatch('setChatStatusFilter', value);
+  saveSelectedFilter('status', value);
+};
+
+const handleSortChange = value => {
+  emit('changeFilter', value, 'sort');
+  store.dispatch('setChatSortFilter', value);
+  saveSelectedFilter('sort', value);
 };
 </script>

@@ -99,39 +135,39 @@ export default {
      slate
      faded
      xs
-      @click="toggleDropdown"
+      @click="toggleDropdown()"
    />
    <div
      v-if="showActionsDropdown"
-      v-on-clickaway="closeDropdown"
-      class="mt-1 dropdown-pane dropdown-pane--open !w-52 !p-4 top-6 border !border-n-weak dark:!border-n-weak !bg-n-alpha-3 dark:!bg-n-alpha-3 backdrop-blur-[100px]"
+      v-on-click-outside="() => toggleDropdown()"
+      class="mt-1 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4 absolute z-40 top-full"
      :class="{
        'ltr:left-0 rtl:right-0': !isOnExpandedLayout,
        'ltr:right-0 rtl:left-0': isOnExpandedLayout,
      }"
    >
-      <div class="flex items-center justify-between last:mt-4">
-        <span class="text-xs font-medium text-n-slate-12">{{
-          $t('CHAT_LIST.CHAT_SORT.STATUS')
-        }}</span>
-        <FilterItem
-          type="status"
-          :selected-value="chatStatus"
-          :items="chatStatusItems"
-          path-prefix="CHAT_LIST.CHAT_STATUS_FILTER_ITEMS"
-          @on-change-filter="onChangeFilter"
+      <div class="flex items-center justify-between last:mt-4 gap-2">
+        <span class="text-sm truncate text-n-slate-12">
+          {{ $t('CHAT_LIST.CHAT_SORT.STATUS') }}
+        </span>
+        <SelectMenu
+          :model-value="chatStatusFilter"
+          :options="chatStatusOptions"
+          :label="activeChatStatusLabel"
+          :sub-menu-position="isOnExpandedLayout ? 'left' : 'right'"
+          @update:model-value="handleStatusChange"
        />
      </div>
-      <div class="flex items-center justify-between last:mt-4">
-        <span class="text-xs font-medium text-n-slate-12">{{
-          $t('CHAT_LIST.CHAT_SORT.ORDER_BY')
-        }}</span>
-        <FilterItem
-          type="sort"
-          :selected-value="sortFilter"
-          :items="chatSortItems"
-          path-prefix="CHAT_LIST.SORT_ORDER_ITEMS"
-          @on-change-filter="onChangeFilter"
+      <div class="flex items-center justify-between last:mt-4 gap-2">
+        <span class="text-sm truncate text-n-slate-12">
+          {{ $t('CHAT_LIST.CHAT_SORT.ORDER_BY') }}
+        </span>
+        <SelectMenu
+          :model-value="chatSortFilter"
+          :options="chatSortOptions"
+          :label="activeChatSortLabel"
+          :sub-menu-position="isOnExpandedLayout ? 'left' : 'right'"
+          @update:model-value="handleSortChange"
        />
      </div>
    </div>
@@ -36,6 +36,7 @@ import { REPLY_POLICY } from 'shared/constants/links';
 import wootConstants from 'dashboard/constants/globals';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { FEATURE_FLAGS } from '../../../featureFlags';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';

 import NextButton from 'dashboard/components-next/button/Button.vue';

@@ -209,6 +210,22 @@ export default {
      return contactLastSeenAt;
    },

+    // Check there is a instagram inbox exists with the same instagram_id
+    hasDuplicateInstagramInbox() {
+      const instagramId = this.inbox.instagram_id;
+      const { additional_attributes: additionalAttributes = {} } = this.inbox;
+      const instagramInbox =
+        this.$store.getters['inboxes/getInstagramInboxByInstagramId'](
+          instagramId
+        );
+
+      return (
+        this.inbox.channel_type === INBOX_TYPES.FB &&
+        additionalAttributes.type === 'instagram_direct_message' &&
+        instagramInbox
+      );
+    },
+
    replyWindowBannerMessage() {
      if (this.isAWhatsAppChannel) {
        return this.$t('CONVERSATION.TWILIO_WHATSAPP_CAN_REPLY');
@@ -218,24 +235,37 @@ export default {
        if (additionalAttributes) {
          const {
            agent_reply_time_window_message: agentReplyTimeWindowMessage,
+            agent_reply_time_window: agentReplyTimeWindow,
          } = additionalAttributes;
-          return agentReplyTimeWindowMessage;
+          return (
+            agentReplyTimeWindowMessage ||
+            this.$t('CONVERSATION.API_HOURS_WINDOW', {
+              hours: agentReplyTimeWindow,
+            })
+          );
        }
        return '';
      }
      return this.$t('CONVERSATION.CANNOT_REPLY');
    },
    replyWindowLink() {
-      if (this.isAWhatsAppChannel) {
+      if (this.isAFacebookInbox || this.isAnInstagramChannel) {
        return REPLY_POLICY.FACEBOOK;
      }
+      if (this.isAWhatsAppCloudChannel) {
+        return REPLY_POLICY.WHATSAPP_CLOUD;
+      }
      if (!this.isAPIInbox) {
        return REPLY_POLICY.TWILIO_WHATSAPP;
      }
      return '';
    },
    replyWindowLinkText() {
-      if (this.isAWhatsAppChannel) {
+      if (
+        this.isAWhatsAppChannel ||
+        this.isAFacebookInbox ||
+        this.isAnInstagramChannel
+      ) {
        return this.$t('CONVERSATION.24_HOURS_WINDOW');
      }
      if (!this.isAPIInbox) {
@@ -485,11 +515,17 @@ export default {
    <Banner
      v-if="!currentChat.can_reply"
      color-scheme="alert"
-      class="mt-2 mx-2 rounded-lg overflow-hidden"
+      class="mx-2 mt-2 overflow-hidden rounded-lg"
      :banner-message="replyWindowBannerMessage"
      :href-link="replyWindowLink"
      :href-link-text="replyWindowLinkText"
    />
+    <Banner
+      v-else-if="hasDuplicateInstagramInbox"
+      color-scheme="alert"
+      class="mx-2 mt-2 overflow-hidden rounded-lg"
+      :banner-message="$t('CONVERSATION.OLD_INSTAGRAM_INBOX_REPLY_BANNER')"
+    />
    <div class="flex justify-end">
      <NextButton
        faded
@@ -241,15 +241,27 @@ export default {
      if (this.isAFacebookInbox) {
        return MESSAGE_MAX_LENGTH.FACEBOOK;
      }
-      if (this.isAWhatsAppChannel) {
+      if (this.isAnInstagramChannel) {
+        return MESSAGE_MAX_LENGTH.INSTAGRAM;
+      }
+      if (this.isATwilioWhatsAppChannel) {
        return MESSAGE_MAX_LENGTH.TWILIO_WHATSAPP;
      }
+      if (this.isAWhatsAppCloudChannel) {
+        return MESSAGE_MAX_LENGTH.WHATSAPP_CLOUD;
+      }
      if (this.isASmsInbox) {
        return MESSAGE_MAX_LENGTH.TWILIO_SMS;
      }
      if (this.isAnEmailChannel) {
        return MESSAGE_MAX_LENGTH.EMAIL;
      }
+      if (this.isATwilioSMSChannel) {
+        return MESSAGE_MAX_LENGTH.TWILIO_SMS;
+      }
+      if (this.isAWhatsAppChannel) {
+        return MESSAGE_MAX_LENGTH.WHATSAPP_CLOUD;
+      }
      return MESSAGE_MAX_LENGTH.GENERAL;
    },
    showFileUpload() {
@@ -261,7 +273,8 @@ export default {
        this.isAnEmailChannel ||
        this.isASmsInbox ||
        this.isATelegramChannel ||
-        this.isALineChannel
+        this.isALineChannel ||
+        this.isAnInstagramChannel
      );
    },
    replyButtonLabel() {
@@ -387,9 +400,14 @@ export default {
    },
  },
  watch: {
-    currentChat(conversation) {
+    currentChat(conversation, oldConversation) {
      const { can_reply: canReply } = conversation;
-      this.setCCAndToEmailsFromLastChat();
+      if (oldConversation && oldConversation.id !== conversation.id) {
+        // Only update email fields when switching to a completely different conversation (by ID)
+        // This prevents overwriting user input (e.g., CC/BCC fields) when performing actions
+        // like self-assign or other updates that do not actually change the conversation context
+        this.setCCAndToEmailsFromLastChat();
+      }

      if (this.isOnPrivateNote) {
        return;
@@ -405,13 +423,12 @@ export default {
    },
    // When moving from one conversation to another, the store may not have the
    // list of all the messages. A fetch is subsequently made to get the messages.
-    // However, this update does not trigger the `currentChat` watcher.
-    // We can add a deep watcher to it, but then, that would be too broad of a net to cast
-    // And would impact performance too. So we watch the messages directly.
-    // The watcher here is `deep` too, because the messages array is mutated and
-    // not replaced. So, a shallow watcher would not catch the change.
-    'currentChat.messages': {
-      handler() {
+    // This watcher handles two main cases:
+    // 1. When switching conversations and messages are fetched/updated, ensures CC/BCC fields are set from the latest OUTGOING/INCOMING email (not activity/private messages).
+    // 2. Fixes and issue where CC/BCC fields could be reset/lost after assignment/activity actions or message mutations that did not represent a true email context change.
+    lastEmail: {
+      handler(lastEmail) {
+        if (!lastEmail) return;
        this.setCCAndToEmailsFromLastChat();
      },
      deep: true,
@@ -685,7 +702,11 @@ export default {
          this.isATwilioWhatsAppChannel ||
          this.isAWhatsAppCloudChannel ||
          this.is360DialogWhatsAppChannel;
-        if (isOnWhatsApp && !this.isPrivate) {
+        // When users send messages containing both text and attachments on Instagram, Instagram treats them as separate messages.
+        // Although Chatwoot combines these into a single message, Instagram sends separate echo events for each component.
+        // This can create duplicate messages in Chatwoot. To prevent this issue, we'll handle text and attachments as separate messages.
+        const isOnInstagram = this.isAnInstagramChannel;
+        if ((isOnWhatsApp || isOnInstagram) && !this.isPrivate) {
          this.sendMessageAsMultipleMessages(this.message);
        } else {
          const messagePayload = this.getMessagePayload(this.message);
@@ -702,7 +723,7 @@ export default {
      }
    },
    sendMessageAsMultipleMessages(message) {
-      const messages = this.getMessagePayloadForWhatsapp(message);
+      const messages = this.getMultipleMessagesPayload(message);
      messages.forEach(messagePayload => {
        this.sendMessage(messagePayload);
      });
@@ -934,11 +955,11 @@ export default {

      return payload;
    },
-    getMessagePayloadForWhatsapp(message) {
+    getMultipleMessagesPayload(message) {
      const multipleMessagePayload = [];

      if (this.attachedFiles && this.attachedFiles.length) {
-        let caption = message;
+        let caption = this.isAnInstagramChannel ? '' : message;
        this.attachedFiles.forEach(attachment => {
          const attachedFile = this.globalConfig.directUploadsEnabled
            ? attachment.blobSignedId
@@ -953,9 +974,19 @@ export default {

          attachmentPayload = this.setReplyToInPayload(attachmentPayload);
          multipleMessagePayload.push(attachmentPayload);
-          caption = '';
+          // For WhatsApp, only the first attachment gets a caption
+          if (!this.isAnInstagramChannel) caption = '';
        });
-      } else {
+      }
+
+      const hasNoAttachments =
+        !this.attachedFiles || !this.attachedFiles.length;
+      // For Instagram, we need a separate text message
+      // For WhatsApp, we only need a text message if there are no attachments
+      if (
+        (this.isAnInstagramChannel && this.message) ||
+        (!this.isAnInstagramChannel && hasNoAttachments)
+      ) {
        let messagePayload = {
          conversationId: this.currentChat.id,
          message,
@@ -1076,7 +1107,7 @@ export default {
    v-if="showSelfAssignBanner"
    action-button-variant="ghost"
    color-scheme="secondary"
-    class="banner--self-assign mx-2 mb-2 rounded-lg"
+    class="mx-2 mb-2 rounded-lg banner--self-assign"
    :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
    has-action-button
    :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
@@ -1135,7 +1166,7 @@ export default {
        v-else-if="!showRichContentEditor"
        ref="messageInput"
        v-model="message"
-        class="input"
+        class="rounded-none input"
        :placeholder="messagePlaceHolder"
        :min-height="4"
        :signature="signatureToApply"
@@ -1195,6 +1226,7 @@ export default {
      :mode="replyType"
      :on-file-upload="onFileUpload"
      :on-send="onSendReply"
+      :conversation-type="conversationType"
      :recording-audio-duration-text="recordingAudioDurationText"
      :recording-audio-state="recordingAudioState"
      :send-button-text="replyButtonLabel"
@@ -69,10 +69,6 @@ const onAgentSelect = index => {
      v-if="items.length"
      ref="tagAgentsRef"
      class="vertical dropdown menu mention--box bg-n-solid-1 p-1 rounded-xl text-sm overflow-auto absolute w-full z-20 shadow-md left-0 leading-[1.2] bottom-full max-h-[12.5rem] border border-solid border-n-strong"
-      :class="{
-        'border-b-[0.5rem] border-solid border-white dark:!border-slate-700':
-          items.length <= 4,
-      }"
    >
      <li
        v-for="(agent, index) in items"
@@ -11,6 +11,7 @@ import { downloadFile } from '@chatwoot/utils';

 import NextButton from 'dashboard/components-next/button/Button.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';

 const props = defineProps({
  attachment: {
@@ -166,7 +167,7 @@ onMounted(() => {
 </script>

 <template>
-  <Teleport to="body">
+  <TeleportWithDirection to="body">
    <woot-modal
      v-model:show="show"
      full-width
@@ -258,7 +259,7 @@ onMounted(() => {
          <div class="flex items-center justify-center w-16 shrink-0">
            <NextButton
              v-if="hasMoreThanOneAttachment"
-              icon="i-lucide-chevron-left"
+              icon="ltr:i-lucide-chevron-left rtl:i-lucide-chevron-right"
              class="z-10"
              blue
              faded
@@ -324,7 +325,7 @@ onMounted(() => {
          <div class="flex items-center justify-center w-16 shrink-0">
            <NextButton
              v-if="hasMoreThanOneAttachment"
-              icon="i-lucide-chevron-right"
+              icon="ltr:i-lucide-chevron-right rtl:i-lucide-chevron-left"
              class="z-10"
              blue
              faded
@@ -351,5 +352,5 @@ onMounted(() => {
        </footer>
      </div>
    </woot-modal>
-  </Teleport>
+  </TeleportWithDirection>
 </template>
@@ -56,7 +56,7 @@ const unlinkIssue = () => {

 <template>
  <div
-    class="absolute flex flex-col items-start bg-white dark:bg-slate-800 z-50 px-4 py-3 border border-solid border-ash-200 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
+    class="absolute flex flex-col items-start bg-n-alpha-3 backdrop-blur-[100px] z-50 px-4 py-3 border border-solid border-n-container w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
  >
    <div class="flex flex-col w-full">
      <IssueHeader
@@ -66,37 +66,37 @@ const unlinkIssue = () => {
        @unlink-issue="unlinkIssue"
      />

-      <span class="mt-2 text-sm font-medium text-ash-900">
+      <span class="mt-2 text-sm font-medium text-n-slate-12">
        {{ issue.title }}
      </span>
      <span
        v-if="issue.description"
-        class="mt-1 text-sm text-ash-800 line-clamp-3"
+        class="mt-1 text-sm text-n-slate-11 line-clamp-3"
      >
        {{ issue.description }}
      </span>
    </div>
    <div class="flex flex-row items-center h-6 gap-2">
      <UserAvatarWithName v-if="assignee" :user="assignee" class="py-1" />
-      <div v-if="assignee" class="w-px h-3 bg-ash-200" />
+      <div v-if="assignee" class="w-px h-3 bg-n-slate-4" />
      <div class="flex items-center gap-1 py-1">
        <fluent-icon
          icon="status"
          size="14"
          :style="{ color: issue.state.color }"
        />
-        <h6 class="text-xs text-ash-900">
+        <h6 class="text-xs text-n-slate-12">
          {{ issue.state.name }}
        </h6>
      </div>
-      <div v-if="priorityLabel" class="w-px h-3 bg-ash-200" />
+      <div v-if="priorityLabel" class="w-px h-3 bg-n-slate-4" />
      <div v-if="priorityLabel" class="flex items-center gap-1 py-1">
        <fluent-icon
          :icon="`priority-${priorityLabel.toLowerCase()}`"
          size="14"
          view-box="0 0 12 12"
        />
-        <h6 class="text-xs text-ash-900">{{ priorityLabel }}</h6>
+        <h6 class="text-xs text-n-slate-12">{{ priorityLabel }}</h6>
      </div>
    </div>
    <div v-if="labels.length" class="flex flex-wrap items-center gap-1">
@@ -111,7 +111,7 @@ const unlinkIssue = () => {
      />
    </div>
    <div class="flex items-center">
-      <span class="text-xs text-ash-800">
+      <span class="text-xs text-n-slate-11">
        {{
          $t('INTEGRATION_SETTINGS.LINEAR.ISSUE.CREATED_AT', {
            createdAt: formattedDate,
@@ -100,14 +100,17 @@ onMounted(() => {
 </script>

 <template>
-  <div class="relative" :class="{ group: linkedIssue }">
+  <div
+    class="relative after:content-[''] after:h-5 after:bg-transparent after:top-5 after:w-full after:block after:absolute after:z-0"
+    :class="{ group: linkedIssue }"
+  >
    <Button
      v-on-clickaway="closeIssue"
      v-tooltip="tooltipText"
      sm
      ghost
      slate
-      class="!gap-1"
+      class="!gap-1 group-hover:bg-n-alpha-2"
      @click="openIssue"
    >
      <fluent-icon
@@ -124,7 +127,7 @@ onMounted(() => {
      v-if="linkedIssue"
      :issue="linkedIssue.issue"
      :link-id="linkedIssue.id"
-      class="absolute right-0 top-[40px] invisible group-hover:visible"
+      class="absolute right-0 top-[36px] invisible group-hover:visible"
      @unlink-issue="unlinkIssue"
    />
    <woot-modal
@@ -0,0 +1,39 @@
+import { ref } from 'vue';
+import { useTranslations } from '../useTranslations';
+
+describe('useTranslations', () => {
+  it('returns false and null when contentAttributes is null', () => {
+    const contentAttributes = ref(null);
+    const { hasTranslations, translationContent } =
+      useTranslations(contentAttributes);
+    expect(hasTranslations.value).toBe(false);
+    expect(translationContent.value).toBeNull();
+  });
+
+  it('returns false and null when translations are missing', () => {
+    const contentAttributes = ref({});
+    const { hasTranslations, translationContent } =
+      useTranslations(contentAttributes);
+    expect(hasTranslations.value).toBe(false);
+    expect(translationContent.value).toBeNull();
+  });
+
+  it('returns false and null when translations is an empty object', () => {
+    const contentAttributes = ref({ translations: {} });
+    const { hasTranslations, translationContent } =
+      useTranslations(contentAttributes);
+    expect(hasTranslations.value).toBe(false);
+    expect(translationContent.value).toBeNull();
+  });
+
+  it('returns true and correct translation content when translations exist', () => {
+    const contentAttributes = ref({
+      translations: { en: 'Hello' },
+    });
+    const { hasTranslations, translationContent } =
+      useTranslations(contentAttributes);
+    expect(hasTranslations.value).toBe(true);
+    // Should return the first translation (en: 'Hello')
+    expect(translationContent.value).toBe('Hello');
+  });
+});
@@ -1,6 +1,6 @@
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { useMapGetter } from './store';
+import { useMapGetter, useStore } from './store';

 /**
 * Composable for account-related operations.
@@ -12,6 +12,7 @@ export function useAccount() {
   * @type {import('vue').ComputedRef<number>}
   */
  const route = useRoute();
+  const store = useStore();
  const getAccountFn = useMapGetter('accounts/getAccount');
  const isOnChatwootCloud = useMapGetter('globalConfig/isOnChatwootCloud');
  const isFeatureEnabledonAccount = useMapGetter(
@@ -44,6 +45,12 @@ export function useAccount() {
    };
  };

+  const updateAccount = async data => {
+    await store.dispatch('accounts/update', {
+      ...data,
+    });
+  };
+
  return {
    accountId,
    route,
@@ -52,5 +59,6 @@ export function useAccount() {
    accountScopedRoute,
    isCloudFeatureEnabled,
    isOnChatwootCloud,
+    updateAccount,
  };
 }
@@ -121,6 +121,10 @@ export const useInbox = () => {
    );
  });

+  const isAnInstagramChannel = computed(() => {
+    return channelType.value === INBOX_TYPES.INSTAGRAM;
+  });
+
  return {
    inbox,
    isAFacebookInbox,
@@ -137,5 +141,6 @@ export const useInbox = () => {
    isAWhatsAppCloudChannel,
    is360DialogWhatsAppChannel,
    isAnEmailChannel,
+    isAnInstagramChannel,
  };
 };
@@ -7,8 +7,12 @@ import { formatTime } from '@chatwoot/utils';
 * @param {string} [accountSummaryKey='getAccountSummary'] - The key for accessing account summary data.
 * @returns {Object} An object containing utility functions for report metrics.
 */
-export function useReportMetrics(accountSummaryKey = 'getAccountSummary') {
+export function useReportMetrics(
+  accountSummaryKey = 'getAccountSummary',
+  summarFetchingKey = 'getAccountSummaryFetchingStatus'
+) {
  const accountSummary = useMapGetter(accountSummaryKey);
+  const fetchingStatus = useMapGetter(summarFetchingKey);

  /**
   * Calculates the trend percentage for a given metric.
@@ -53,5 +57,6 @@ export function useReportMetrics(accountSummaryKey = 'getAccountSummary') {
    calculateTrend,
    isAverageMetricType,
    displayMetric,
+    fetchingStatus,
  };
 }
@@ -0,0 +1,22 @@
+import { computed } from 'vue';
+
+/**
+ * Composable to extract translation state/content from contentAttributes.
+ * @param {Ref|Reactive} contentAttributes - Ref or reactive object containing `translations` property
+ * @returns {Object} { hasTranslations, translationContent }
+ */
+export function useTranslations(contentAttributes) {
+  const hasTranslations = computed(() => {
+    if (!contentAttributes.value) return false;
+    const { translations = {} } = contentAttributes.value;
+    return Object.keys(translations || {}).length > 0;
+  });
+
+  const translationContent = computed(() => {
+    if (!hasTranslations.value) return null;
+    const translations = contentAttributes.value.translations;
+    return translations[Object.keys(translations)[0]];
+  });
+
+  return { hasTranslations, translationContent };
+}
@@ -6,6 +6,7 @@ export const DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER = Object.freeze([
  { name: 'macros' },
  { name: 'conversation_info' },
  { name: 'contact_attributes' },
+  { name: 'contact_notes' },
  { name: 'previous_conversation' },
  { name: 'conversation_participants' },
  { name: 'shopify_orders' },
@@ -36,7 +37,7 @@ const useConversationSidebarItemsOrder = uiSettings => {
    const { conversation_sidebar_items_order: itemsOrder } = uiSettings.value;
    // If the sidebar order is not set, use the default order.
    if (!itemsOrder) {
-      return DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER;
+      return [...DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER];
    }
    // Create a copy of itemsOrder to avoid mutating the original store object.
    const itemsOrderCopy = [...itemsOrder];
@@ -34,6 +34,7 @@ export const FEATURE_FLAGS = {
  CUSTOM_ROLES: 'custom_roles',
  CHATWOOT_V4: 'chatwoot_v4',
  REPORT_V4: 'report_v4',
+  CHANNEL_INSTAGRAM: 'channel_instagram',
  CONTACT_CHATWOOT_SUPPORT_TEAM: 'contact_chatwoot_support_team',
 };

@@ -16,6 +16,15 @@ export const getUserPermissions = (user, accountId) => {
  return currentAccount.permissions || [];
 };

+export const getUserRole = (user, accountId) => {
+  const currentAccount = getCurrentAccount(user, accountId) || {};
+  if (currentAccount.custom_role_id) {
+    return 'custom_role';
+  }
+
+  return currentAccount.role || 'agent';
+};
+
 const isPermissionsPresentInRoute = route =>
  route.meta && route.meta.permissions;

@@ -1,6 +1,44 @@
-export const buildPortalURL = portalSlug => {
-  const { hostURL, helpCenterURL } = window.chatwootConfig;
+/**
+ * Formats a custom domain with https protocol if needed
+ * @param {string} customDomain - The custom domain to format
+ * @returns {string} Formatted domain with https protocol
+ */
+const formatCustomDomain = customDomain =>
+  customDomain.startsWith('https') ? customDomain : `https://${customDomain}`;
+
+/**
+ * Gets the default base URL from configuration
+ * @returns {string} The default base URL
+ * @throws {Error} If no valid base URL is found
+ */
+const getDefaultBaseURL = () => {
+  const { hostURL, helpCenterURL } = window.chatwootConfig || {};
  const baseURL = helpCenterURL || hostURL || '';
+
+  if (!baseURL) {
+    throw new Error('No valid base URL found in configuration');
+  }
+
+  return baseURL;
+};
+
+/**
+ * Gets the base URL from configuration or custom domain
+ * @param {string} [customDomain] - Optional custom domain for the portal
+ * @returns {string} The base URL for the portal
+ */
+const getPortalBaseURL = customDomain =>
+  customDomain ? formatCustomDomain(customDomain) : getDefaultBaseURL();
+
+/**
+ * Builds a portal URL using the provided portal slug and optional custom domain
+ * @param {string} portalSlug - The slug identifier for the portal
+ * @param {string} [customDomain] - Optional custom domain for the portal
+ * @returns {string} The complete portal URL
+ * @throws {Error} If portalSlug is not provided or invalid
+ */
+export const buildPortalURL = (portalSlug, customDomain) => {
+  const baseURL = getPortalBaseURL(customDomain);
  return `${baseURL}/hc/${portalSlug}`;
 };

@@ -8,9 +46,10 @@ export const buildPortalArticleURL = (
  portalSlug,
  categorySlug,
  locale,
-  articleSlug
+  articleSlug,
+  customDomain
 ) => {
-  const portalURL = buildPortalURL(portalSlug);
+  const portalURL = buildPortalURL(portalSlug, customDomain);
  return `${portalURL}/articles/${articleSlug}`;
 };

@@ -25,5 +25,47 @@ describe('PortalHelper', () => {
      ).toEqual('https://help.chatwoot.com/hc/handbook/articles/article-slug');
      window.chatwootConfig = {};
    });
+
+    it('returns the correct url with custom domain', () => {
+      window.chatwootConfig = {
+        hostURL: 'https://app.chatwoot.com',
+        helpCenterURL: 'https://help.chatwoot.com',
+      };
+      expect(
+        buildPortalArticleURL(
+          'handbook',
+          'culture',
+          'fr',
+          'article-slug',
+          'custom-domain.dev'
+        )
+      ).toEqual('https://custom-domain.dev/hc/handbook/articles/article-slug');
+    });
+
+    it('handles https in custom domain correctly', () => {
+      window.chatwootConfig = {
+        hostURL: 'https://app.chatwoot.com',
+        helpCenterURL: 'https://help.chatwoot.com',
+      };
+      expect(
+        buildPortalArticleURL(
+          'handbook',
+          'culture',
+          'fr',
+          'article-slug',
+          'https://custom-domain.dev'
+        )
+      ).toEqual('https://custom-domain.dev/hc/handbook/articles/article-slug');
+    });
+
+    it('uses hostURL when helpCenterURL is not available', () => {
+      window.chatwootConfig = {
+        hostURL: 'https://app.chatwoot.com',
+        helpCenterURL: '',
+      };
+      expect(
+        buildPortalArticleURL('handbook', 'culture', 'fr', 'article-slug')
+      ).toEqual('https://app.chatwoot.com/hc/handbook/articles/article-slug');
+    });
  });
 });
@@ -2,23 +2,13 @@
  "AGENT_BOTS": {
    "HEADER": "Bots",
    "LOADING_EDITOR": "Loading editor...",
-    "DESCRIPTION": "Agent Bots are like the most fabulous members of your team. They can handle the small stuff, so you can focus on the stuff that matters. Give them a try.You can manage your bots from this page or create new ones using the 'Configure new bot' button.",
+    "DESCRIPTION": "Agent Bots are like the most fabulous members of your team. They can handle the small stuff, so you can focus on the stuff that matters. Give them a try. You can manage your bots from this page or create new ones using the 'Add Bot' button.",
    "LEARN_MORE": "Learn about agent bots",
-    "CSML_BOT_EDITOR": {
-      "NAME": {
-        "LABEL": "Bot name",
-        "PLACEHOLDER": "Name your bot.",
-        "ERROR": "Bot name is required."
-      },
-      "DESCRIPTION": {
-        "LABEL": "Bot description",
-        "PLACEHOLDER": "What does this bot do?"
-      },
-      "BOT_CONFIG": {
-        "ERROR": "Please enter your CSML bot configuration above.",
-        "API_ERROR": "Your CSML configuration is invalid. Please fix it and try again."
-      },
-      "SUBMIT": "Validate and save"
+    "GLOBAL_BOT": "System bot",
+    "GLOBAL_BOT_BADGE": "System",
+    "AVATAR": {
+      "SUCCESS_DELETE": "Bot avatar deleted successfully",
+      "ERROR_DELETE": "Error deleting bot avatar, please try again"
    },
    "BOT_CONFIGURATION": {
      "TITLE": "Select an agent bot",
@@ -32,7 +22,7 @@
      "SELECT_PLACEHOLDER": "Select bot"
    },
    "ADD": {
-      "TITLE": "Configure new bot",
+      "TITLE": "Add Bot",
      "CANCEL_BUTTON_TEXT": "Cancel",
      "API": {
        "SUCCESS_MESSAGE": "Bot added successfully.",
@@ -40,16 +30,22 @@
      }
    },
    "LIST": {
-      "404": "No bots found. You can create a bot by clicking the 'Configure new bot' button ↗",
+      "404": "No bots found. You can create a bot by clicking the 'Add Bot' button.",
      "LOADING": "Fetching bots...",
-      "TYPE": "Bot type"
+      "TABLE_HEADER": {
+        "DETAILS": "Bot Details",
+        "URL": "Webhook URL"
+      }
    },
    "DELETE": {
      "BUTTON_TEXT": "Delete",
      "TITLE": "Delete bot",
-      "SUBMIT": "Delete",
-      "CANCEL_BUTTON_TEXT": "Cancel",
-      "DESCRIPTION": "Are you sure you want to delete this bot? This action is irreversible.",
+      "CONFIRM": {
+        "TITLE": "Confirm Deletion",
+        "MESSAGE": "Are you sure you want to delete {name}?",
+        "YES": "Yes, Delete",
+        "NO": "No, Keep"
+      },
      "API": {
        "SUCCESS_MESSAGE": "Bot deleted successfully.",
        "ERROR_MESSAGE": "Could not delete bot. Please try again."
@@ -57,17 +53,44 @@
    },
    "EDIT": {
      "BUTTON_TEXT": "Edit",
-      "LOADING": "Fetching bots...",
      "TITLE": "Edit bot",
-      "CANCEL_BUTTON_TEXT": "Cancel",
      "API": {
        "SUCCESS_MESSAGE": "Bot updated successfully.",
        "ERROR_MESSAGE": "Could not update bot. Please try again."
      }
    },
+    "FORM": {
+      "AVATAR": {
+        "LABEL": "Bot avatar"
+      },
+      "NAME": {
+        "LABEL": "Bot name",
+        "PLACEHOLDER": "Enter bot name",
+        "REQUIRED": "Bot name is required"
+      },
+      "DESCRIPTION": {
+        "LABEL": "Description",
+        "PLACEHOLDER": "What does this bot do?"
+      },
+      "WEBHOOK_URL": {
+        "LABEL": "Webhook URL",
+        "PLACEHOLDER": "https://example.com/webhook",
+        "REQUIRED": "Webhook URL is required"
+      },
+      "ERRORS": {
+        "NAME": "Bot name is required",
+        "URL": "Webhook URL is required",
+        "VALID_URL": "Please enter a valid URL starting with http:// or https://"
+      },
+      "CANCEL": "Cancel",
+      "CREATE": "Create Bot",
+      "UPDATE": "Update Bot"
+    },
+    "WEBHOOK": {
+      "DESCRIPTION": "Configure a webhook bot to integrate with your custom services. The bot will receive and process events from conversations and can respond to them."
+    },
    "TYPES": {
-      "WEBHOOK": "Webhook bot",
-      "CSML": "CSML bot"
+      "WEBHOOK": "Webhook bot"
    }
  }
 }
@@ -126,6 +126,44 @@
      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
    },
-    "NONE_OPTION": "None"
+    "NONE_OPTION": "None",
+    "EVENTS": {
+      "CONVERSATION_CREATED": "Conversation Created",
+      "CONVERSATION_UPDATED": "Conversation Updated",
+      "MESSAGE_CREATED": "Message Created",
+      "CONVERSATION_OPENED": "Conversation Opened"
+    },
+    "ACTIONS": {
+      "ASSIGN_AGENT": "Assign to Agent",
+      "ASSIGN_TEAM": "Assign a Team",
+      "ADD_LABEL": "Add a Label",
+      "REMOVE_LABEL": "Remove a Label",
+      "SEND_EMAIL_TO_TEAM": "Send an Email to Team",
+      "SEND_EMAIL_TRANSCRIPT": "Send an Email Transcript",
+      "MUTE_CONVERSATION": "Mute Conversation",
+      "SNOOZE_CONVERSATION": "Snooze Conversation",
+      "RESOLVE_CONVERSATION": "Resolve Conversation",
+      "SEND_WEBHOOK_EVENT": "Send Webhook Event",
+      "SEND_ATTACHMENT": "Send Attachment",
+      "SEND_MESSAGE": "Send a Message",
+      "CHANGE_PRIORITY": "Change Priority",
+      "ADD_SLA": "Add SLA"
+    },
+    "ATTRIBUTES": {
+      "MESSAGE_TYPE": "Message Type",
+      "MESSAGE_CONTAINS": "Message Contains",
+      "EMAIL": "Email",
+      "INBOX": "Inbox",
+      "CONVERSATION_LANGUAGE": "Conversation Language",
+      "PHONE_NUMBER": "Phone Number",
+      "STATUS": "Status",
+      "BROWSER_LANGUAGE": "Browser Language",
+      "MAIL_SUBJECT": "Email Subject",
+      "COUNTRY_NAME": "Country",
+      "REFERER_LINK": "Referrer Link",
+      "ASSIGNEE_NAME": "Assignee",
+      "TEAM_NAME": "Team",
+      "PRIORITY": "Priority"
+    }
  }
 }
@@ -43,5 +43,11 @@
  "FEATURE_SPOTLIGHT": {
    "LEARN_MORE": "Learn more",
    "WATCH_VIDEO": "Watch video"
+  },
+  "DURATION_INPUT": {
+    "MINUTES": "Minutes",
+    "HOURS": "Hours",
+    "DAYS": "Days",
+    "PLACEHOLDER": "Enter duration"
  }
 }
@@ -544,6 +544,9 @@
        "WROTE": "wrote",
        "YOU": "You",
        "SAVE": "Save note",
+        "EXPAND": "Expand",
+        "COLLAPSE": "Collapse",
+        "NO_NOTES": "No notes, you can add notes from the contact details page.",
        "EMPTY_STATE": "There are no notes associated to this contact. You can add a note by typing in the box above."
      }
    },
--- a/Show More
+++ b/Show More