Merge branch 'develop' into fix/widget-bubble

.env.example

@@ -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,8 +216,6 @@ 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
@@ -259,3 +257,4 @@ 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
+

.gitignore

@@ -71,6 +71,9 @@ test/cypress/videos/*
 /config/master.key
 /config/*.enc
 
+#ignore files under .vscode directory
+.vscode
+.cursor
 
 # yalc for local testing
 .yalc
@@ -89,8 +92,5 @@ yarn-debug.log*
 # https://vitejs.dev/guide/env-and-mode.html#env-files
 *.local
 
-
+# Claude.ai config file
-# TextEditors & AI Agents config files
+CLAUDE.md
-.vscode
-.claude/settings.local.json
-.cursor

.husky/pre-commit

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

.windsurf/rules/chatwoot.md

@@ -1 +0,0 @@
-../../AGENTS.md

AGENTS.md

@@ -1,58 +0,0 @@
-# Chatwoot Development Guidelines
-
-## Build / Test / Lint
-
-- **Setup**: `bundle install && pnpm install`
-- **Run Dev**: `pnpm dev` or `overmind start -f ./Procfile.dev`
-- **Lint JS/Vue**: `pnpm eslint` / `pnpm eslint:fix`
-- **Lint Ruby**: `bundle exec rubocop -a`
-- **Test JS**: `pnpm test` or `pnpm test:watch`
-- **Test Ruby**: `bundle exec rspec spec/path/to/file_spec.rb`
-- **Single Test**: `bundle exec rspec spec/path/to/file_spec.rb:LINE_NUMBER`
-- **Run Project**: `overmind start -f Procfile.dev`
-
-## Code Style
-
-- **Ruby**: Follow RuboCop rules (150 character max line length)
-- **Vue/JS**: Use ESLint (Airbnb base + Vue 3 recommended)
-- **Vue Components**: Use PascalCase
-- **Events**: Use camelCase
-- **I18n**: No bare strings in templates; use i18n
-- **Error Handling**: Use custom exceptions (`lib/custom_exceptions/`)
-- **Models**: Validate presence/uniqueness, add proper indexes
-- **Type Safety**: Use PropTypes in Vue, strong params in Rails
-- **Naming**: Use clear, descriptive names with consistent casing
-- **Vue API**: Always use Composition API with `<script setup>` at the top
-
-## Styling
-
-- **Tailwind Only**:  
-  - Do not write custom CSS  
-  - Do not use scoped CSS  
-  - Do not use inline styles  
-  - Always use Tailwind utility classes  
-- **Colors**: Refer to `tailwind.config.js` for color definitions
-
-## General Guidelines
-
-- MVP focus: Least code change, happy-path only
-- No unnecessary defensive programming
-- Break down complex tasks into small, testable units
-- Iterate after confirmation
-- Avoid writing specs unless explicitly asked
-- Remove dead/unreachable/unused code
-- Don’t write multiple versions or backups for the same logic — pick the best approach and implement it
-- Don't reference Claude in commit messages
-
-## Project-Specific
-
-- **Translations**:
-  - Only update `en.yml` and `en.json`
-  - Other languages are handled by the community
-  - Backend i18n → `en.yml`, Frontend i18n → `en.json`
-- **Frontend**:
-  - Use `components-next/` for message bubbles (the rest is being deprecated)
-
-## Ruby Best Practices
-
-- Use compact `module/class` definitions; avoid nested styles

CLAUDE.md

@@ -1 +0,0 @@
-AGENTS.md

Gemfile.lock

@@ -485,7 +485,7 @@ GEM
       uri
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
-    net-imap (0.4.20)
+    net-imap (0.4.19)
       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.8)
+    nokogiri (1.18.4)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.18.8-arm64-darwin)
+    nokogiri (1.18.4-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.8-x86_64-darwin)
+    nokogiri (1.18.4-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.8-x86_64-linux-gnu)
+    nokogiri (1.18.4-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.14)
+    rack (2.2.13)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
     rack-contrib (2.5.0)

app/builders/campaigns/campaign_conversation_builder.rb

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

app/builders/messages/instagram/base_message_builder.rb

@@ -94,10 +94,11 @@ class Messages::Instagram::BaseMessageBuilder < Messages::Messenger::MessageBuil
   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 @outgoing_echo
+
     return if message_content.blank? && all_unsupported_files?
 
     @message = conversation.messages.create!(message_params)

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

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

app/controllers/api/v1/accounts/channels/twilio_channels_controller.rb

@@ -1,6 +1,3 @@
-# TODO : Move this to inboxes controller and deprecate this controller
-# No need to retain this controller as we could handle everything centrally in inboxes controller
-
 class Api::V1::Accounts::Channels::TwilioChannelsController < Api::V1::Accounts::BaseController
   before_action :authorize_request
 

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

@@ -163,16 +163,9 @@ 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
-    permitted_params.except(:custom_attributes, :avatar_url)
+    # we want the merged custom attributes not the original one
-                    .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

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

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

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

@@ -1,6 +1,6 @@
 class Api::V1::Accounts::CustomFiltersController < Api::V1::Accounts::BaseController
   before_action :check_authorization
-  before_action :fetch_custom_filters, only: [:index]
+  before_action :fetch_custom_filters, except: [:create]
   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.account.custom_filters.create!(
+    @custom_filter = current_user.custom_filters.create!(
-      permitted_payload.merge(user: Current.user)
+      permitted_payload.merge(account_id: Current.account.id)
     )
     render json: { error: @custom_filter.errors.messages }, status: :unprocessable_entity and return unless @custom_filter.valid?
   end
@@ -27,16 +27,14 @@ class Api::V1::Accounts::CustomFiltersController < Api::V1::Accounts::BaseContro
   private
 
   def fetch_custom_filters
-    @custom_filters = Current.account.custom_filters.where(
+    @custom_filters = current_user.custom_filters.where(
-      user: Current.user,
+      account_id: Current.account.id,
       filter_type: permitted_params[:filter_type] || DEFAULT_FILTER_TYPE
     )
   end
 
   def fetch_custom_filter
-    @custom_filter = Current.account.custom_filters.where(
+    @custom_filter = @custom_filters.find(permitted_params[:id])
-      user: Current.user
-    ).find(permitted_params[:id])
   end
 
   def permitted_payload

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

@@ -42,9 +42,7 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   end
 
   def update
-    inbox_params = permitted_params.except(:channel, :csat_config)
+    @inbox.update!(permitted_params.except(:channel))
-    inbox_params[:csat_config] = format_csat_config(permitted_params[:csat_config]) if permitted_params[:csat_config].present?
-    @inbox.update!(inbox_params)
     update_inbox_working_hours
     update_channel if channel_update_required?
   end
@@ -123,22 +121,10 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
     @inbox.channel.save!
   end
 
-  def format_csat_config(config)
-    {
-      display_type: config['display_type'] || 'emoji',
-      message: config['message'] || '',
-      survey_rules: {
-        operator: config.dig('survey_rules', 'operator') || 'contains',
-        values: config.dig('survey_rules', 'values') || []
-      }
-    }
-  end
-
   def inbox_attributes
     [:name, :avatar, :greeting_enabled, :greeting_message, :enable_email_collect, :csat_survey_enabled,
      :enable_auto_assignment, :working_hours_enabled, :out_of_office_message, :timezone, :allow_messages_after_resolved,
-     :lock_to_single_conversation, :portal_id, :sender_name_type, :business_name,
+     :lock_to_single_conversation, :portal_id, :sender_name_type, :business_name]
-     { csat_config: [:display_type, :message, { survey_rules: [:operator, { values: [] }] }] }]
   end
 
   def permitted_params(channel_attributes = [])

app/controllers/api/v1/accounts_controller.rb

@@ -44,9 +44,8 @@ class Api::V1::AccountsController < Api::BaseController
   end
 
   def update
-    @account.assign_attributes(account_params.slice(:name, :locale, :domain, :support_email))
+    @account.assign_attributes(account_params.slice(:name, :locale, :domain, :support_email, :auto_resolve_duration))
     @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
@@ -84,17 +83,13 @@ class Api::V1::AccountsController < Api::BaseController
   end
 
   def account_params
-    params.permit(:account_name, :email, :name, :password, :locale, :domain, :support_email, :user_full_name)
+    params.permit(:account_name, :email, :name, :password, :locale, :domain, :support_email, :auto_resolve_duration, :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

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

@@ -2,15 +2,10 @@ class Api::V1::Widget::CampaignsController < Api::V1::Widget::BaseController
   skip_before_action :set_contact
 
   def index
-    account = @web_widget.inbox.account
+    @campaigns = @web_widget
-    @campaigns = if account.feature_enabled?('campaigns')
+                 .inbox
-                   @web_widget
+                 .campaigns
-                     .inbox
+                 .where(enabled: true, account_id: @web_widget.inbox.account_id)
-                     .campaigns
+                 .includes(:sender)
-                     .where(enabled: true, account_id: account.id)
-                     .includes(:sender)
-                 else
-                   []
-                 end
   end
 end

app/controllers/api/v2/accounts_controller.rb

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

app/controllers/concerns/access_token_auth_helper.rb

@@ -1,6 +1,6 @@
 module AccessTokenAuthHelper
   BOT_ACCESSIBLE_ENDPOINTS = {
-    'api/v1/accounts/conversations' => %w[toggle_status toggle_priority create update custom_attributes],
+    'api/v1/accounts/conversations' => %w[toggle_status toggle_priority create update],
     'api/v1/accounts/conversations/messages' => ['create'],
     'api/v1/accounts/conversations/assignments' => ['create']
   }.freeze

app/controllers/dashboard_controller.rb

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

app/controllers/devise_overrides/omniauth_callbacks_controller.rb

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

app/controllers/super_admin/accounts_controller.rb

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

app/controllers/twilio/callback_controller.rb

@@ -24,10 +24,9 @@ class Twilio::CallbackController < ApplicationController
       :Body,
       :ToCountry,
       :FromState,
-      *Array.new(10) { |i| :"MediaUrl#{i}" },
+      :MediaUrl0,
-      *Array.new(10) { |i| :"MediaContentType#{i}" },
+      :MediaContentType0,
-      :MessagingServiceSid,
+      :MessagingServiceSid
-      :NumMedia
     )
   end
 end

app/dashboards/account_dashboard.rb

@@ -9,17 +9,10 @@ class AccountDashboard < Administrate::BaseDashboard
   # on pages throughout the dashboard.
 
   enterprise_attribute_types = if ChatwootApp.enterprise?
-                                 attributes = {
+                                 {
-                                   limits: AccountLimitsField
+                                   limits: Enterprise::AccountLimitsField,
+                                   all_features: Enterprise::AccountFeaturesField
                                  }
-
-                                 # Only show manually managed features in Chatwoot Cloud deployment
-                                 attributes[:manually_managed_features] = ManuallyManagedFeaturesField if ChatwootApp.chatwoot_cloud?
-
-                                 # Add all_features last so it appears after manually_managed_features
-                                 attributes[:all_features] = AccountFeaturesField
-
-                                 attributes
                                else
                                  {}
                                end
@@ -53,14 +46,7 @@ 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 = if ChatwootApp.enterprise?
+  enterprise_show_page_attributes = ChatwootApp.enterprise? ? %i[custom_attributes limits all_features] : []
-                                      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
@@ -75,14 +61,7 @@ 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 = if ChatwootApp.enterprise?
+  enterprise_form_attributes = ChatwootApp.enterprise? ? %i[limits all_features] : []
-                                 attrs = %i[limits]
-                                 attrs << :manually_managed_features if ChatwootApp.chatwoot_cloud?
-                                 attrs << :all_features
-                                 attrs
-                               else
-                                 []
-                               end
   FORM_ATTRIBUTES = (%i[
     name
     locale
@@ -117,11 +96,6 @@ 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)
-    attrs = super + [limits: {}]
+    super + [limits: {}]
-
-    # Add manually_managed_features to permitted attributes only for Chatwoot Cloud
-    attrs << { manually_managed_features: [] } if ChatwootApp.chatwoot_cloud?
-
-    attrs
   end
 end

app/fields/enterprise/account_features_field.rb

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

app/fields/enterprise/account_limits_field.rb

@@ -1,6 +1,6 @@
 require 'administrate/field/base'
 
-class AccountLimitsField < Administrate::Field::Base
+class Enterprise::AccountLimitsField < Administrate::Field::Base
   def to_s
     data.present? ? data.to_json : { agents: nil, inboxes: nil, captain_responses: nil, captain_documents: nil }.to_json
   end

app/helpers/super_admin/account_features_helper.rb

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

app/javascript/dashboard/api/agentBots.js

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

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

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

app/javascript/dashboard/assets/scss/_next-colors.scss

@@ -29,19 +29,6 @@
     --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;
@@ -144,19 +131,6 @@
     --iris-11: 158 177 255;
     --iris-12: 224 223 254;
 
-    --blue-1: 10 17 28;
-    --blue-2: 15 24 38;
-    --blue-3: 15 39 72;
-    --blue-4: 10 49 99;
-    --blue-5: 18 61 117;
-    --blue-6: 29 84 134;
-    --blue-7: 40 89 156;
-    --blue-8: 48 106 186;
-    --blue-9: 39 129 246;
-    --blue-10: 21 116 231;
-    --blue-11: 126 182 255;
-    --blue-12: 205 227 255;
-
     --ruby-1: 25 17 19;
     --ruby-2: 30 21 23;
     --ruby-3: 58 20 30;

app/javascript/dashboard/components-next/Accordion/Accordion.vue

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

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

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

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

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

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

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

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

@@ -1,8 +1,6 @@
 <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';
@@ -16,63 +14,39 @@ 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 border-b border-n-strong group/note">
+  <div
-    <div class="flex items-center justify-between gap-2">
+    class="flex flex-col gap-2 py-2 mx-6 border-b border-n-strong group/note"
-      <div class="flex items-center gap-1.5 min-w-0">
+  >
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-1.5 py-2.5 min-w-0">
         <Avatar
           :name="note?.user?.name || 'Bot'"
-          :src="
+          :src="note?.user?.thumbnail || '/assets/images/chatwoot_bot.png'"
-            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 text-n-slate-12">{{ writtenBy }}</span>
+            <span class="font-medium">{{ writtenBy }}</span>
             {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.WROTE') }}
-            <span class="font-medium text-n-slate-12">
+            <span class="font-medium">{{ dynamicTime(note.createdAt) }}</span>
-              {{ dynamicTime(note.createdAt) }}
-            </span>
           </span>
         </div>
       </div>
       <Button
-        v-if="allowDelete"
         variant="faded"
         color="ruby"
         size="xs"
@@ -82,28 +56,8 @@ onMounted(() => {
       />
     </div>
     <p
-      ref="noteContentRef"
       v-dompurify-html="formatMessage(note.content || '')"
-      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="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="{
-        'line-clamp-4': collapsible && !isExpanded && needsCollapse,
-      }"
     />
-    <p v-if="collapsible && needsCollapse">
-      <Button
-        variant="faded"
-        color="blue"
-        size="xs"
-        :icon="isExpanded ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
-        @click="() => toggleExpanded()"
-      >
-        <template v-if="isExpanded">
-          {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.COLLAPSE') }}
-        </template>
-        <template v-else>
-          {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.EXPAND') }}
-        </template>
-      </Button>
-    </p>
   </div>
 </template>

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue

@@ -200,7 +200,6 @@ defineExpose({ state, isSubmitDisabled });
                 :label="state.icon"
                 color="slate"
                 size="sm"
-                type="button"
                 :icon="!state.icon ? 'i-lucide-smile-plus' : ''"
                 class="!h-[2.4rem] !w-[2.375rem] absolute top-[1.94rem] !outline-none !rounded-[0.438rem] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
                 @click="isEmojiPickerOpen = !isEmojiPickerOpen"

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

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

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

@@ -6,9 +6,8 @@ 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, helpers } from '@vuelidate/validators';
+import { required, minLength } 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';
@@ -32,16 +31,7 @@ const state = reactive({
 
 const rules = {
   name: { required, minLength: minLength(2) },
-  slug: {
+  slug: { required },
-    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);
@@ -50,9 +40,9 @@ const nameError = computed(() =>
   v$.value.name.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.ERROR') : ''
 );
 
-const slugError = computed(() => {
+const slugError = computed(() =>
-  return v$.value.slug.$errors[0]?.$message || '';
+  v$.value.slug.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.ERROR') : ''
-});
+);
 
 const isSubmitDisabled = computed(() => v$.value.$invalid);
 
@@ -141,7 +131,6 @@ defineExpose({ dialogRef });
         :message="
           nameError || t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.MESSAGE')
         "
-        @blur="v$.name.$touch()"
       />
       <Input
         id="portal-slug"
@@ -151,8 +140,6 @@ defineExpose({ dialogRef });
         :label="t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.LABEL')"
         :message-type="slugError ? 'error' : 'info'"
         :message="slugError || buildPortalURL(state.slug)"
-        @input="v$.slug.$touch()"
-        @blur="v$.slug.$touch()"
       />
     </div>
   </Dialog>

app/javascript/dashboard/components-next/TeleportWithDirection.vue

@@ -1,28 +0,0 @@
-<!--
- * 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>

app/javascript/dashboard/components-next/captain/PageLayout.vue

@@ -2,7 +2,6 @@
 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';
@@ -24,10 +23,6 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  backUrl: {
-    type: [String, Object],
-    default: '',
-  },
   buttonPolicy: {
     type: Array,
     default: () => [],
@@ -44,10 +39,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  showKnowMore: {
-    type: Boolean,
-    default: true,
-  },
   isEmpty: {
     type: Boolean,
     default: false,
@@ -82,23 +73,19 @@ 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
+            <div v-if="!isEmpty" class="flex items-center gap-2">
-              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 && buttonLabel"
+            v-if="!showPaywall"
             v-on-clickaway="() => emit('close')"
             class="relative group/campaign-button"
           >
@@ -117,7 +104,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] h-full mx-auto py-4">
+      <div class="w-full max-w-[60rem] mx-auto py-4">
         <slot v-if="!showPaywall" name="controls" />
         <div
           v-if="isFetching"

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

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

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

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

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

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

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

@@ -1,309 +0,0 @@
-<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,
-    config: {
-      ...props.assistant.config,
-      product_name: state.productName,
-    },
-  };
-
-  emit('submit', payload);
-};
-
-const handleSystemMessagesUpdate = async () => {
-  const result = await Promise.all([
-    v$.value.welcomeMessage.$validate(),
-    v$.value.handoffMessage.$validate(),
-    v$.value.resolutionMessage.$validate(),
-  ]).then(results => results.every(Boolean));
-  if (!result) return;
-
-  const payload = {
-    config: {
-      ...props.assistant.config,
-      welcome_message: state.welcomeMessage,
-      handoff_message: state.handoffMessage,
-      resolution_message: state.resolutionMessage,
-    },
-  };
-
-  emit('submit', payload);
-};
-
-const handleInstructionsUpdate = async () => {
-  const result = await v$.value.instructions.$validate();
-  if (!result) return;
-
-  const payload = {
-    config: {
-      ...props.assistant.config,
-      instructions: state.instructions,
-    },
-  };
-
-  emit('submit', payload);
-};
-
-const handleFeaturesUpdate = () => {
-  const payload = {
-    config: {
-      ...props.assistant.config,
-      feature_faq: state.features.conversationFaqs,
-      feature_memory: state.features.memories,
-    },
-  };
-
-  emit('submit', payload);
-};
-
-watch(
-  () => props.assistant,
-  newAssistant => {
-    if (props.mode === 'edit' && newAssistant) {
-      updateStateFromAssistant(newAssistant);
-    }
-  },
-  { immediate: true }
-);
-</script>
-
-<template>
-  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
-    <!-- Basic Information Section -->
-    <Accordion
-      :title="t('CAPTAIN.ASSISTANTS.FORM.SECTIONS.BASIC_INFO')"
-      is-open
-    >
-      <div class="flex flex-col gap-4 pt-4">
-        <Input
-          v-model="state.name"
-          :label="t('CAPTAIN.ASSISTANTS.FORM.NAME.LABEL')"
-          :placeholder="t('CAPTAIN.ASSISTANTS.FORM.NAME.PLACEHOLDER')"
-          :message="formErrors.name"
-          :message-type="formErrors.name ? 'error' : 'info'"
-        />
-
-        <Editor
-          v-model="state.description"
-          :label="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.LABEL')"
-          :placeholder="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.PLACEHOLDER')"
-          :message="formErrors.description"
-          :message-type="formErrors.description ? 'error' : 'info'"
-        />
-
-        <Input
-          v-model="state.productName"
-          :label="t('CAPTAIN.ASSISTANTS.FORM.PRODUCT_NAME.LABEL')"
-          :placeholder="t('CAPTAIN.ASSISTANTS.FORM.PRODUCT_NAME.PLACEHOLDER')"
-          :message="formErrors.productName"
-          :message-type="formErrors.productName ? 'error' : 'info'"
-        />
-
-        <div class="flex justify-end">
-          <Button
-            size="small"
-            :loading="isLoading"
-            @click="handleBasicInfoUpdate"
-          >
-            {{ t('CAPTAIN.ASSISTANTS.FORM.UPDATE') }}
-          </Button>
-        </div>
-      </div>
-    </Accordion>
-
-    <!-- Instructions Section -->
-    <Accordion :title="t('CAPTAIN.ASSISTANTS.FORM.SECTIONS.INSTRUCTIONS')">
-      <div class="flex flex-col gap-4 pt-4">
-        <Editor
-          v-model="state.instructions"
-          :placeholder="t('CAPTAIN.ASSISTANTS.FORM.INSTRUCTIONS.PLACEHOLDER')"
-          :message="formErrors.instructions"
-          :max-length="20000"
-          :message-type="formErrors.instructions ? 'error' : 'info'"
-        />
-
-        <div class="flex justify-end">
-          <Button
-            size="small"
-            :loading="isLoading"
-            :label="t('CAPTAIN.ASSISTANTS.FORM.UPDATE')"
-            @click="handleInstructionsUpdate"
-          />
-        </div>
-      </div>
-    </Accordion>
-
-    <!-- Greeting Messages Section -->
-    <Accordion :title="t('CAPTAIN.ASSISTANTS.FORM.SECTIONS.SYSTEM_MESSAGES')">
-      <div class="flex flex-col gap-4 pt-4">
-        <Editor
-          v-model="state.handoffMessage"
-          :label="t('CAPTAIN.ASSISTANTS.FORM.HANDOFF_MESSAGE.LABEL')"
-          :placeholder="
-            t('CAPTAIN.ASSISTANTS.FORM.HANDOFF_MESSAGE.PLACEHOLDER')
-          "
-          :message="formErrors.handoffMessage"
-          :message-type="formErrors.handoffMessage ? 'error' : 'info'"
-        />
-
-        <Editor
-          v-model="state.resolutionMessage"
-          :label="t('CAPTAIN.ASSISTANTS.FORM.RESOLUTION_MESSAGE.LABEL')"
-          :placeholder="
-            t('CAPTAIN.ASSISTANTS.FORM.RESOLUTION_MESSAGE.PLACEHOLDER')
-          "
-          :message="formErrors.resolutionMessage"
-          :message-type="formErrors.resolutionMessage ? 'error' : 'info'"
-        />
-
-        <div class="flex justify-end">
-          <Button
-            size="small"
-            :loading="isLoading"
-            :label="t('CAPTAIN.ASSISTANTS.FORM.UPDATE')"
-            @click="handleSystemMessagesUpdate"
-          />
-        </div>
-      </div>
-    </Accordion>
-
-    <!-- Features Section -->
-    <Accordion :title="t('CAPTAIN.ASSISTANTS.FORM.SECTIONS.FEATURES')">
-      <div class="flex flex-col gap-4 pt-4">
-        <div class="flex flex-col gap-2">
-          <label class="text-sm font-medium text-n-slate-12">
-            {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.TITLE') }}
-          </label>
-          <div class="flex flex-col gap-2">
-            <label class="flex items-center gap-2">
-              <input
-                v-model="state.features.conversationFaqs"
-                type="checkbox"
-                class="form-checkbox"
-              />
-              {{
-                t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CONVERSATION_FAQS')
-              }}
-            </label>
-            <label class="flex items-center gap-2">
-              <input
-                v-model="state.features.memories"
-                type="checkbox"
-                class="form-checkbox"
-              />
-              {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_MEMORIES') }}
-            </label>
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <Button
-            size="small"
-            :loading="isLoading"
-            :label="t('CAPTAIN.ASSISTANTS.FORM.UPDATE')"
-            @click="handleFeaturesUpdate"
-          />
-        </div>
-      </div>
-    </Accordion>
-  </form>
-</template>

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

@@ -1,6 +1,5 @@
 <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';
 
@@ -40,8 +39,6 @@ const props = defineProps({
 
 const emit = defineEmits(['sendMessage', 'reset', 'setAssistant']);
 
-const { t } = useI18n();
-
 const COPILOT_USER_ROLES = ['assistant', 'system'];
 
 const sendMessage = message => {
@@ -50,7 +47,7 @@ const sendMessage = message => {
 };
 
 const useSuggestion = opt => {
-  emit('sendMessage', t(opt.prompt));
+  emit('sendMessage', opt.prompt);
   useTrack(COPILOT_EVENTS.SEND_SUGGESTED);
 };
 
@@ -69,16 +66,16 @@ const scrollToBottom = async () => {
 
 const promptOptions = [
   {
-    label: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.LABEL',
+    label: 'Summarize this conversation',
-    prompt: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.CONTENT',
+    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.SUGGEST.LABEL',
+    label: 'Suggest an answer',
-    prompt: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.CONTENT',
+    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.RATE.LABEL',
+    label: 'Rate this conversation',
-    prompt: 'CAPTAIN.COPILOT.PROMPTS.RATE.CONTENT',
+    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.`,
   },
 ];
 
@@ -92,7 +89,7 @@ watch(
 </script>
 
 <template>
-  <div class="flex flex-col h-full text-sm leading-6 tracking-tight w-full">
+  <div class="flex flex-col h-full text-sm leading-6 tracking-tight">
     <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
@@ -124,7 +121,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>{{ t(prompt.label) }}</span>
+          <span>{{ prompt.label }}</span>
           <Icon icon="i-lucide-chevron-right" />
         </button>
       </div>

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

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

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

@@ -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,6 +59,8 @@ const emit = defineEmits(['confirm', 'close']);
 
 const { t } = useI18n();
 
+const isRTL = useMapGetter('accounts/isRTL');
+
 const dialogRef = ref(null);
 const dialogContentRef = ref(null);
 
@@ -92,7 +94,7 @@ defineExpose({ open, close });
 </script>
 
 <template>
-  <TeleportWithDirection to="body">
+  <Teleport to="body">
     <dialog
       ref="dialogRef"
       class="w-full transition-all duration-300 ease-in-out shadow-xl rounded-xl"
@@ -100,6 +102,7 @@ defineExpose({ open, close });
         maxWidthClass,
         overflowYAuto ? 'overflow-y-auto' : 'overflow-visible',
       ]"
+      :dir="isRTL ? 'rtl' : 'ltr'"
       @close="close"
     >
       <OnClickOutside @trigger="close">
@@ -122,10 +125,7 @@ defineExpose({ open, close });
           <slot />
           <!-- Dialog content will be injected here -->
           <slot name="footer">
-            <div
+            <div class="flex items-center justify-between w-full gap-3">
-              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>
-  </TeleportWithDirection>
+  </Teleport>
 </template>
 
 <style scoped>

app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue

@@ -81,7 +81,6 @@ onMounted(() => {
     <button
       v-for="(item, index) in filteredMenuItems"
       :key="index"
-      type="button"
       class="inline-flex items-center justify-start w-full h-8 min-w-0 gap-2 px-2 py-1.5 transition-all duration-200 ease-in-out border-0 rounded-lg z-60 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
       :class="{
         'bg-n-alpha-1 dark:bg-n-solid-active': item.isSelected,

app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue

@@ -1,6 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
-import { useElementBounding, useWindowSize } from '@vueuse/core';
 import DropdownContainer from 'next/dropdown-menu/base/DropdownContainer.vue';
 import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
 import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
@@ -26,10 +25,6 @@ const props = defineProps({
     type: String,
     default: 'faded',
   },
-  label: {
-    type: String,
-    default: null,
-  },
 });
 
 const selected = defineModel({
@@ -37,13 +32,6 @@ const selected = defineModel({
   required: true,
 });
 
-const triggerRef = ref(null);
-const dropdownRef = ref(null);
-
-const { top } = useElementBounding(triggerRef);
-const { height } = useWindowSize();
-const { height: dropdownHeight } = useElementBounding(dropdownRef);
-
 const selectedOption = computed(() => {
   return props.options.find(o => o.value === selected.value) || {};
 });
@@ -53,16 +41,6 @@ const iconToRender = computed(() => {
   return selectedOption.value.icon || 'i-lucide-chevron-down';
 });
 
-const dropdownPosition = computed(() => {
-  const DROPDOWN_MAX_HEIGHT = 340;
-  // Get actual height if available or use default
-  const menuHeight = dropdownHeight.value
-    ? dropdownHeight.value + 20
-    : DROPDOWN_MAX_HEIGHT;
-  const spaceBelow = height.value - top.value;
-  return spaceBelow < menuHeight ? 'bottom-0' : 'top-0';
-});
-
 const updateSelected = newValue => {
   selected.value = newValue;
 };
@@ -73,23 +51,17 @@ const updateSelected = newValue => {
     <template #trigger="{ toggle }">
       <slot name="trigger" :toggle="toggle">
         <Button
-          ref="triggerRef"
           sm
           slate
           :variant
           :icon="iconToRender"
           :trailing-icon="selectedOption.icon ? false : true"
-          :label="label || (hideLabel ? null : selectedOption.label)"
+          :label="hideLabel ? null : selectedOption.label"
           @click="toggle"
         />
       </slot>
     </template>
-    <DropdownBody
+    <DropdownBody class="top-0 min-w-48 z-50" strong>
-      ref="dropdownRef"
-      class="min-w-48 z-50"
-      :class="dropdownPosition"
-      strong
-    >
       <DropdownSection class="max-h-80 overflow-scroll">
         <DropdownItem
           v-for="option in options"

app/javascript/dashboard/components-next/input/DurationInput.vue

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

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

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

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

@@ -19,17 +19,11 @@ const {
   isAWebWidgetInbox,
   isAWhatsAppChannel,
   isAnEmailChannel,
-  isAnInstagramChannel,
+  isAInstagramChannel,
 } = useInbox();
 
-const {
+const { status, isPrivate, createdAt, sourceId, messageType } =
-  status,
+  useMessageContext();
-  isPrivate,
-  createdAt,
-  sourceId,
-  messageType,
-  contentAttributes,
-} = useMessageContext();
 
 const readableTime = computed(() =>
   messageTimestamp(createdAt.value, 'LLL d, h:mm a')
@@ -37,11 +31,6 @@ 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;
 
@@ -60,7 +49,7 @@ const isSent = computed(() => {
     isAFacebookInbox.value ||
     isASmsInbox.value ||
     isATelegramChannel.value ||
-    isAnInstagramChannel.value
+    isAInstagramChannel.value
   ) {
     return sourceId.value && status.value === MESSAGE_STATUS.SENT;
   }
@@ -100,7 +89,7 @@ const isRead = computed(() => {
     isAWhatsAppChannel.value ||
     isATwilioChannel.value ||
     isAFacebookInbox.value ||
-    isAnInstagramChannel.value
+    isAInstagramChannel.value
   ) {
     return sourceId.value && status.value === MESSAGE_STATUS.READ;
   }

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

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

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

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

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

@@ -2,10 +2,10 @@
 import { computed } from 'vue';
 import BaseBubble from './Base.vue';
 import { useI18n } from 'vue-i18n';
-import { CSAT_RATINGS, CSAT_DISPLAY_TYPES } from 'shared/constants/messages';
+import { CSAT_RATINGS } from 'shared/constants/messages';
 import { useMessageContext } from '../provider.js';
 
-const { contentAttributes, content } = useMessageContext();
+const { contentAttributes } = useMessageContext();
 const { t } = useI18n();
 
 const response = computed(() => {
@@ -16,14 +16,6 @@ const isRatingSubmitted = computed(() => {
   return !!response.value.rating;
 });
 
-const displayType = computed(() => {
-  return contentAttributes.value?.displayType || CSAT_DISPLAY_TYPES.EMOJI;
-});
-
-const isStarRating = computed(() => {
-  return displayType.value === CSAT_DISPLAY_TYPES.STAR;
-});
-
 const rating = computed(() => {
   if (isRatingSubmitted.value) {
     return CSAT_RATINGS.find(
@@ -33,33 +25,16 @@ const rating = computed(() => {
 
   return null;
 });
-
-const starRatingValue = computed(() => {
-  return response.value.rating || 0;
-});
 </script>
 
 <template>
   <BaseBubble class="px-4 py-3" data-bubble-name="csat">
-    <h4>{{ content || t('CONVERSATION.CSAT_REPLY_MESSAGE') }}</h4>
+    <h4>{{ t('CONVERSATION.CSAT_REPLY_MESSAGE') }}</h4>
     <dl v-if="isRatingSubmitted" class="mt-4">
       <dt class="text-n-slate-11 italic">
         {{ t('CONVERSATION.RATING_TITLE') }}
       </dt>
-      <dd v-if="!isStarRating">
+      <dd>{{ t(rating.translationKey) }}</dd>
-        {{ t(rating.translationKey) }}
-      </dd>
-      <dd v-else class="flex mt-1">
-        <span v-for="n in 5" :key="n" class="text-2xl mr-1">
-          <i
-            :class="[
-              n <= starRatingValue
-                ? 'i-ri-star-fill text-n-amber-9'
-                : 'i-ri-star-line text-n-slate-10',
-            ]"
-          />
-        </span>
-      </dd>
 
       <dt v-if="response.feedbackMessage" class="text-n-slate-11 italic mt-2">
         {{ t('CONVERSATION.FEEDBACK_TITLE') }}

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

@@ -9,11 +9,9 @@ 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();
@@ -21,77 +19,35 @@ 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(() => messageType.value === MESSAGE_TYPES.OUTGOING);
+const isOutgoing = computed(() => {
+  return messageType.value === MESSAGE_TYPES.OUTGOING;
+});
 const isIncoming = computed(() => !isOutgoing.value);
 
-const { hasTranslations, translationContent } =
+const textToShow = computed(() => {
-  useTranslations(contentAttributes);
-
-const originalEmailText = computed(() => {
   const text =
     contentAttributes?.value?.email?.textContent?.full ?? content.value;
   return text?.replace(/\n/g, '<br>');
 });
 
-const originalEmailHtml = computed(
+// Use TextContent as the default to fullHTML
-  () =>
-    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(() => {
-  // If translations exist and we're showing translations (not original)
+  return contentAttributes?.value?.email?.htmlContent?.full ?? textToShow.value;
-  if (hasTranslations.value && !renderOriginal.value) {
-    return translationContent.value;
-  }
-  // Otherwise show original HTML
-  return originalEmailHtml.value;
 });
 
-const unquotedHTML = computed(() =>
+const unquotedHTML = computed(() => {
-  EmailQuoteExtractor.extractQuotes(fullHTML.value)
+  return 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 handleSeeOriginal = () => {
+const hasQuotedMessage = computed(() => {
-  renderOriginal.value = !renderOriginal.value;
+  return EmailQuoteExtractor.hasQuotes(fullHTML.value);
-};
+});
 </script>
 
 <template>
@@ -119,7 +75,7 @@ const handleSeeOriginal = () => {
       >
         <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-slate-4 via-n-slate-4 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-gray-3 via-n-gray-3 via-20% to-transparent"
         >
           <button
             class="text-n-slate-12 py-2 px-8 mx-auto text-center flex items-center gap-2"
@@ -132,12 +88,11 @@ const handleSeeOriginal = () => {
         <FormattedContent
           v-if="isOutgoing && content"
           class="text-n-slate-12"
-          :content="messageContent"
+          :content="content"
         />
         <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,
@@ -149,7 +104,6 @@ const handleSeeOriginal = () => {
           />
           <Letter
             v-else
-            :key="`letter-unquoted-${translationKeySuffix}`"
             class-name="prose prose-bubble !max-w-none letter-render"
             :html="unquotedHTML"
             :allowed-css-properties="[
@@ -181,12 +135,6 @@ const handleSeeOriginal = () => {
         </button>
       </div>
     </section>
-    <TranslationToggle
-      v-if="hasTranslations"
-      class="py-2 px-3"
-      :showing-original="renderOriginal"
-      @toggle="handleSeeOriginal"
-    />
     <section
       v-if="Array.isArray(attachments) && attachments.length"
       class="px-4 pb-4 space-y-2"

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

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

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

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

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

@@ -21,7 +21,6 @@ export const SENDER_TYPES = {
   CONTACT: 'Contact',
   USER: 'User',
   AGENT_BOT: 'agent_bot',
-  CAPTAIN_ASSISTANT: 'captain_assistant',
 };
 
 export const ORIENTATION = {

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

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

app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue

@@ -185,7 +185,6 @@ watch(
               "
               trailing-icon
               :disabled="disabled"
-              type="button"
               class="!h-[1.875rem] top-1 ltr:ml-px rtl:mr-px !px-2 outline-0 !outline-none !rounded-lg border-0 ltr:!rounded-r-none rtl:!rounded-l-none"
               @click="toggleCountryDropdown"
             >

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

@@ -15,13 +15,6 @@ 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']);
@@ -51,21 +44,14 @@ const handleSelect = value => {
       trailing-icon
       color="slate"
       variant="faded"
-      class="!w-fit max-w-40"
+      class="!w-fit"
       :class="{ 'dark:!bg-n-alpha-2 !bg-n-slate-9/20': isOpen }"
       :label="labelValue"
       @click="toggleMenu"
     />
     <div
       v-if="isOpen"
-      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="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="{
-        'ltr:left-full rtl:right-full ltr:ml-1 rtl:mr-1':
-          subMenuPosition === 'right',
-        'ltr:right-full rtl:left-full ltr:mr-1 rtl:ml-1':
-          subMenuPosition === 'left',
-        'top-full mt-1 ltr:right-0 rtl:left-0': subMenuPosition === 'bottom',
-      }"
     >
       <Button
         v-for="option in options"

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

@@ -8,6 +8,7 @@ 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';
@@ -36,6 +37,18 @@ 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
@@ -103,7 +116,32 @@ const newReportRoutes = () => [
   },
 ];
 
-const reportRoutes = computed(() => 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 menuItems = computed(() => {
   return [

app/javascript/dashboard/components-next/switch/Switch.vue

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

app/javascript/dashboard/components/ChatList.vue

@@ -8,7 +8,6 @@ import {
   computed,
   watch,
   onMounted,
-  onUnmounted,
   defineEmits,
 } from 'vue';
 import { useStore } from 'vuex';
@@ -30,7 +29,6 @@ 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';
@@ -44,7 +42,7 @@ import {
   useSnakeCase,
 } from 'dashboard/composables/useTransformKeys';
 import { useEmitter } from 'dashboard/composables/emitter';
-import { useEventListener, useScrollLock } from '@vueuse/core';
+import { useEventListener } from '@vueuse/core';
 
 import { emitter } from 'shared/helpers/mitt';
 
@@ -87,12 +85,6 @@ 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);
@@ -746,7 +738,6 @@ function allSelectedConversationsStatus(status) {
 
 function onContextMenuToggle(state) {
   isContextMenuOpen.value = state;
-  conversationListScrollLock.value = state;
 }
 
 function toggleSelectAll(check) {
@@ -770,10 +761,6 @@ onMounted(() => {
   }
 });
 
-onUnmounted(() => {
-  conversationListScrollLock.value = false;
-});
-
 provide('selectConversation', selectConversation);
 provide('deSelectConversation', deSelectConversation);
 provide('assignAgent', onAssignAgent);
@@ -841,17 +828,14 @@ watch(conversationFilters, (newVal, oldVal) => {
       @basic-filter-change="onBasicFilterChange"
     />
 
-    <TeleportWithDirection
+    <Teleport v-if="showAddFoldersModal" to="#saveFilterTeleportTarget">
-      v-if="showAddFoldersModal"
-      to="#saveFilterTeleportTarget"
-    >
       <SaveCustomView
         v-model="appliedFilter"
         :custom-views-query="foldersQuery"
         :open-last-saved-item="openLastSavedItemInFolder"
         @close="onCloseAddFoldersModal"
       />
-    </TeleportWithDirection>
+    </Teleport>
 
     <DeleteCustomViews
       v-if="showDeleteFoldersModal"
@@ -948,10 +932,7 @@ watch(conversationFilters, (newVal, oldVal) => {
         </template>
       </DynamicScroller>
     </div>
-    <TeleportWithDirection
+    <Teleport v-if="showAdvancedFilters" to="#conversationFilterTeleportTarget">
-      v-if="showAdvancedFilters"
-      to="#conversationFilterTeleportTarget"
-    >
       <ConversationFilter
         v-model="appliedFilter"
         :folder-name="activeFolderName"
@@ -960,6 +941,6 @@ watch(conversationFilters, (newVal, oldVal) => {
         @update-folder="onUpdateSavedFilter"
         @close="closeAdvanceFiltersModal"
       />
-    </TeleportWithDirection>
+    </Teleport>
   </div>
 </template>

app/javascript/dashboard/components/CustomAttribute.vue

@@ -49,12 +49,12 @@ export default {
       if (this.isAttributeTypeDate) {
         return this.value
           ? new Date(this.value || new Date()).toLocaleDateString()
-          : '---';
+          : '';
       }
       if (this.isAttributeTypeCheckbox) {
         return this.value === 'false' ? false : this.value;
       }
-      return this.hasValue ? this.value : '---';
+      return this.value;
     },
     formattedValue() {
       return this.isAttributeTypeDate
@@ -83,9 +83,6 @@ export default {
     isAttributeTypeDate() {
       return this.attributeType === 'date';
     },
-    hasValue() {
-      return this.value !== null && this.value !== '';
-    },
     urlValue() {
       return isValidURL(this.value) ? this.value : '---';
     },
@@ -226,7 +223,7 @@ export default {
             />
           </span>
           <NextButton
-            v-if="showActions && hasValue"
+            v-if="showActions && value"
             v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
             slate
             sm
@@ -284,13 +281,13 @@ export default {
           v-else
           class="group-hover:bg-n-slate-3 group-hover:dark:bg-n-solid-3 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
         >
-          {{ displayValue }}
+          {{ displayValue || '---' }}
         </p>
         <div
           class="flex items-center max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0"
         >
           <NextButton
-            v-if="showActions && hasValue"
+            v-if="showActions && value"
             v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
             xs
             slate

app/javascript/dashboard/components/layout/config/sidebarItems/settings.js

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

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

@@ -49,6 +49,13 @@ 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(

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

@@ -2,8 +2,6 @@
 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 },
@@ -59,7 +57,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <TeleportWithDirection to="body">
+  <Teleport to="body">
     <div
       ref="menuRef"
       class="fixed outline-none z-[9999] cursor-pointer"
@@ -69,5 +67,5 @@ onMounted(() => {
     >
       <slot />
     </div>
-  </TeleportWithDirection>
+  </Teleport>
 </template>

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

@@ -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 bg-n-alpha-3 backdrop-blur-[100px] border-0 outline outline-1 outline-n-container"
+      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"
     >
       <CalendarDateRange
         :selected-range="selectedRange"
         @set-range="setDateRange"
       />
       <div
-        class="flex flex-col w-[680px] ltr:border-l rtl:border-r border-n-strong"
+        class="flex flex-col w-[680px] ltr:border-l rtl:border-r border-slate-50 dark:border-slate-700/50"
       >
         <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-n-strong">
+            <div class="py-5 border-b border-slate-50 dark:border-slate-700/50">
               <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-n-strong'
+                  'ltr:border-r rtl:border-l border-slate-50 dark:border-slate-700/50'
                 "
               >
                 <CalendarYear

app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue

@@ -1,8 +1,6 @@
 <script setup>
 import { CALENDAR_PERIODS } from '../helpers/DatePickerHelper';
 
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
 defineProps({
   calendarType: {
     type: String,
@@ -40,38 +38,42 @@ const onClickSetView = (type, mode) => {
 
 <template>
   <div class="flex items-start justify-between w-full h-9">
-    <NextButton
+    <button
-      slate
+      class="p-1 rounded-lg hover:bg-slate-75 dark:hover:bg-slate-700/50 rtl:rotate-180"
-      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-n-slate-12 hover:text-n-brand"
+        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"
         @click="onClickSetView(calendarType, viewMode)"
       >
         {{ firstButtonLabel }}
       </button>
       <button
         v-if="buttonLabel"
-        class="p-0 text-sm font-medium text-center text-n-slate-12"
+        class="p-0 text-sm font-medium text-center text-slate-800 dark:text-slate-50"
-        :class="{ 'hover:text-n-brand': viewMode }"
+        :class="{ 'hover:text-woot-600 dark:hover:text-woot-600': viewMode }"
         @click="onClickSetView(calendarType, YEAR)"
       >
         {{ buttonLabel }}
       </button>
     </div>
-    <NextButton
+    <button
-      slate
+      class="p-1 rounded-lg hover:bg-slate-75 dark:hover:bg-slate-700/50 rtl:rotate-180"
-      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>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateInput.vue

@@ -65,7 +65,7 @@ const validateDate = () => {
     <input
       v-model="localDateValue"
       type="text"
-      class="!text-sm !mb-0 disabled:!outline-n-strong"
+      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"
       :placeholder="dateFormat"
       :disabled="isDisabled"
       @keypress.enter="validateDate"

app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue

@@ -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-n-slate-12"
+      class="w-full px-5 py-4 text-sm font-medium capitalize text-start text-slate-600 dark:text-slate-200"
     >
       {{ $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-n-alpha-2 dark:hover:bg-n-solid-3"
+        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="
           range.value === selectedRange
-            ? 'text-n-slate-12 bg-n-alpha-1 dark:bg-n-solid-active'
+            ? 'text-slate-800 dark:text-slate-50 bg-slate-50 dark:bg-slate-700'
-            : 'text-n-slate-12'
+            : 'text-slate-600 dark:text-slate-200'
         "
         @click="setDateRange(range)"
       >

app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue

@@ -1,6 +1,4 @@
 <script setup>
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
 const emit = defineEmits(['clear', 'change']);
 
 const onClickClear = () => {
@@ -13,19 +11,18 @@ const onClickApply = () => {
 </script>
 
 <template>
-  <div class="h-[56px] flex justify-between gap-2 px-2 py-3 items-center">
+  <div class="h-[56px] flex justify-between px-5 py-3 items-center">
-    <NextButton
+    <button
-      slate
+      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"
-      ghost
-      sm
-      :label="$t('DATE_PICKER.CLEAR_BUTTON')"
       @click="onClickClear"
-    />
+    >
-    <NextButton
+      {{ $t('DATE_PICKER.CLEAR_BUTTON') }}
-      sm
+    </button>
-      ghost
+    <button
-      :label="$t('DATE_PICKER.APPLY_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"
       @click="onClickApply"
-    />
+    >
+      {{ $t('DATE_PICKER.APPLY_BUTTON') }}
+    </button>
   </div>
 </template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue

@@ -71,12 +71,10 @@ const selectMonth = index => {
       <button
         v-for="(month, index) in months"
         :key="index"
-        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="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="{
-          'bg-n-brand text-white hover:bg-n-blue-10':
+          'bg-woot-600 dark:bg-woot-600 text-white dark:text-white hover:bg-woot-500 dark:bg-woot-700':
             index === activeMonthIndex,
-          'hover:bg-n-alpha-2 dark:hover:bg-n-solid-3':
-            index !== activeMonthIndex,
         }"
         @click="selectMonth(index)"
       >

app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue

@@ -107,16 +107,17 @@ const isNextDayInRange = day => {
 };
 
 const dayClasses = day => ({
-  'text-n-slate-10 pointer-events-none': !isInCurrentMonth(day),
+  'text-slate-500 dark:text-slate-400 pointer-events-none':
-  'text-n-slate-12 hover:text-n-slate-12 hover:bg-n-blue-6 dark:hover:bg-n-blue-7':
+    !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':
     isInCurrentMonth(day),
-  'bg-n-brand text-white':
+  'bg-woot-600 dark:bg-woot-600 text-white dark:text-white':
     isSelectedStartOrEndDate(day) && isInCurrentMonth(day),
-  'bg-n-blue-4 dark:bg-n-blue-5':
+  'bg-woot-50 dark:bg-woot-800':
     (isInRange(day) || isHoveringInRange(day)) &&
     !isSelectedStartOrEndDate(day) &&
     isInCurrentMonth(day),
-  'outline outline-1 outline-n-blue-8 -outline-offset-1 !text-n-blue-text':
+  'outline outline-1 outline-woot-200 -outline-offset-1 dark:outline-woot-700 text-woot-600 dark:text-woot-400':
     isToday(props.currentDate, day) && !isSelectedStartOrEndDate(day),
 });
 </script>
@@ -163,7 +164,7 @@ const dayClasses = day => ({
             !isLastDayOfMonth(day) &&
             isInCurrentMonth(day)
           "
-          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"
+          class="absolute bottom-0 w-6 h-8 ltr:-right-4 rtl:-left-4 bg-woot-50 dark:bg-woot-800 -z-10"
         />
       </div>
     </div>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue

@@ -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-n-slate-12 w-[144px] h-10 rounded-lg py-2.5 px-2"
+        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="{
-          'bg-n-brand text-white hover:bg-n-blue-10': year === activeYear,
+          'bg-woot-600 dark:bg-woot-600 text-white dark:text-white hover:bg-woot-500 dark:hover:bg-woot-700':
-          'hover:bg-n-alpha-2 dark:hover:bg-n-solid-3': year !== activeYear,
+            year === activeYear,
         }"
         @click="selectYear(year)"
       >

app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue

@@ -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-n-alpha-2 hover:bg-n-alpha-1 active:bg-n-alpha-1"
+    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"
     @click="openDatePicker"
   >
     <fluent-icon

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

@@ -17,9 +17,6 @@ export default {
     hasFbConfigured() {
       return window.chatwootConfig?.fbAppId;
     },
-    hasInstagramConfigured() {
-      return window.chatwootConfig?.instagramAppId;
-    },
     isActive() {
       const { key } = this.channel;
       if (Object.keys(this.enabledFeatures).length === 0) {
@@ -36,9 +33,7 @@ export default {
       }
 
       if (key === 'instagram') {
-        return (
+        return this.enabledFeatures.channel_instagram;
-          this.enabledFeatures.channel_instagram && this.hasInstagramConfigured
-        );
       }
 
       return [

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

@@ -220,7 +220,6 @@ const plugins = computed(() => {
       trigger: '@',
       showMenu: showUserMentions,
       searchTerm: mentionSearchKey,
-      isAllowed: () => props.isPrivate,
     }),
     createSuggestionPlugin({
       trigger: '/',

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

@@ -202,7 +202,7 @@ export default {
       if (this.isALineChannel) {
         return ALLOWED_FILE_TYPES_FOR_LINE;
       }
-      if (this.isAnInstagramChannel || this.isInstagramDM) {
+      if (this.isAInstagramChannel || this.isInstagramDM) {
         return ALLOWED_FILE_TYPES_FOR_INSTAGRAM;
       }
 

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

@@ -1,132 +1,93 @@
-<script setup>
+<script>
-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 { mapGetters } from 'vuex';
+import FilterItem from './FilterItem.vue';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
-defineProps({
+const CHAT_STATUS_FILTER_ITEMS = Object.freeze([
-  isOnExpandedLayout: {
+  'open',
-    type: Boolean,
+  'resolved',
-    required: true,
+  'pending',
-  },
+  'snoozed',
-});
+  'all',
-
-const emit = defineEmits(['changeFilter']);
-
-const store = useStore();
-const { t } = useI18n();
-
-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 = computed(() => [
-  {
-    label: t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.open.TEXT'),
-    value: 'open',
-  },
-  {
-    label: t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.resolved.TEXT'),
-    value: 'resolved',
-  },
-  {
-    label: t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.pending.TEXT'),
-    value: 'pending',
-  },
-  {
-    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 = computed(() => [
+const SORT_ORDER_ITEMS = Object.freeze([
-  {
+  'last_activity_at_asc',
-    label: t('CHAT_LIST.SORT_ORDER_ITEMS.last_activity_at_asc.TEXT'),
+  'last_activity_at_desc',
-    value: 'last_activity_at_asc',
+  'created_at_desc',
-  },
+  'created_at_asc',
-  {
+  'priority_desc',
-    label: t('CHAT_LIST.SORT_ORDER_ITEMS.last_activity_at_desc.TEXT'),
+  'priority_asc',
-    value: 'last_activity_at_desc',
+  'waiting_since_asc',
-  },
+  'waiting_since_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(
+export default {
-  () =>
+  components: {
-    chatStatusOptions.value.find(m => m.value === chatStatusFilter.value)
+    FilterItem,
-      ?.label || ''
+    NextButton,
-);
+  },
-
+  props: {
-const activeChatSortLabel = computed(
+    isOnExpandedLayout: {
-  () =>
+      type: Boolean,
-    chatSortOptions.value.find(m => m.value === chatSortFilter.value)?.label ||
+      required: true,
-    ''
-);
-
-const saveSelectedFilter = (type, value) => {
-  updateUISettings({
-    conversations_filter_by: {
-      status: type === 'status' ? value : currentStatusFilter.value,
-      order_by: type === 'sort' ? value : currentSortBy.value,
     },
-  });
+  },
-};
+  emits: ['changeFilter'],
+  setup() {
+    const { updateUISettings } = useUISettings();
 
-const handleStatusChange = value => {
+    return {
-  emit('changeFilter', value, 'status');
+      updateUISettings,
-  store.dispatch('setChatStatusFilter', value);
+    };
-  saveSelectedFilter('status', value);
+  },
-};
+  data() {
-
+    return {
-const handleSortChange = value => {
+      showActionsDropdown: false,
-  emit('changeFilter', value, 'sort');
+      chatStatusItems: CHAT_STATUS_FILTER_ITEMS,
-  store.dispatch('setChatSortFilter', value);
+      chatSortItems: SORT_ORDER_ITEMS,
-  saveSelectedFilter('sort', value);
+    };
+  },
+  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
+      );
+    },
+  },
+  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,
+        },
+      });
+    },
+  },
 };
 </script>
 
@@ -138,39 +99,39 @@ const handleSortChange = value => {
       slate
       faded
       xs
-      @click="toggleDropdown()"
+      @click="toggleDropdown"
     />
     <div
       v-if="showActionsDropdown"
-      v-on-click-outside="() => toggleDropdown()"
+      v-on-clickaway="closeDropdown"
-      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="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]"
       :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 gap-2">
+      <div class="flex items-center justify-between last:mt-4">
-        <span class="text-sm truncate text-n-slate-12">
+        <span class="text-xs font-medium text-n-slate-12">{{
-          {{ $t('CHAT_LIST.CHAT_SORT.STATUS') }}
+          $t('CHAT_LIST.CHAT_SORT.STATUS')
-        </span>
+        }}</span>
-        <SelectMenu
+        <FilterItem
-          :model-value="chatStatusFilter"
+          type="status"
-          :options="chatStatusOptions"
+          :selected-value="chatStatus"
-          :label="activeChatStatusLabel"
+          :items="chatStatusItems"
-          :sub-menu-position="isOnExpandedLayout ? 'left' : 'right'"
+          path-prefix="CHAT_LIST.CHAT_STATUS_FILTER_ITEMS"
-          @update:model-value="handleStatusChange"
+          @on-change-filter="onChangeFilter"
         />
       </div>
-      <div class="flex items-center justify-between last:mt-4 gap-2">
+      <div class="flex items-center justify-between last:mt-4">
-        <span class="text-sm truncate text-n-slate-12">
+        <span class="text-xs font-medium text-n-slate-12">{{
-          {{ $t('CHAT_LIST.CHAT_SORT.ORDER_BY') }}
+          $t('CHAT_LIST.CHAT_SORT.ORDER_BY')
-        </span>
+        }}</span>
-        <SelectMenu
+        <FilterItem
-          :model-value="chatSortFilter"
+          type="sort"
-          :options="chatSortOptions"
+          :selected-value="sortFilter"
-          :label="activeChatSortLabel"
+          :items="chatSortItems"
-          :sub-menu-position="isOnExpandedLayout ? 'left' : 'right'"
+          path-prefix="CHAT_LIST.SORT_ORDER_ITEMS"
-          @update:model-value="handleSortChange"
+          @on-change-filter="onChangeFilter"
         />
       </div>
     </div>

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

@@ -36,7 +36,6 @@ 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';
 
@@ -210,22 +209,6 @@ 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');
@@ -235,21 +218,15 @@ export default {
         if (additionalAttributes) {
           const {
             agent_reply_time_window_message: agentReplyTimeWindowMessage,
-            agent_reply_time_window: agentReplyTimeWindow,
           } = additionalAttributes;
-          return (
+          return agentReplyTimeWindowMessage;
-            agentReplyTimeWindowMessage ||
-            this.$t('CONVERSATION.API_HOURS_WINDOW', {
-              hours: agentReplyTimeWindow,
-            })
-          );
         }
         return '';
       }
       return this.$t('CONVERSATION.CANNOT_REPLY');
     },
     replyWindowLink() {
-      if (this.isAFacebookInbox || this.isAnInstagramChannel) {
+      if (this.isAFacebookInbox || this.isAInstagramChannel) {
         return REPLY_POLICY.FACEBOOK;
       }
       if (this.isAWhatsAppCloudChannel) {
@@ -264,7 +241,7 @@ export default {
       if (
         this.isAWhatsAppChannel ||
         this.isAFacebookInbox ||
-        this.isAnInstagramChannel
+        this.isAInstagramChannel
       ) {
         return this.$t('CONVERSATION.24_HOURS_WINDOW');
       }
@@ -520,12 +497,6 @@ export default {
       :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

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

@@ -241,27 +241,15 @@ export default {
       if (this.isAFacebookInbox) {
         return MESSAGE_MAX_LENGTH.FACEBOOK;
       }
-      if (this.isAnInstagramChannel) {
+      if (this.isAWhatsAppChannel) {
-        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() {
@@ -274,7 +262,7 @@ export default {
         this.isASmsInbox ||
         this.isATelegramChannel ||
         this.isALineChannel ||
-        this.isAnInstagramChannel
+        this.isAInstagramChannel
       );
     },
     replyButtonLabel() {
@@ -400,14 +388,9 @@ export default {
     },
   },
   watch: {
-    currentChat(conversation, oldConversation) {
+    currentChat(conversation) {
       const { can_reply: canReply } = conversation;
-      if (oldConversation && oldConversation.id !== conversation.id) {
+      this.setCCAndToEmailsFromLastChat();
-        // 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;
@@ -423,12 +406,13 @@ 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.
-    // This watcher handles two main cases:
+    // However, this update does not trigger the `currentChat` watcher.
-    // 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).
+    // We can add a deep watcher to it, but then, that would be too broad of a net to cast
-    // 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.
+    // And would impact performance too. So we watch the messages directly.
-    lastEmail: {
+    // The watcher here is `deep` too, because the messages array is mutated and
-      handler(lastEmail) {
+    // not replaced. So, a shallow watcher would not catch the change.
-        if (!lastEmail) return;
+    'currentChat.messages': {
+      handler() {
         this.setCCAndToEmailsFromLastChat();
       },
       deep: true,
@@ -702,11 +686,7 @@ export default {
           this.isATwilioWhatsAppChannel ||
           this.isAWhatsAppCloudChannel ||
           this.is360DialogWhatsAppChannel;
-        // When users send messages containing both text and attachments on Instagram, Instagram treats them as separate messages.
+        if (isOnWhatsApp && !this.isPrivate) {
-        // 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);
@@ -723,7 +703,7 @@ export default {
       }
     },
     sendMessageAsMultipleMessages(message) {
-      const messages = this.getMultipleMessagesPayload(message);
+      const messages = this.getMessagePayloadForWhatsapp(message);
       messages.forEach(messagePayload => {
         this.sendMessage(messagePayload);
       });
@@ -955,11 +935,11 @@ export default {
 
       return payload;
     },
-    getMultipleMessagesPayload(message) {
+    getMessagePayloadForWhatsapp(message) {
       const multipleMessagePayload = [];
 
       if (this.attachedFiles && this.attachedFiles.length) {
-        let caption = this.isAnInstagramChannel ? '' : message;
+        let caption = message;
         this.attachedFiles.forEach(attachment => {
           const attachedFile = this.globalConfig.directUploadsEnabled
             ? attachment.blobSignedId
@@ -974,19 +954,9 @@ export default {
 
           attachmentPayload = this.setReplyToInPayload(attachmentPayload);
           multipleMessagePayload.push(attachmentPayload);
-          // For WhatsApp, only the first attachment gets a caption
+          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,
@@ -1166,7 +1136,7 @@ export default {
         v-else-if="!showRichContentEditor"
         ref="messageInput"
         v-model="message"
-        class="rounded-none input"
+        class="input"
         :placeholder="messagePlaceHolder"
         :min-height="4"
         :signature="signatureToApply"

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

@@ -69,6 +69,10 @@ 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"

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

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

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

@@ -56,7 +56,7 @@ const unlinkIssue = () => {
 
 <template>
   <div
-    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"
+    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"
   >
     <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-n-slate-12">
+      <span class="mt-2 text-sm font-medium text-ash-900">
         {{ issue.title }}
       </span>
       <span
         v-if="issue.description"
-        class="mt-1 text-sm text-n-slate-11 line-clamp-3"
+        class="mt-1 text-sm text-ash-800 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-n-slate-4" />
+      <div v-if="assignee" class="w-px h-3 bg-ash-200" />
       <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-n-slate-12">
+        <h6 class="text-xs text-ash-900">
           {{ issue.state.name }}
         </h6>
       </div>
-      <div v-if="priorityLabel" class="w-px h-3 bg-n-slate-4" />
+      <div v-if="priorityLabel" class="w-px h-3 bg-ash-200" />
       <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-n-slate-12">{{ priorityLabel }}</h6>
+        <h6 class="text-xs text-ash-900">{{ 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-n-slate-11">
+      <span class="text-xs text-ash-800">
         {{
           $t('INTEGRATION_SETTINGS.LINEAR.ISSUE.CREATED_AT', {
             createdAt: formattedDate,

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

@@ -100,17 +100,14 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
+  <div class="relative" :class="{ group: linkedIssue }">
-    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 group-hover:bg-n-alpha-2"
+      class="!gap-1"
       @click="openIssue"
     >
       <fluent-icon
@@ -127,7 +124,7 @@ onMounted(() => {
       v-if="linkedIssue"
       :issue="linkedIssue.issue"
       :link-id="linkedIssue.id"
-      class="absolute right-0 top-[36px] invisible group-hover:visible"
+      class="absolute right-0 top-[40px] invisible group-hover:visible"
       @unlink-issue="unlinkIssue"
     />
     <woot-modal

app/javascript/dashboard/composables/spec/useTranslations.spec.js

@@ -1,39 +0,0 @@
-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');
-  });
-});

app/javascript/dashboard/composables/useAccount.js

@@ -1,6 +1,6 @@
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { useMapGetter, useStore } from './store';
+import { useMapGetter } from './store';
 
 /**
  * Composable for account-related operations.
@@ -12,7 +12,6 @@ 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(
@@ -45,12 +44,6 @@ export function useAccount() {
     };
   };
 
-  const updateAccount = async data => {
-    await store.dispatch('accounts/update', {
-      ...data,
-    });
-  };
-
   return {
     accountId,
     route,
@@ -59,6 +52,5 @@ export function useAccount() {
     accountScopedRoute,
     isCloudFeatureEnabled,
     isOnChatwootCloud,
-    updateAccount,
   };
 }

app/javascript/dashboard/composables/useInbox.js

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

app/javascript/dashboard/composables/useReportMetrics.js

@@ -7,12 +7,8 @@ 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(
+export function useReportMetrics(accountSummaryKey = 'getAccountSummary') {
-  accountSummaryKey = 'getAccountSummary',
-  summarFetchingKey = 'getAccountSummaryFetchingStatus'
-) {
   const accountSummary = useMapGetter(accountSummaryKey);
-  const fetchingStatus = useMapGetter(summarFetchingKey);
 
   /**
    * Calculates the trend percentage for a given metric.
@@ -57,6 +53,5 @@ export function useReportMetrics(
     calculateTrend,
     isAverageMetricType,
     displayMetric,
-    fetchingStatus,
   };
 }

app/javascript/dashboard/composables/useTranslations.js

@@ -1,22 +0,0 @@
-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 };
-}

app/javascript/dashboard/composables/useUISettings.js

@@ -6,7 +6,6 @@ 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' },
@@ -37,7 +36,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];

app/javascript/dashboard/helper/permissionsHelper.js

@@ -16,15 +16,6 @@ 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;
 

app/javascript/dashboard/helper/portalHelper.js

@@ -1,44 +1,6 @@
-/**
+export const buildPortalURL = portalSlug => {
- * Formats a custom domain with https protocol if needed
+  const { hostURL, helpCenterURL } = window.chatwootConfig;
- * @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}`;
 };
 
@@ -46,10 +8,9 @@ export const buildPortalArticleURL = (
   portalSlug,
   categorySlug,
   locale,
-  articleSlug,
+  articleSlug
-  customDomain
 ) => {
-  const portalURL = buildPortalURL(portalSlug, customDomain);
+  const portalURL = buildPortalURL(portalSlug);
   return `${portalURL}/articles/${articleSlug}`;
 };
 

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

@@ -25,47 +25,5 @@ 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');
-    });
   });
 });

app/javascript/dashboard/i18n/locale/am/agentBots.json

@@ -2,13 +2,23 @@
   "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 'Add 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 'Configure new bot' button.",
     "LEARN_MORE": "Learn about agent bots",
-    "GLOBAL_BOT": "System bot",
+    "CSML_BOT_EDITOR": {
-    "GLOBAL_BOT_BADGE": "System",
+      "NAME": {
-    "AVATAR": {
+        "LABEL": "Bot name",
-      "SUCCESS_DELETE": "Bot avatar deleted successfully",
+        "PLACEHOLDER": "Name your bot.",
-      "ERROR_DELETE": "Error deleting bot avatar, please try again"
+        "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"
     },
     "BOT_CONFIGURATION": {
       "TITLE": "Select an agent bot",
@@ -22,7 +32,7 @@
       "SELECT_PLACEHOLDER": "Select bot"
     },
     "ADD": {
-      "TITLE": "Add Bot",
+      "TITLE": "Configure new bot",
       "CANCEL_BUTTON_TEXT": "Cancel",
       "API": {
         "SUCCESS_MESSAGE": "Bot added successfully.",
@@ -30,22 +40,16 @@
       }
     },
     "LIST": {
-      "404": "No bots found. You can create a bot by clicking the 'Add Bot' button.",
+      "404": "No bots found. You can create a bot by clicking the 'Configure new bot' button ↗",
       "LOADING": "Fetching bots...",
-      "TABLE_HEADER": {
+      "TYPE": "Bot type"
-        "DETAILS": "Bot Details",
-        "URL": "Webhook URL"
-      }
     },
     "DELETE": {
       "BUTTON_TEXT": "Delete",
       "TITLE": "Delete bot",
-      "CONFIRM": {
+      "SUBMIT": "Delete",
-        "TITLE": "Confirm Deletion",
+      "CANCEL_BUTTON_TEXT": "Cancel",
-        "MESSAGE": "Are you sure you want to delete {name}?",
+      "DESCRIPTION": "Are you sure you want to delete this bot? This action is irreversible.",
-        "YES": "Yes, Delete",
-        "NO": "No, Keep"
-      },
       "API": {
         "SUCCESS_MESSAGE": "Bot deleted successfully.",
         "ERROR_MESSAGE": "Could not delete bot. Please try again."
@@ -53,44 +57,17 @@
     },
     "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"
+      "WEBHOOK": "Webhook bot",
+      "CSML": "CSML bot"
     }
   }
 }

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

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

app/javascript/dashboard/i18n/locale/am/components.json

@@ -43,11 +43,5 @@
   "FEATURE_SPOTLIGHT": {
     "LEARN_MORE": "Learn more",
     "WATCH_VIDEO": "Watch video"
-  },
-  "DURATION_INPUT": {
-    "MINUTES": "Minutes",
-    "HOURS": "Hours",
-    "DAYS": "Days",
-    "PLACEHOLDER": "Enter duration"
   }
 }