Merge branch 'develop' into feat/fix-inbox-type

.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)
-git diff --name-only --cached | xargs -I {} sh -c 'test -f "{}" && echo "{}"' | grep '\.rb$' | xargs -I {} bundle exec rubocop --force-exclusion -a "{}" || true
+# lint only staged ruby files
+git diff --name-only --cached | xargs ls -1 2>/dev/null | grep '\.rb$' | xargs bundle exec rubocop --force-exclusion -a
 
 # 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

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)

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/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/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)
-                    .merge({ custom_attributes: contact_custom_attributes })
-                    .merge({ additional_attributes: contact_additional_attributes })
+    # we want the merged custom attributes not the original one
+    permitted_params.except(:custom_attributes, :avatar_url).merge({ custom_attributes: contact_custom_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')
-    service.perform
-    message.update!(content_attributes: {})
+    message.update!(status: :sent, 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/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/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/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?
-                                      attrs = %i[custom_attributes limits]
-                                      attrs << :manually_managed_features if ChatwootApp.chatwoot_cloud?
-                                      attrs << :all_features
-                                      attrs
-                                    else
-                                      []
-                                    end
+  enterprise_show_page_attributes = ChatwootApp.enterprise? ? %i[custom_attributes limits all_features] : []
   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?
-                                 attrs = %i[limits]
-                                 attrs << :manually_managed_features if ChatwootApp.chatwoot_cloud?
-                                 attrs << :all_features
-                                 attrs
-                               else
-                                 []
-                               end
+  enterprise_form_attributes = ChatwootApp.enterprise? ? %i[limits all_features] : []
   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: {}]
-
-    # Add manually_managed_features to permitted attributes only for Chatwoot Cloud
-    attrs << { manually_managed_features: [] } if ChatwootApp.chatwoot_cloud?
-
-    attrs
+    super + [limits: {}]
   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/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/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 class="flex items-center justify-between gap-2">
-      <div class="flex items-center gap-1.5 min-w-0">
+  <div
+    class="flex flex-col gap-2 py-2 mx-6 border-b border-n-strong group/note"
+  >
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-1.5 py-2.5 min-w-0">
         <Avatar
           :name="note?.user?.name || 'Bot'"
-          :src="
-            note?.user?.name
-              ? note?.user?.thumbnail
-              : '/assets/images/chatwoot_bot.png'
-          "
+          :src="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">
-              {{ dynamicTime(note.createdAt) }}
-            </span>
+            <span class="font-medium">{{ 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="{
-        'line-clamp-4': collapsible && !isExpanded && needsCollapse,
-      }"
+      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"
     />
-    <p v-if="collapsible && needsCollapse">
-      <Button
-        variant="faded"
-        color="blue"
-        size="xs"
-        :icon="isExpanded ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
-        @click="() => toggleExpanded()"
-      >
-        <template v-if="isExpanded">
-          {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.COLLAPSE') }}
-        </template>
-        <template v-else>
-          {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.EXPAND') }}
-        </template>
-      </Button>
-    </p>
   </div>
 </template>

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

@@ -7,8 +7,8 @@ import { useStore, useStoreGetters } from 'dashboard/composables/store';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { useVuelidate } from '@vuelidate/core';
-import { required, minLength, helpers } from '@vuelidate/validators';
-import { shouldBeUrl, isValidSlug } from 'shared/helpers/Validators';
+import { required, minLength } from '@vuelidate/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: {
-    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
-    ),
-  },
+  slug: { required },
   homePageLink: { shouldBeUrl },
 };
 
@@ -80,9 +71,9 @@ const nameError = computed(() =>
   v$.value.name.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.ERROR') : ''
 );
 
-const slugError = computed(() => {
-  return v$.value.slug.$errors[0]?.$message || '';
-});
+const slugError = computed(() =>
+  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: {
-    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
-    ),
-  },
+  slug: { required },
 };
 
 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(() => {
-  return v$.value.slug.$errors[0]?.$message || '';
-});
+const slugError = computed(() =>
+  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/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
-              v-if="!isEmpty && showKnowMore"
-              class="flex items-center gap-2"
-            >
+            <div v-if="!isEmpty" 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
-        :to="{ name: 'captain_assistants_edit', params: { assistantId: id } }"
-        class="text-base text-n-slate-12 line-clamp-1 hover:underline transition-colors"
-      >
+      <span class="text-base text-n-slate-12 line-clamp-1">
         {{ 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 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,306 +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,
-    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="2000"
-          :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/dialog/Dialog.vue

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

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

@@ -19,7 +19,7 @@ const {
   isAWebWidgetInbox,
   isAWhatsAppChannel,
   isAnEmailChannel,
-  isAnInstagramChannel,
+  isAInstagramChannel,
 } = useInbox();
 
 const {
@@ -60,7 +60,7 @@ const isSent = computed(() => {
     isAFacebookInbox.value ||
     isASmsInbox.value ||
     isATelegramChannel.value ||
-    isAnInstagramChannel.value
+    isAInstagramChannel.value
   ) {
     return sourceId.value && status.value === MESSAGE_STATUS.SENT;
   }
@@ -100,7 +100,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/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 } =
-  useTranslations(contentAttributes);
-
-const originalEmailText = computed(() => {
+const textToShow = computed(() => {
   const text =
     contentAttributes?.value?.email?.textContent?.full ?? content.value;
   return text?.replace(/\n/g, '<br>');
 });
 
-const originalEmailHtml = computed(
-  () =>
-    contentAttributes?.value?.email?.htmlContent?.full ??
-    originalEmailText.value
-);
-
-const messageContent = computed(() => {
-  // If translations exist and we're showing translations (not original)
-  if (hasTranslations.value && !renderOriginal.value) {
-    return translationContent.value;
-  }
-  // Otherwise show original content
-  return content.value;
-});
-
-const textToShow = computed(() => {
-  // If translations exist and we're showing translations (not original)
-  if (hasTranslations.value && !renderOriginal.value) {
-    return translationContent.value;
-  }
-  // Otherwise show original text
-  return originalEmailText.value;
-});
-
+// Use TextContent as the default to fullHTML
 const fullHTML = computed(() => {
-  // If translations exist and we're showing translations (not original)
-  if (hasTranslations.value && !renderOriginal.value) {
-    return translationContent.value;
-  }
-  // Otherwise show original HTML
-  return originalEmailHtml.value;
+  return contentAttributes?.value?.email?.htmlContent?.full ?? textToShow.value;
 });
 
-const unquotedHTML = computed(() =>
-  EmailQuoteExtractor.extractQuotes(fullHTML.value)
-);
-
-const hasQuotedMessage = computed(() =>
-  EmailQuoteExtractor.hasQuotes(fullHTML.value)
-);
-
-// Ensure unique keys for <Letter> when toggling between original and translated views.
-// This forces Vue to re-render the component and update content correctly.
-const translationKeySuffix = computed(() => {
-  if (renderOriginal.value) return 'original';
-  if (hasTranslations.value) return 'translated';
-  return 'original';
+const unquotedHTML = computed(() => {
+  return EmailQuoteExtractor.extractQuotes(fullHTML.value);
 });
 
-const handleSeeOriginal = () => {
-  renderOriginal.value = !renderOriginal.value;
-};
+const hasQuotedMessage = computed(() => {
+  return EmailQuoteExtractor.hasQuotes(fullHTML.value);
+});
 </script>
 
 <template>
@@ -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 } =
-  useTranslations(contentAttributes);
+const hasTranslations = computed(() => {
+  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
-        v-if="hasTranslations"
-        class="-mt-3"
-        :showing-original="renderOriginal"
-        @toggle="handleSeeOriginal"
-      />
+      <span class="-mt-3">
+        <span
+          v-if="hasTranslations"
+          class="text-xs text-n-slate-11 cursor-pointer hover:underline"
+          @click="handleSeeOriginal"
+        >
+          {{ $t(viewToggleKey) }}
+        </span>
+      </span>
       <AttachmentChips :attachments="attachments" class="gap-2" />
       <template v-if="isTemplate">
         <div

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/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/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 (
-          this.enabledFeatures.channel_instagram && this.hasInstagramConfigured
-        );
+        return this.enabledFeatures.channel_instagram;
       }
 
       return [

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

@@ -210,20 +210,15 @@ export default {
       return contactLastSeenAt;
     },
 
-    // Check there is a instagram inbox exists with the same instagram_id
+    // Check there is a facebook inbox 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
-      );
+      return this.inbox.channel_type === INBOX_TYPES.FB && instagramInbox;
     },
 
     replyWindowBannerMessage() {
@@ -249,7 +244,7 @@ export default {
       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 +259,7 @@ export default {
       if (
         this.isAWhatsAppChannel ||
         this.isAFacebookInbox ||
-        this.isAnInstagramChannel
+        this.isAInstagramChannel
       ) {
         return this.$t('CONVERSATION.24_HOURS_WINDOW');
       }

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) {
-        return MESSAGE_MAX_LENGTH.INSTAGRAM;
-      }
-      if (this.isATwilioWhatsAppChannel) {
+      if (this.isAWhatsAppChannel) {
         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) {
-        // 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();
-      }
+      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:
-    // 1. When switching conversations and messages are fetched/updated, ensures CC/BCC fields are set from the latest OUTGOING/INCOMING email (not activity/private messages).
-    // 2. Fixes and issue where CC/BCC fields could be reset/lost after assignment/activity actions or message mutations that did not represent a true email context change.
-    lastEmail: {
-      handler(lastEmail) {
-        if (!lastEmail) return;
+    // However, this update does not trigger the `currentChat` watcher.
+    // We can add a deep watcher to it, but then, that would be too broad of a net to cast
+    // And would impact performance too. So we watch the messages directly.
+    // The watcher here is `deep` too, because the messages array is mutated and
+    // not replaced. So, a shallow watcher would not catch the change.
+    'currentChat.messages': {
+      handler() {
         this.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.
-        // 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) {
+        if (isOnWhatsApp && !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
-          if (!this.isAnInstagramChannel) caption = '';
+          caption = '';
         });
-      }
-
-      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)
-      ) {
+      } else {
         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 rounded-none"
         :placeholder="messagePlaceHolder"
         :min-height="4"
         :signature="signatureToApply"

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
-    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 }"
-  >
+  <div class="relative" :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/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/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' },

app/javascript/dashboard/helper/portalHelper.js

@@ -1,44 +1,6 @@
-/**
- * Formats a custom domain with https protocol if needed
- * @param {string} customDomain - The custom domain to format
- * @returns {string} Formatted domain with https protocol
- */
-const formatCustomDomain = customDomain =>
-  customDomain.startsWith('https') ? customDomain : `https://${customDomain}`;
-
-/**
- * Gets the default base URL from configuration
- * @returns {string} The default base URL
- * @throws {Error} If no valid base URL is found
- */
-const getDefaultBaseURL = () => {
-  const { hostURL, helpCenterURL } = window.chatwootConfig || {};
+export const buildPortalURL = portalSlug => {
+  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,
-  customDomain
+  articleSlug
 ) => {
-  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/en/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",
-    "GLOBAL_BOT_BADGE": "System",
-    "AVATAR": {
-      "SUCCESS_DELETE": "Bot avatar deleted successfully",
-      "ERROR_DELETE": "Error deleting bot avatar, please try again"
+    "CSML_BOT_EDITOR": {
+      "NAME": {
+        "LABEL": "Bot name",
+        "PLACEHOLDER": "Name your bot.",
+        "ERROR": "Bot name is required."
+      },
+      "DESCRIPTION": {
+        "LABEL": "Bot description",
+        "PLACEHOLDER": "What does this bot do?"
+      },
+      "BOT_CONFIG": {
+        "ERROR": "Please enter your CSML bot configuration above.",
+        "API_ERROR": "Your CSML configuration is invalid. Please fix it and try again."
+      },
+      "SUBMIT": "Validate and save"
     },
     "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": {
-        "DETAILS": "Bot Details",
-        "URL": "Webhook URL"
-      }
+      "TYPE": "Bot type"
     },
     "DELETE": {
       "BUTTON_TEXT": "Delete",
       "TITLE": "Delete bot",
-      "CONFIRM": {
-        "TITLE": "Confirm Deletion",
-        "MESSAGE": "Are you sure you want to delete {name}?",
-        "YES": "Yes, Delete",
-        "NO": "No, Keep"
-      },
+      "SUBMIT": "Delete",
+      "CANCEL_BUTTON_TEXT": "Cancel",
+      "DESCRIPTION": "Are you sure you want to delete this bot? This action is irreversible.",
       "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/en/contact.json

@@ -545,9 +545,6 @@
         "WROTE": "wrote",
         "YOU": "You",
         "SAVE": "Save note",
-        "EXPAND": "Expand",
-        "COLLAPSE": "Collapse",
-        "NO_NOTES": "No notes, you can add notes from the contact details page.",
         "EMPTY_STATE": "There are no notes associated to this contact. You can add a note by typing in the box above."
       }
     },

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

@@ -295,7 +295,6 @@
       "CONVERSATION_ACTIONS": "Conversation Actions",
       "CONVERSATION_LABELS": "Conversation Labels",
       "CONVERSATION_INFO": "Conversation Information",
-      "CONTACT_NOTES": "Contact Notes",
       "CONTACT_ATTRIBUTES": "Contact Attributes",
       "PREVIOUS_CONVERSATION": "Previous Conversations",
       "MACROS": "Macros",

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

@@ -696,8 +696,7 @@
       "SLUG": {
         "LABEL": "Slug",
         "PLACEHOLDER": "user-guide",
-        "ERROR": "Slug is required",
-        "FORMAT_ERROR": "Please enter a valid slug, for eg: user-guide"
+        "ERROR": "Slug is required"
       }
     },
     "PORTAL_SETTINGS": {

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

@@ -333,14 +333,6 @@
       "RESET": "Reset",
       "SELECT_ASSISTANT": "Select Assistant"
     },
-    "PLAYGROUND": {
-      "USER": "You",
-      "ASSISTANT": "Assistant",
-      "MESSAGE_PLACEHOLDER": "Type your message...",
-      "HEADER": "Playground",
-      "DESCRIPTION": "Use this playground to send messages to your assistant and check if it responds accurately, quickly, and in the tone you expect.",
-      "CREDIT_NOTE": "Messages sent here will count toward your Captain credits."
-    },
     "PAYWALL": {
       "TITLE": "Upgrade to use Captain AI",
       "AVAILABLE_ON": "Captain is not available on the free plan.",
@@ -379,41 +371,20 @@
         "ERROR_MESSAGE": "There was an error creating the assistant, please try again."
       },
       "FORM": {
-        "UPDATE": "Update",
-        "SECTIONS": {
-          "BASIC_INFO": "Basic Information",
-          "SYSTEM_MESSAGES": "System Messages",
-          "INSTRUCTIONS": "Instructions",
-          "FEATURES": "Features",
-          "TOOLS": "Tools "
-        },
         "NAME": {
-          "LABEL": "Name",
-          "PLACEHOLDER": "Enter assistant name"
+          "LABEL": "Assistant Name",
+          "PLACEHOLDER": "Enter a name for the assistant",
+          "ERROR": "Please provide a name for the assistant"
         },
         "DESCRIPTION": {
-          "LABEL": "Description",
-          "PLACEHOLDER": "Enter assistant description"
+          "LABEL": "Assistant Description",
+          "PLACEHOLDER": "Describe how and where this assistant will be used",
+          "ERROR": "A description is required"
         },
         "PRODUCT_NAME": {
           "LABEL": "Product Name",
-          "PLACEHOLDER": "Enter product name"
-        },
-        "WELCOME_MESSAGE": {
-          "LABEL": "Welcome Message",
-          "PLACEHOLDER": "Enter welcome message"
-        },
-        "HANDOFF_MESSAGE": {
-          "LABEL": "Handoff Message",
-          "PLACEHOLDER": "Enter handoff message"
-        },
-        "RESOLUTION_MESSAGE": {
-          "LABEL": "Resolution Message",
-          "PLACEHOLDER": "Enter resolution message"
-        },
-        "INSTRUCTIONS": {
-          "LABEL": "Instructions",
-          "PLACEHOLDER": "Enter instructions for the assistant"
+          "PLACEHOLDER": "Enter the name of the product this assistant is designed for",
+          "ERROR": "The product name is required"
         },
         "FEATURES": {
           "TITLE": "Features",
@@ -424,8 +395,7 @@
       "EDIT": {
         "TITLE": "Update the assistant",
         "SUCCESS_MESSAGE": "The assistant has been successfully updated",
-        "ERROR_MESSAGE": "There was an error updating the assistant, please try again.",
-        "NOT_FOUND": "Could not find the assistant. Please try again."
+        "ERROR_MESSAGE": "There was an error updating the assistant, please try again."
       },
       "OPTIONS": {
         "EDIT_ASSISTANT": "Edit Assistant",

app/javascript/dashboard/routes/dashboard/captain/assistants/Edit.vue

@@ -1,71 +0,0 @@
-<script setup>
-import { computed, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import { useStore } from 'dashboard/composables/store';
-import { useMapGetter } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import { useI18n } from 'vue-i18n';
-import PageLayout from 'dashboard/components-next/captain/PageLayout.vue';
-import EditAssistantForm from '../../../../components-next/captain/pageComponents/assistant/EditAssistantForm.vue';
-import AssistantPlayground from 'dashboard/components-next/captain/assistant/AssistantPlayground.vue';
-
-const route = useRoute();
-const store = useStore();
-const { t } = useI18n();
-const assistantId = route.params.assistantId;
-const uiFlags = useMapGetter('captainAssistants/getUIFlags');
-const isFetching = computed(() => uiFlags.value.fetchingItem);
-const assistant = computed(() =>
-  store.getters['captainAssistants/getRecord'](Number(assistantId))
-);
-
-const isAssistantAvailable = computed(() => !!assistant.value?.id);
-
-const handleSubmit = async updatedAssistant => {
-  try {
-    await store.dispatch('captainAssistants/update', {
-      id: assistantId,
-      ...updatedAssistant,
-    });
-    useAlert(t('CAPTAIN.ASSISTANTS.EDIT.SUCCESS_MESSAGE'));
-  } catch (error) {
-    const errorMessage =
-      error?.message || t('CAPTAIN.ASSISTANTS.EDIT.ERROR_MESSAGE');
-    useAlert(errorMessage);
-  }
-};
-
-onMounted(() => {
-  if (!isAssistantAvailable.value) {
-    store.dispatch('captainAssistants/show', assistantId);
-  }
-});
-</script>
-
-<template>
-  <PageLayout
-    :header-title="assistant?.name"
-    :show-pagination-footer="false"
-    :is-fetching="isFetching"
-    :show-know-more="false"
-    :back-url="{ name: 'captain_assistants_index' }"
-  >
-    <template #body>
-      <div v-if="!isAssistantAvailable">
-        {{ t('CAPTAIN.ASSISTANTS.EDIT.NOT_FOUND') }}
-      </div>
-      <div v-else class="flex gap-4 h-full">
-        <div class="flex-1 lg:overflow-auto pr-4 h-full md:h-auto">
-          <EditAssistantForm
-            :assistant="assistant"
-            mode="edit"
-            @submit="handleSubmit"
-          />
-        </div>
-        <div class="w-[400px] hidden lg:block h-full">
-          <AssistantPlayground :assistant-id="Number(assistantId)" />
-        </div>
-      </div>
-    </template>
-  </PageLayout>
-</template>

app/javascript/dashboard/routes/dashboard/captain/assistants/Index.vue

@@ -36,10 +36,8 @@ const handleCreate = () => {
 };
 
 const handleEdit = () => {
-  router.push({
-    name: 'captain_assistants_edit',
-    params: { assistantId: selectedAssistant.value.id },
-  });
+  dialogType.value = 'edit';
+  nextTick(() => createAssistantDialog.value.dialogRef.open());
 };
 
 const handleViewConnectedInboxes = () => {

app/javascript/dashboard/routes/dashboard/captain/captain.routes.js

@@ -2,7 +2,6 @@ import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
 import { frontendURL } from '../../../helper/URLHelper';
 import AssistantIndex from './assistants/Index.vue';
-import AssistantEdit from './assistants/Edit.vue';
 import AssistantInboxesIndex from './assistants/inboxes/Index.vue';
 import DocumentsIndex from './documents/Index.vue';
 import ResponsesIndex from './responses/Index.vue';
@@ -21,19 +20,6 @@ export const routes = [
       ],
     },
   },
-  {
-    path: frontendURL('accounts/:accountId/captain/assistants/:assistantId'),
-    component: AssistantEdit,
-    name: 'captain_assistants_edit',
-    meta: {
-      permissions: ['administrator', 'agent'],
-      featureFlag: FEATURE_FLAGS.CAPTAIN,
-      installationTypes: [
-        INSTALLATION_TYPES.CLOUD,
-        INSTALLATION_TYPES.ENTERPRISE,
-      ],
-    },
-  },
   {
     path: frontendURL(
       'accounts/:accountId/captain/assistants/:assistantId/inboxes'

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

@@ -13,7 +13,6 @@ import ConversationAction from './ConversationAction.vue';
 import ConversationParticipant from './ConversationParticipant.vue';
 
 import ContactInfo from './contact/ContactInfo.vue';
-import ContactNotes from './contact/ContactNotes.vue';
 import ConversationInfo from './ConversationInfo.vue';
 import CustomAttributes from './customAttributes/CustomAttributes.vue';
 import Draggable from 'vuedraggable';
@@ -246,18 +245,6 @@ onMounted(() => {
                 <ShopifyOrdersList :contact-id="contactId" />
               </AccordionItem>
             </div>
-            <div v-else-if="element.name === 'contact_notes'">
-              <AccordionItem
-                :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_NOTES')"
-                :is-open="isContactSidebarItemOpen('is_contact_notes_open')"
-                compact
-                @toggle="
-                  value => toggleSidebarUIState('is_contact_notes_open', value)
-                "
-              >
-                <ContactNotes :contact-id="contactId" />
-              </AccordionItem>
-            </div>
           </div>
         </template>
       </Draggable>

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

@@ -120,7 +120,6 @@ export default {
 
   mounted() {
     this.$store.dispatch('agents/get');
-    this.$store.dispatch('portals/index');
     this.initialize();
     this.$watch('$store.state.route', () => this.initialize());
     this.$watch('chatList.length', () => {

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

@@ -1,51 +0,0 @@
-<script setup>
-import { watch, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import ContactNoteItem from 'next/Contacts/ContactsSidebar/components/ContactNoteItem.vue';
-import Spinner from 'next/spinner/Spinner.vue';
-
-const { contactId } = defineProps({
-  contactId: { type: String, required: true },
-});
-
-const { t } = useI18n();
-const store = useStore();
-const currentUser = useMapGetter('getCurrentUser');
-const uiFlags = useMapGetter('contactNotes/getUIFlags');
-const isFetchingNotes = computed(() => uiFlags.value.isFetching);
-const notGetterFn = useMapGetter('contactNotes/getAllNotesByContactId');
-const notes = computed(() => notGetterFn.value(contactId));
-
-const getWrittenBy = ({ user } = {}) => {
-  const currentUserId = currentUser.value?.id;
-  return user?.id === currentUserId
-    ? t('CONTACTS_LAYOUT.SIDEBAR.NOTES.YOU')
-    : user?.name || t('CONVERSATION.BOT');
-};
-
-watch(
-  () => contactId,
-  () => store.dispatch('contactNotes/get', { contactId }),
-  { immediate: true }
-);
-</script>
-
-<template>
-  <div v-if="isFetchingNotes" class="p-8 grid place-content-center">
-    <Spinner />
-  </div>
-  <div v-else-if="!notes.length" class="p-8 grid place-content-center">
-    <p class="text-center">{{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.NO_NOTES') }}</p>
-  </div>
-  <div v-else class="max-h-[300px] overflow-scroll">
-    <ContactNoteItem
-      v-for="note in notes"
-      :key="note.id"
-      class="p-4 last-of-type:border-b-0"
-      :note="note"
-      collapsible
-      :written-by="getWrittenBy(note)"
-    />
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue

@@ -1,7 +1,6 @@
 <script>
 import { debounce } from '@chatwoot/utils';
 import { useAlert } from 'dashboard/composables';
-import { mapGetters } from 'vuex';
 import allLocales from 'shared/constants/locales.js';
 
 import SearchHeader from './Header.vue';
@@ -34,15 +33,6 @@ export default {
     };
   },
   computed: {
-    ...mapGetters({
-      portalBySlug: 'portals/portalBySlug',
-    }),
-    portal() {
-      return this.portalBySlug(this.selectedPortalSlug);
-    },
-    portalCustomDomain() {
-      return this.portal?.custom_domain;
-    },
     articleViewerUrl() {
       const article = this.activeArticle(this.activeId);
       if (!article) return '';
@@ -57,7 +47,6 @@ export default {
 
       return `${url}`;
     },
-
     searchResultsWithUrl() {
       return this.searchResults.map(article => ({
         ...article,
@@ -76,8 +65,7 @@ export default {
         this.selectedPortalSlug,
         '',
         '',
-        article.slug,
-        this.portalCustomDomain
+        article.slug
       );
     },
     localeName(code) {
@@ -123,6 +111,7 @@ export default {
     },
     onInsert(id) {
       const article = this.activeArticle(id || this.activeId);
+
       this.$emit('insert', article);
       useAlert(this.$t('HELP_CENTER.ARTICLE_SEARCH.SUCCESS_ARTICLE_INSERTED'));
       this.onClose();

app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue

@@ -20,23 +20,17 @@ const articleById = useMapGetter('articles/articleById');
 
 const article = computed(() => articleById.value(articleSlug));
 
-const portalBySlug = useMapGetter('portals/portalBySlug');
-
-const portal = computed(() => portalBySlug.value(portalSlug));
-
 const isUpdating = ref(false);
 const isSaved = ref(false);
 
-const articleLink = computed(() => {
+const portalLink = computed(() => {
   const { slug: categorySlug, locale: categoryLocale } = article.value.category;
   const { slug: articleSlugValue } = article.value;
-  const portalCustomDomain = portal.value?.custom_domain;
   return buildPortalArticleURL(
     portalSlug,
     categorySlug,
     categoryLocale,
-    articleSlugValue,
-    portalCustomDomain
+    articleSlugValue
   );
 });
 
@@ -97,7 +91,7 @@ const fetchArticleDetails = () => {
 };
 
 const previewArticle = () => {
-  window.open(articleLink.value, '_blank');
+  window.open(portalLink.value, '_blank');
   useTrack(PORTALS_EVENTS.PREVIEW_ARTICLE, {
     status: article.value?.status,
   });

app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue

@@ -1,191 +1,102 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
+import { frontendURL } from 'dashboard/helper/URLHelper';
+
+import AgentBotRow from './components/AgentBotRow.vue';
 
 import SettingsLayout from '../SettingsLayout.vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import AgentBotModal from './components/AgentBotModal.vue';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-
-const MODAL_TYPES = {
-  CREATE: 'create',
-  EDIT: 'edit',
-};
 
+const router = useRouter();
 const store = useStore();
 const { t } = useI18n();
 
+const accountId = useMapGetter('getCurrentAccountId');
 const agentBots = useMapGetter('agentBots/getBots');
 const uiFlags = useMapGetter('agentBots/getUIFlags');
 
-const selectedBot = ref({});
-const loading = ref({});
-const modalType = ref(MODAL_TYPES.CREATE);
-const agentBotModalRef = ref(null);
-const agentBotDeleteDialogRef = ref(null);
+const confirmDialog = ref(null);
 
-const tableHeaders = computed(() => {
-  return [
-    t('AGENT_BOTS.LIST.TABLE_HEADER.DETAILS'),
-    t('AGENT_BOTS.LIST.TABLE_HEADER.URL'),
-  ];
-});
-
-const selectedBotName = computed(() => selectedBot.value?.name || '');
-
-const openAddModal = () => {
-  modalType.value = MODAL_TYPES.CREATE;
-  selectedBot.value = {};
-  agentBotModalRef.value.dialogRef.open();
-};
-
-const openEditModal = bot => {
-  modalType.value = MODAL_TYPES.EDIT;
-  selectedBot.value = bot;
-  agentBotModalRef.value.dialogRef.open();
-};
-
-const openDeletePopup = bot => {
-  selectedBot.value = bot;
-  agentBotDeleteDialogRef.value.open();
-};
-
-const deleteAgentBot = async id => {
-  try {
-    await store.dispatch('agentBots/delete', id);
-    useAlert(t('AGENT_BOTS.DELETE.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    useAlert(t('AGENT_BOTS.DELETE.API.ERROR_MESSAGE'));
-  } finally {
-    loading.value[id] = false;
-    selectedBot.value = {};
-  }
-};
-
-const confirmDeletion = () => {
-  loading.value[selectedBot.value.id] = true;
-  deleteAgentBot(selectedBot.value.id);
-  agentBotDeleteDialogRef.value.close();
+const onConfigureNewBot = () => {
+  router.push({
+    name: 'agent_bots_csml_new',
+  });
 };
 
 onMounted(() => {
   store.dispatch('agentBots/get');
 });
+
+const onDeleteAgentBot = async bot => {
+  const ok = await confirmDialog.value.showConfirmation();
+
+  if (ok) {
+    try {
+      await store.dispatch('agentBots/delete', bot.id);
+      useAlert(t('AGENT_BOTS.DELETE.API.SUCCESS_MESSAGE'));
+    } catch (error) {
+      useAlert(t('AGENT_BOTS.DELETE.API.ERROR_MESSAGE'));
+    }
+  }
+};
+
+const onEditAgentBot = bot => {
+  router.push(
+    frontendURL(
+      `accounts/${accountId.value}/settings/agent-bots/csml/${bot.id}`
+    )
+  );
+};
 </script>
 
 <template>
   <SettingsLayout
     :is-loading="uiFlags.isFetching"
-    :loading-message="t('AGENT_BOTS.LIST.LOADING')"
+    :loading-message="$t('AGENT_BOTS.LIST.LOADING')"
     :no-records-found="!agentBots.length"
-    :no-records-message="t('AGENT_BOTS.LIST.404')"
+    :no-records-message="$t('AGENT_BOTS.LIST.404')"
   >
     <template #header>
       <BaseSettingsHeader
-        :title="t('AGENT_BOTS.HEADER')"
-        :description="t('AGENT_BOTS.DESCRIPTION')"
-        :link-text="t('AGENT_BOTS.LEARN_MORE')"
+        :title="$t('AGENT_BOTS.HEADER')"
+        :description="$t('AGENT_BOTS.DESCRIPTION')"
+        :link-text="$t('AGENT_BOTS.LEARN_MORE')"
         feature-name="agent_bots"
       >
         <template #actions>
           <Button
             icon="i-lucide-circle-plus"
             :label="$t('AGENT_BOTS.ADD.TITLE')"
-            @click="openAddModal"
+            @click="onConfigureNewBot"
           />
         </template>
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <table class="min-w-full overflow-x-auto divide-y divide-n-strong">
-        <thead>
-          <th
-            v-for="thHeader in tableHeaders"
-            :key="thHeader"
-            class="py-4 font-semibold text-left ltr:pr-4 rtl:pl-4 text-n-slate-11"
-          >
-            {{ thHeader }}
-          </th>
-        </thead>
-        <tbody class="flex-1 divide-y divide-n-weak text-n-slate-12">
-          <tr v-for="bot in agentBots" :key="bot.id">
-            <td class="py-4 ltr:pr-4 rtl:pl-4">
-              <div class="flex flex-row items-center gap-4">
-                <Avatar
-                  :name="bot.name"
-                  :src="bot.thumbnail"
-                  :size="40"
-                  rounded-full
-                />
-                <div>
-                  <span class="block font-medium break-words">
-                    {{ bot.name }}
-                    <span
-                      v-if="bot.system_bot"
-                      class="text-xs text-n-slate-12 bg-n-blue-5 inline-block rounded-md py-0.5 px-1 ltr:ml-1 rtl:mr-1"
-                    >
-                      {{ $t('AGENT_BOTS.GLOBAL_BOT_BADGE') }}
-                    </span>
-                  </span>
-                  <span class="text-sm text-n-slate-11">
-                    {{ bot.description }}
-                  </span>
-                </div>
-              </div>
-            </td>
-            <td class="py-4 ltr:pr-4 rtl:pl-4 text-sm">
-              {{ bot.outgoing_url || bot.bot_config?.webhook_url }}
-            </td>
-            <td class="py-4 min-w-xs">
-              <div class="flex gap-1 justify-end">
-                <Button
-                  v-if="!bot.system_bot"
-                  v-tooltip.top="t('AGENT_BOTS.EDIT.BUTTON_TEXT')"
-                  icon="i-lucide-pen"
-                  slate
-                  xs
-                  faded
-                  :is-loading="loading[bot.id]"
-                  @click="openEditModal(bot)"
-                />
-                <Button
-                  v-if="!bot.system_bot"
-                  v-tooltip.top="t('AGENT_BOTS.DELETE.BUTTON_TEXT')"
-                  icon="i-lucide-trash-2"
-                  xs
-                  ruby
-                  faded
-                  :is-loading="loading[bot.id]"
-                  @click="openDeletePopup(bot)"
-                />
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <div class="flex-1 overflow-auto">
+        <table class="divide-y divide-slate-75 dark:divide-slate-700">
+          <tbody class="divide-y divide-n-weak text-n-slate-11">
+            <AgentBotRow
+              v-for="(agentBot, index) in agentBots"
+              :key="agentBot.id"
+              :agent-bot="agentBot"
+              :index="index"
+              @delete="onDeleteAgentBot"
+              @edit="onEditAgentBot"
+            />
+          </tbody>
+        </table>
+        <woot-confirm-modal
+          ref="confirmDialog"
+          :title="$t('AGENT_BOTS.DELETE.TITLE')"
+          :description="$t('AGENT_BOTS.DELETE.DESCRIPTION')"
+        />
+      </div>
     </template>
-
-    <AgentBotModal
-      ref="agentBotModalRef"
-      :type="modalType"
-      :selected-bot="selectedBot"
-    />
-
-    <Dialog
-      ref="agentBotDeleteDialogRef"
-      type="alert"
-      :title="t('AGENT_BOTS.DELETE.CONFIRM.TITLE')"
-      :description="
-        t('AGENT_BOTS.DELETE.CONFIRM.MESSAGE', { name: selectedBotName })
-      "
-      :is-loading="uiFlags.isDeleting"
-      :confirm-button-label="t('AGENT_BOTS.DELETE.CONFIRM.YES')"
-      :cancel-button-label="t('AGENT_BOTS.DELETE.CONFIRM.NO')"
-      @confirm="confirmDeletion"
-    />
   </SettingsLayout>
 </template>

app/javascript/dashboard/routes/dashboard/settings/agentBots/agentBot.routes.js

@@ -1,6 +1,9 @@
 import { FEATURE_FLAGS } from '../../../../featureFlags';
 import Bot from './Index.vue';
+import CsmlEditBot from './csml/Edit.vue';
+import CsmlNewBot from './csml/New.vue';
 import { frontendURL } from '../../../../helper/URLHelper';
+import SettingsContent from '../Wrapper.vue';
 import SettingsWrapper from '../SettingsWrapper.vue';
 
 export default {
@@ -23,5 +26,36 @@ export default {
         },
       ],
     },
+    {
+      path: frontendURL('accounts/:accountId/settings/agent-bots'),
+      component: SettingsContent,
+      props: () => {
+        return {
+          headerTitle: 'AGENT_BOTS.HEADER',
+          icon: 'bot',
+          showBackButton: true,
+        };
+      },
+      children: [
+        {
+          path: 'csml/new',
+          name: 'agent_bots_csml_new',
+          component: CsmlNewBot,
+          meta: {
+            featureFlag: FEATURE_FLAGS.AGENT_BOTS,
+            permissions: ['administrator'],
+          },
+        },
+        {
+          path: 'csml/:botId',
+          name: 'agent_bots_csml_edit',
+          component: CsmlEditBot,
+          meta: {
+            featureFlag: FEATURE_FLAGS.AGENT_BOTS,
+            permissions: ['administrator'],
+          },
+        },
+      ],
+    },
   ],
 };

app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotModal.vue

@@ -1,251 +0,0 @@
-<script setup>
-import { ref, computed, reactive, watch } from 'vue';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import { useI18n } from 'vue-i18n';
-import { required, helpers, url } from '@vuelidate/validators';
-import { useVuelidate } from '@vuelidate/core';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
-import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-
-const props = defineProps({
-  type: {
-    type: String,
-    default: 'create',
-    validator: value => ['create', 'edit'].includes(value),
-  },
-  selectedBot: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const MODAL_TYPES = {
-  CREATE: 'create',
-  EDIT: 'edit',
-};
-
-const store = useStore();
-const { t } = useI18n();
-const dialogRef = ref(null);
-const uiFlags = useMapGetter('agentBots/getUIFlags');
-
-const formState = reactive({
-  botName: '',
-  botDescription: '',
-  botUrl: '',
-  botAvatar: null,
-  botAvatarUrl: '',
-});
-
-const v$ = useVuelidate(
-  {
-    botName: {
-      required: helpers.withMessage(
-        () => t('AGENT_BOTS.FORM.ERRORS.NAME'),
-        required
-      ),
-    },
-    botUrl: {
-      required: helpers.withMessage(
-        () => t('AGENT_BOTS.FORM.ERRORS.URL'),
-        required
-      ),
-      url: helpers.withMessage(
-        () => t('AGENT_BOTS.FORM.ERRORS.VALID_URL'),
-        url
-      ),
-    },
-  },
-  formState
-);
-
-const isLoading = computed(() =>
-  props.type === MODAL_TYPES.CREATE
-    ? uiFlags.value.isCreating
-    : uiFlags.value.isUpdating
-);
-
-const dialogTitle = computed(() =>
-  props.type === MODAL_TYPES.CREATE
-    ? t('AGENT_BOTS.ADD.TITLE')
-    : t('AGENT_BOTS.EDIT.TITLE')
-);
-
-const confirmButtonLabel = computed(() =>
-  props.type === MODAL_TYPES.CREATE
-    ? t('AGENT_BOTS.FORM.CREATE')
-    : t('AGENT_BOTS.FORM.UPDATE')
-);
-
-const botNameError = computed(() =>
-  v$.value.botName.$error ? v$.value.botName.$errors[0]?.$message : ''
-);
-
-const botUrlError = computed(() =>
-  v$.value.botUrl.$error ? v$.value.botUrl.$errors[0]?.$message : ''
-);
-
-const resetForm = () => {
-  Object.assign(formState, {
-    botName: '',
-    botDescription: '',
-    botUrl: '',
-    botAvatar: null,
-    botAvatarUrl: '',
-  });
-  v$.value.$reset();
-};
-
-const handleImageUpload = ({ file, url: avatarUrl }) => {
-  formState.botAvatar = file;
-  formState.botAvatarUrl = avatarUrl;
-};
-
-const handleAvatarDelete = async () => {
-  if (props.selectedBot?.id) {
-    try {
-      await store.dispatch(
-        'agentBots/deleteAgentBotAvatar',
-        props.selectedBot.id
-      );
-      formState.botAvatar = null;
-      formState.botAvatarUrl = '';
-      useAlert(t('AGENT_BOTS.AVATAR.SUCCESS_DELETE'));
-    } catch (error) {
-      useAlert(t('AGENT_BOTS.AVATAR.ERROR_DELETE'));
-    }
-  } else {
-    formState.botAvatar = null;
-    formState.botAvatarUrl = '';
-  }
-};
-
-const handleSubmit = async () => {
-  v$.value.$touch();
-  if (v$.value.$invalid) return;
-
-  const botData = {
-    name: formState.botName,
-    description: formState.botDescription,
-    outgoing_url: formState.botUrl,
-    bot_type: 'webhook',
-    avatar: formState.botAvatar,
-  };
-
-  const isCreate = props.type === MODAL_TYPES.CREATE;
-
-  try {
-    const actionPayload = isCreate
-      ? botData
-      : { id: props.selectedBot.id, data: botData };
-
-    await store.dispatch(
-      `agentBots/${isCreate ? 'create' : 'update'}`,
-      actionPayload
-    );
-
-    const alertKey = isCreate
-      ? t('AGENT_BOTS.ADD.API.SUCCESS_MESSAGE')
-      : t('AGENT_BOTS.EDIT.API.SUCCESS_MESSAGE');
-    useAlert(alertKey);
-
-    dialogRef.value.close();
-    resetForm();
-  } catch (error) {
-    const errorKey = isCreate
-      ? t('AGENT_BOTS.ADD.API.ERROR_MESSAGE')
-      : t('AGENT_BOTS.EDIT.API.ERROR_MESSAGE');
-    useAlert(errorKey);
-  }
-};
-
-const initializeForm = () => {
-  if (props.selectedBot && Object.keys(props.selectedBot).length) {
-    const { name, description, outgoing_url, thumbnail, bot_config } =
-      props.selectedBot;
-    formState.botName = name || '';
-    formState.botDescription = description || '';
-    formState.botUrl = outgoing_url || bot_config?.webhook_url || '';
-    formState.botAvatarUrl = thumbnail || '';
-  } else {
-    resetForm();
-  }
-};
-
-watch(() => props.selectedBot, initializeForm, { immediate: true, deep: true });
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="edit"
-    :title="dialogTitle"
-    :show-cancel-button="false"
-    :show-confirm-button="false"
-    @close="v$.$reset()"
-  >
-    <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
-      <div class="mb-2 flex flex-col items-start">
-        <span class="mb-2 text-sm font-medium text-n-slate-12">
-          {{ $t('AGENT_BOTS.FORM.AVATAR.LABEL') }}
-        </span>
-        <Avatar
-          :src="formState.botAvatarUrl"
-          :name="formState.botName"
-          :size="68"
-          allow-upload
-          @upload="handleImageUpload"
-          @delete="handleAvatarDelete"
-        />
-      </div>
-
-      <Input
-        v-model="formState.botName"
-        :label="$t('AGENT_BOTS.FORM.NAME.LABEL')"
-        :placeholder="$t('AGENT_BOTS.FORM.NAME.PLACEHOLDER')"
-        :message="botNameError"
-        :message-type="botNameError ? 'error' : 'info'"
-        @blur="v$.botName.$touch()"
-      />
-
-      <TextArea
-        v-model="formState.botDescription"
-        :label="$t('AGENT_BOTS.FORM.DESCRIPTION.LABEL')"
-        :placeholder="$t('AGENT_BOTS.FORM.DESCRIPTION.PLACEHOLDER')"
-      />
-
-      <Input
-        v-model="formState.botUrl"
-        :label="$t('AGENT_BOTS.FORM.WEBHOOK_URL.LABEL')"
-        :placeholder="$t('AGENT_BOTS.FORM.WEBHOOK_URL.PLACEHOLDER')"
-        :message="botUrlError"
-        :message-type="botUrlError ? 'error' : 'info'"
-        @blur="v$.botUrl.$touch()"
-      />
-
-      <div class="flex items-center justify-end w-full gap-2 px-0 py-2">
-        <NextButton
-          faded
-          slate
-          type="reset"
-          :label="$t('AGENT_BOTS.FORM.CANCEL')"
-          @click="dialogRef.close()"
-        />
-        <NextButton
-          type="submit"
-          data-testid="label-submit"
-          :label="confirmButtonLabel"
-          :is-loading="isLoading"
-          :disabled="v$.$invalid"
-        />
-      </div>
-    </form>
-  </Dialog>
-</template>

app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { computed } from 'vue';
+import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
+import AgentBotType from './AgentBotType.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  agentBot: {
+    type: Object,
+    required: true,
+  },
+  index: {
+    type: Number,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['edit', 'delete']);
+
+const isACSMLTypeBot = computed(() => {
+  const { bot_type: botType } = props.agentBot;
+  return botType === 'csml';
+});
+</script>
+
+<template>
+  <tr class="space-x-2">
+    <td class="py-4 ltr:pl-0 ltr:pr-4 rtl:pl-4 rtl:pr-0">
+      <div class="flex items-center break-words font-medium">
+        {{ agentBot.name }}
+        (<AgentBotType :bot-type="agentBot.bot_type" />)
+      </div>
+      <div class="text-sm">
+        <ShowMore :text="agentBot.description || ''" :limit="120" />
+      </div>
+    </td>
+    <td class="align-middle">
+      <div class="flex justify-end gap-1 h-full items-center">
+        <Button
+          v-if="isACSMLTypeBot"
+          v-tooltip.top="$t('AGENT_BOTS.EDIT.BUTTON_TEXT')"
+          icon="i-lucide-pen"
+          slate
+          xs
+          faded
+          @click="emit('edit', agentBot)"
+        />
+        <Button
+          v-tooltip.top="$t('AGENT_BOTS.DELETE.BUTTON_TEXT')"
+          icon="i-lucide-trash-2"
+          xs
+          ruby
+          faded
+          @click="emit('delete', agentBot, index)"
+        />
+      </div>
+    </td>
+  </tr>
+</template>

app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotType.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+defineProps({
+  botType: {
+    type: String,
+    default: 'webhook',
+  },
+});
+
+const { t } = useI18n();
+
+const botTypeConfig = computed(() => ({
+  csml: {
+    label: t('AGENT_BOTS.TYPES.CSML'),
+    thumbnail: '/dashboard/images/agent-bots/csml.png',
+  },
+  webhook: {
+    label: t('AGENT_BOTS.TYPES.WEBHOOK'),
+    thumbnail: '/dashboard/images/agent-bots/webhook.svg',
+  },
+}));
+</script>
+
+<template>
+  <span class="inline-flex items-center gap-1">
+    <img
+      v-tooltip="botTypeConfig[botType].label"
+      class="h-3 w-auto"
+      :src="botTypeConfig[botType].thumbnail"
+      :alt="botTypeConfig[botType].label"
+    />
+    <span>{{ botTypeConfig[botType].label }}</span>
+  </span>
+</template>

app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue

@@ -0,0 +1,99 @@
+<script>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import CsmlMonacoEditor from './CSMLMonacoEditor.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+export default {
+  components: { CsmlMonacoEditor, NextButton },
+  props: {
+    agentBot: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  emits: ['submit'],
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  validations: {
+    bot: {
+      name: { required },
+      csmlContent: { required },
+    },
+  },
+  data() {
+    return {
+      bot: {
+        name: this.agentBot.name || '',
+        description: this.agentBot.description || '',
+        csmlContent: this.agentBot.bot_config.csml_content || '',
+      },
+    };
+  },
+  methods: {
+    onSubmit() {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        return;
+      }
+      this.$emit('submit', {
+        id: this.agentBot.id || '',
+        ...this.bot,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <div class="flex flex-row">
+      <div class="w-[68%]">
+        <div class="h-[calc(100vh-56px)] relative">
+          <CsmlMonacoEditor v-model="bot.csmlContent" class="w-full h-full" />
+          <div
+            v-if="v$.bot.csmlContent.$error"
+            class="bg-red-100 dark:bg-red-200 text-white dark:text-white absolute bottom-0 w-full p-2.5 flex items-center text-xs justify-center flex-shrink-0"
+          >
+            <span>{{ $t('AGENT_BOTS.CSML_BOT_EDITOR.BOT_CONFIG.ERROR') }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="w-[32%] overflow-auto p-4 h-[calc(100vh-56px)]">
+        <form
+          class="flex flex-col justify-between h-full"
+          @submit.prevent="onSubmit"
+        >
+          <div>
+            <label :class="{ error: v$.bot.name.$error }">
+              {{ $t('AGENT_BOTS.CSML_BOT_EDITOR.NAME.LABEL') }}
+              <input
+                v-model="bot.name"
+                type="text"
+                :placeholder="$t('AGENT_BOTS.CSML_BOT_EDITOR.NAME.PLACEHOLDER')"
+              />
+              <span v-if="v$.bot.name.$error" class="message">
+                {{ $t('AGENT_BOTS.CSML_BOT_EDITOR.NAME.ERROR') }}
+              </span>
+            </label>
+            <label>
+              {{ $t('AGENT_BOTS.CSML_BOT_EDITOR.DESCRIPTION.LABEL') }}
+              <textarea
+                v-model="bot.description"
+                rows="4"
+                :placeholder="
+                  $t('AGENT_BOTS.CSML_BOT_EDITOR.DESCRIPTION.PLACEHOLDER')
+                "
+              />
+            </label>
+            <NextButton
+              type="submit"
+              :label="$t('AGENT_BOTS.CSML_BOT_EDITOR.SUBMIT')"
+            />
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLMonacoEditor.vue

@@ -0,0 +1,71 @@
+<script>
+import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
+import { mapGetters } from 'vuex';
+
+export default {
+  components: { LoadingState },
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      iframeLoading: true,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      globalConfig: 'globalConfig/get',
+    }),
+  },
+  mounted() {
+    window.onmessage = e => {
+      if (
+        typeof e.data !== 'string' ||
+        !e.data.startsWith('chatwoot-csml-editor:update')
+      ) {
+        return;
+      }
+      const csmlContent = e.data.replace('chatwoot-csml-editor:update', '');
+      this.$emit('update:modelValue', csmlContent);
+    };
+  },
+  methods: {
+    onEditorLoad() {
+      const frameElement = document.getElementById(`csml-editor--frame`);
+      const eventData = {
+        event: 'editorContext',
+        data: this.modelValue || '',
+      };
+      frameElement.contentWindow.postMessage(JSON.stringify(eventData), '*');
+      this.iframeLoading = false;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="csml-editor--container">
+    <LoadingState
+      v-if="iframeLoading"
+      :message="$t('AGENT_BOTS.LOADING_EDITOR')"
+      class="dashboard-app_loading-container"
+    />
+    <iframe
+      id="csml-editor--frame"
+      :src="globalConfig.csmlEditorHost"
+      @load="onEditorLoad"
+    />
+  </div>
+</template>
+
+<style scoped>
+#csml-editor--frame {
+  border: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>

app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue

@@ -0,0 +1,40 @@
+<script>
+import { useAlert } from 'dashboard/composables';
+import Spinner from 'shared/components/Spinner.vue';
+import CsmlBotEditor from '../components/CSMLBotEditor.vue';
+
+export default {
+  components: { Spinner, CsmlBotEditor },
+  computed: {
+    agentBot() {
+      return this.$store.getters['agentBots/getBot'](this.$route.params.botId);
+    },
+  },
+  mounted() {
+    this.$store.dispatch('agentBots/show', this.$route.params.botId);
+  },
+  methods: {
+    async updateBot(bot) {
+      try {
+        await this.$store.dispatch('agentBots/update', {
+          id: bot.id,
+          name: bot.name,
+          description: bot.description,
+          bot_type: 'csml',
+          bot_config: { csml_content: bot.csmlContent },
+        });
+        useAlert(this.$t('AGENT_BOTS.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('AGENT_BOTS.CSML_BOT_EDITOR.BOT_CONFIG.API_ERROR'));
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <CsmlBotEditor v-if="agentBot.id" :agent-bot="agentBot" @submit="updateBot" />
+  <div v-else class="flex flex-col h-auto overflow-auto no-padding">
+    <Spinner />
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/New.vue

@@ -0,0 +1,41 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import { frontendURL } from '../../../../../helper/URLHelper';
+import CsmlBotEditor from '../components/CSMLBotEditor.vue';
+
+export default {
+  components: { CsmlBotEditor },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+    }),
+  },
+  methods: {
+    async saveBot(bot) {
+      try {
+        const agentBot = await this.$store.dispatch('agentBots/create', {
+          name: bot.name,
+          description: bot.description,
+          bot_type: 'csml',
+          bot_config: { csml_content: bot.csmlContent },
+        });
+        if (agentBot) {
+          this.$router.replace(
+            frontendURL(
+              `accounts/${this.accountId}/settings/agent-bots/csml/${agentBot.id}`
+            )
+          );
+        }
+        useAlert(this.$t('AGENT_BOTS.ADD.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('AGENT_BOTS.ADD.API.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <CsmlBotEditor :agent-bot="{ bot_config: {} }" @submit="saveBot" />
+</template>

app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue

@@ -35,7 +35,8 @@ export default {
         },
         { key: 'telegram', name: 'Telegram' },
         { key: 'line', name: 'Line' },
-        { key: 'instagram', name: 'Instagram' },
+        // TODO: Add Instagram to the channel list after the feature is ready to use.
+        // { key: 'instagram', name: 'Instagram' },
       ];
     },
     ...mapGetters({

app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue

@@ -18,17 +18,17 @@ export default {
     isATwilioInbox() {
       return this.currentInbox.channel_type === 'Channel::TwilioSms';
     },
-    // Check if a facebook inbox exists with the same instagram_id
+    // Check if a facebook inbox that has the same instagram_id
     hasDuplicateInstagramInbox() {
       const instagramId = this.currentInbox.instagram_id;
-      const facebookInbox =
-        this.$store.getters['inboxes/getFacebookInboxByInstagramId'](
+      const instagramInbox =
+        this.$store.getters['inboxes/getInstagramInboxByInstagramId'](
           instagramId
         );
 
       return (
         this.currentInbox.channel_type === INBOX_TYPES.INSTAGRAM &&
-        facebookInbox
+        instagramInbox
       );
     },
 

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -141,7 +141,11 @@ export default {
       }
 
       if (
-        this.isFeatureEnabledonAccount(this.accountId, FEATURE_FLAGS.AGENT_BOTS)
+        this.isFeatureEnabledonAccount(
+          this.accountId,
+          FEATURE_FLAGS.AGENT_BOTS
+        ) &&
+        !(this.isAnEmailChannel || this.isATwitterInbox)
       ) {
         visibleToAllChannelTabs = [
           ...visibleToAllChannelTabs,
@@ -204,9 +208,9 @@ export default {
       return false;
     },
     instagramUnauthorized() {
-      return this.isAnInstagramChannel && this.inbox.reauthorization_required;
+      return this.isAInstagramChannel && this.inbox.reauthorization_required;
     },
-    // Check if a instagram inbox exists with the same instagram_id
+    // Check if a facebook inbox that has the same instagram_id
     hasDuplicateInstagramInbox() {
       const instagramId = this.inbox.instagram_id;
       const instagramInbox =

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/instagram/DuplicateInboxBanner.vue

@@ -1,6 +1,5 @@
 <script setup>
 import Banner from 'dashboard/components-next/banner/Banner.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 defineProps({
   content: {
@@ -11,10 +10,7 @@ defineProps({
 </script>
 
 <template>
-  <Banner color="amber">
-    <div class="flex items-center gap-2">
-      <Icon icon="i-lucide-info" class="flex-shrink-0 size-4" />
-      <span>{{ content }}</span>
-    </div>
+  <Banner color="ruby">
+    {{ content }}
   </Banner>
 </template>

app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue

@@ -80,7 +80,7 @@ export default {
       }, {});
 
       this.formItems.forEach(item => {
-        if (item.validation?.includes('JSON')) {
+        if (item.validation.includes('JSON')) {
           hookPayload.settings[item.name] = JSON.parse(
             hookPayload.settings[item.name]
           );
@@ -117,7 +117,7 @@ export default {
   <div class="flex flex-col h-auto overflow-auto integration-hooks">
     <woot-modal-header
       :header-title="integration.name"
-      :header-content="integration.short_description || integration.description"
+      :header-content="integration.description"
     />
     <FormKit
       v-model="values"
@@ -169,10 +169,6 @@ export default {
   @apply hidden;
 }
 
-.formkit-form .formkit-help {
-  @apply text-n-slate-10 text-sm font-normal mt-2 w-full;
-}
-
 /* equivalent of .reset-base */
 .formkit-input {
   margin-bottom: 0px !important;

app/javascript/dashboard/store/modules/agentBots.js

@@ -12,7 +12,6 @@ export const state = {
     isCreating: false,
     isDeleting: false,
     isUpdating: false,
-    isUpdatingAvatar: false,
     isFetchingAgentBot: false,
     isSettingAgentBot: false,
     isDisconnecting: false,
@@ -49,23 +48,10 @@ export const actions = {
       commit(types.SET_AGENT_BOT_UI_FLAG, { isFetching: false });
     }
   },
-
-  create: async ({ commit }, botData) => {
+  create: async ({ commit }, agentBotObj) => {
     commit(types.SET_AGENT_BOT_UI_FLAG, { isCreating: true });
     try {
-      // Create FormData for file upload
-      const formData = new FormData();
-      formData.append('name', botData.name);
-      formData.append('description', botData.description);
-      formData.append('bot_type', botData.bot_type || 'webhook');
-      formData.append('outgoing_url', botData.outgoing_url);
-
-      // Add avatar file if available
-      if (botData.avatar) {
-        formData.append('avatar', botData.avatar);
-      }
-
-      const response = await AgentBotsAPI.create(formData);
+      const response = await AgentBotsAPI.create(agentBotObj);
       commit(types.ADD_AGENT_BOT, response.data);
       return response.data;
     } catch (error) {
@@ -75,22 +61,10 @@ export const actions = {
     }
     return null;
   },
-
-  update: async ({ commit }, { id, data }) => {
+  update: async ({ commit }, { id, ...agentBotObj }) => {
     commit(types.SET_AGENT_BOT_UI_FLAG, { isUpdating: true });
     try {
-      // Create FormData for file upload
-      const formData = new FormData();
-      formData.append('name', data.name);
-      formData.append('description', data.description);
-      formData.append('bot_type', data.bot_type || 'webhook');
-      formData.append('outgoing_url', data.outgoing_url);
-
-      if (data.avatar) {
-        formData.append('avatar', data.avatar);
-      }
-
-      const response = await AgentBotsAPI.update(id, formData);
+      const response = await AgentBotsAPI.update(id, agentBotObj);
       commit(types.EDIT_AGENT_BOT, response.data);
     } catch (error) {
       throwErrorMessage(error);
@@ -98,7 +72,6 @@ export const actions = {
       commit(types.SET_AGENT_BOT_UI_FLAG, { isUpdating: false });
     }
   },
-
   delete: async ({ commit }, id) => {
     commit(types.SET_AGENT_BOT_UI_FLAG, { isDeleting: true });
     try {
@@ -110,20 +83,6 @@ export const actions = {
       commit(types.SET_AGENT_BOT_UI_FLAG, { isDeleting: false });
     }
   },
-
-  deleteAgentBotAvatar: async ({ commit }, id) => {
-    commit(types.SET_AGENT_BOT_UI_FLAG, { isUpdatingAvatar: true });
-    try {
-      await AgentBotsAPI.deleteAgentBotAvatar(id);
-      // Update the thumbnail to empty string after deletion
-      commit(types.UPDATE_AGENT_BOT_AVATAR, { id, thumbnail: '' });
-    } catch (error) {
-      throwErrorMessage(error);
-    } finally {
-      commit(types.SET_AGENT_BOT_UI_FLAG, { isUpdatingAvatar: false });
-    }
-  },
-
   show: async ({ commit }, id) => {
     commit(types.SET_AGENT_BOT_UI_FLAG, { isFetchingItem: true });
     try {
@@ -191,12 +150,6 @@ export const mutations = {
       [inboxId]: agentBotId,
     };
   },
-  [types.UPDATE_AGENT_BOT_AVATAR]($state, { id, thumbnail }) {
-    const botIndex = $state.records.findIndex(bot => bot.id === id);
-    if (botIndex !== -1) {
-      $state.records[botIndex].thumbnail = thumbnail || '';
-    }
-  },
 };
 
 export default {

app/javascript/dashboard/store/modules/inboxes.js

@@ -122,13 +122,6 @@ export const getters = {
       item => item.channel_type !== INBOX_TYPES.EMAIL
     );
   },
-  getFacebookInboxByInstagramId: $state => instagramId => {
-    return $state.records.find(
-      item =>
-        item.instagram_id === instagramId &&
-        item.channel_type === INBOX_TYPES.FB
-    );
-  },
   getInstagramInboxByInstagramId: $state => instagramId => {
     return $state.records.find(
       item =>

app/javascript/dashboard/store/modules/specs/agentBots/agentBots.spec.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { actions } from '../../agentBots';
 import types from '../../../mutation-types';
-import { agentBotRecords, agentBotData } from './fixtures';
+import { agentBotRecords } from './fixtures';
 
 const commit = vi.fn();
 global.axios = axios;
@@ -30,22 +30,16 @@ describe('#actions', () => {
   describe('#create', () => {
     it('sends correct actions if API is success', async () => {
       axios.post.mockResolvedValue({ data: agentBotRecords[0] });
-      await actions.create({ commit }, agentBotData);
-
+      await actions.create({ commit }, agentBotRecords[0]);
       expect(commit.mock.calls).toEqual([
         [types.SET_AGENT_BOT_UI_FLAG, { isCreating: true }],
         [types.ADD_AGENT_BOT, agentBotRecords[0]],
         [types.SET_AGENT_BOT_UI_FLAG, { isCreating: false }],
       ]);
-
-      expect(axios.post.mock.calls.length).toBe(1);
-      const formDataArg = axios.post.mock.calls[0][1];
-      expect(formDataArg instanceof FormData).toBe(true);
     });
-
     it('sends correct actions if API is error', async () => {
       axios.post.mockRejectedValue({ message: 'Incorrect header' });
-      await expect(actions.create({ commit }, {})).rejects.toThrow(Error);
+      await expect(actions.create({ commit })).rejects.toThrow(Error);
       expect(commit.mock.calls).toEqual([
         [types.SET_AGENT_BOT_UI_FLAG, { isCreating: true }],
         [types.SET_AGENT_BOT_UI_FLAG, { isCreating: false }],
@@ -56,29 +50,17 @@ describe('#actions', () => {
   describe('#update', () => {
     it('sends correct actions if API is success', async () => {
       axios.patch.mockResolvedValue({ data: agentBotRecords[0] });
-      await actions.update(
-        { commit },
-        {
-          id: agentBotRecords[0].id,
-          data: agentBotData,
-        }
-      );
-
+      await actions.update({ commit }, agentBotRecords[0]);
       expect(commit.mock.calls).toEqual([
         [types.SET_AGENT_BOT_UI_FLAG, { isUpdating: true }],
         [types.EDIT_AGENT_BOT, agentBotRecords[0]],
         [types.SET_AGENT_BOT_UI_FLAG, { isUpdating: false }],
       ]);
-
-      expect(axios.patch.mock.calls.length).toBe(1);
-      const formDataArg = axios.patch.mock.calls[0][1];
-      expect(formDataArg instanceof FormData).toBe(true);
     });
-
     it('sends correct actions if API is error', async () => {
       axios.patch.mockRejectedValue({ message: 'Incorrect header' });
       await expect(
-        actions.update({ commit }, { id: 1, data: {} })
+        actions.update({ commit }, agentBotRecords[0])
       ).rejects.toThrow(Error);
       expect(commit.mock.calls).toEqual([
         [types.SET_AGENT_BOT_UI_FLAG, { isUpdating: true }],
@@ -86,6 +68,7 @@ describe('#actions', () => {
       ]);
     });
   });
+
   describe('#delete', () => {
     it('sends correct actions if API is success', async () => {
       axios.delete.mockResolvedValue({ data: agentBotRecords[0] });

app/javascript/dashboard/store/modules/specs/agentBots/fixtures.js

@@ -1,35 +1,15 @@
 export const agentBotRecords = [
   {
-    account_id: 1,
     id: 11,
     name: 'Agent Bot 11',
     description: 'Agent Bot Description',
-    bot_type: 'webhook',
-    thumbnail: 'https://example.com/thumbnail.jpg',
-    bot_config: {},
-    outgoing_url: 'https://example.com/outgoing',
-    access_token: 'hN8QwG769RqBXmme',
-    system_bot: false,
+    type: 'csml',
   },
 
   {
-    account_id: 1,
     id: 12,
     name: 'Agent Bot 12',
     description: 'Agent Bot Description 12',
-    bot_type: 'webhook',
-    thumbnail: 'https://example.com/thumbnail.jpg',
-    bot_config: {},
-    outgoing_url: 'https://example.com/outgoing',
-    access_token: 'hN8QwG769RqBXmme',
-    system_bot: false,
+    type: 'csml',
   },
 ];
-
-export const agentBotData = {
-  name: 'Test Bot',
-  description: 'Test Description',
-  outgoing_url: 'https://test.com',
-  bot_type: 'webhook',
-  avatar: new File([''], 'filename'),
-};

app/javascript/dashboard/store/modules/specs/agentBots/mutations.spec.js

@@ -51,16 +51,4 @@ describe('#mutations', () => {
       expect(state.agentBotInbox).toEqual({ 3: 2 });
     });
   });
-  describe('#UPDATE_AGENT_BOT_AVATAR', () => {
-    it('update agent bot avatar', () => {
-      const state = { records: [agentBotRecords[0]] };
-      mutations[types.UPDATE_AGENT_BOT_AVATAR](state, {
-        id: 11,
-        thumbnail: 'https://example.com/thumbnail.jpg',
-      });
-      expect(state.records[0].thumbnail).toEqual(
-        'https://example.com/thumbnail.jpg'
-      );
-    });
-  });
 });

app/javascript/dashboard/store/modules/specs/inboxes/getters.spec.js

@@ -66,22 +66,6 @@ describe('#getters', () => {
     });
   });
 
-  it('getFacebookInboxByInstagramId', () => {
-    const state = { records: inboxList };
-    expect(getters.getFacebookInboxByInstagramId(state)(123456789)).toEqual({
-      id: 1,
-      channel_id: 1,
-      name: 'Test FacebookPage 1',
-      channel_type: 'Channel::FacebookPage',
-      avatar_url: 'random_image.png',
-      page_id: '12345',
-      widget_color: null,
-      website_token: null,
-      enable_auto_assignment: true,
-      instagram_id: 123456789,
-    });
-  });
-
   it('getInstagramInboxByInstagramId', () => {
     const state = { records: inboxList };
     expect(getters.getInstagramInboxByInstagramId(state)(123456789)).toEqual({

app/javascript/dashboard/store/mutation-types.js

@@ -301,7 +301,6 @@ export default {
   EDIT_AGENT_BOT: 'EDIT_AGENT_BOT',
   DELETE_AGENT_BOT: 'DELETE_AGENT_BOT',
   SET_AGENT_BOT_INBOX: 'SET_AGENT_BOT_INBOX',
-  UPDATE_AGENT_BOT_AVATAR: 'UPDATE_AGENT_BOT_AVATAR',
 
   // MACROS
   SET_MACROS_UI_FLAG: 'SET_MACROS_UI_FLAG',

app/javascript/sdk/IFrameHelper.js

@@ -22,11 +22,7 @@ import {
 } from './bubbleHelpers';
 import { isWidgetColorLighter } from 'shared/helpers/colorHelper';
 import { dispatchWindowEvent } from 'shared/helpers/CustomEventHelper';
-import {
-  CHATWOOT_ERROR,
-  CHATWOOT_POSTBACK,
-  CHATWOOT_READY,
-} from '../widget/constants/sdkEvents';
+import { CHATWOOT_ERROR, CHATWOOT_READY } from '../widget/constants/sdkEvents';
 import { SET_USER_ERROR } from '../widget/constants/errorTypes';
 import { getUserCookieName, setCookieWithDomain } from './cookieHelpers';
 import {
@@ -209,7 +205,7 @@ export const IFrameHelper = {
 
     postback(data) {
       dispatchWindowEvent({
-        eventName: CHATWOOT_POSTBACK,
+        eventName: 'chatwoot:postback',
         data,
       });
     },

app/javascript/sdk/bubbleHelpers.js

@@ -1,11 +1,6 @@
 import { addClasses, removeClasses, toggleClass } from './DOMHelpers';
 import { IFrameHelper } from './IFrameHelper';
 import { isExpandedView } from './settingsHelper';
-import {
-  CHATWOOT_CLOSED,
-  CHATWOOT_OPENED,
-} from '../widget/constants/sdkEvents';
-import { dispatchWindowEvent } from 'shared/helpers/CustomEventHelper';
 
 export const bubbleSVG =
   'M240.808 240.808H122.123C56.6994 240.808 3.45695 187.562 3.45695 122.122C3.45695 56.7031 56.6994 3.45697 122.124 3.45697C187.566 3.45697 240.808 56.7031 240.808 122.122V240.808Z';
@@ -70,30 +65,22 @@ export const createBubbleHolder = hideMessageBubble => {
   body.appendChild(bubbleHolder);
 };
 
-const handleBubbleToggle = newIsOpen => {
-  IFrameHelper.events.onBubbleToggle(newIsOpen);
-
-  if (newIsOpen) {
-    dispatchWindowEvent({ eventName: CHATWOOT_OPENED });
-  } else {
-    dispatchWindowEvent({ eventName: CHATWOOT_CLOSED });
-    chatBubble.focus();
-  }
-};
-
 export const onBubbleClick = (props = {}) => {
   const { toggleValue } = props;
   const { isOpen } = window.$chatwoot;
-  if (isOpen === toggleValue) return;
+  if (isOpen !== toggleValue) {
+    const newIsOpen = toggleValue === undefined ? !isOpen : toggleValue;
+    window.$chatwoot.isOpen = newIsOpen;
 
-  const newIsOpen = toggleValue === undefined ? !isOpen : toggleValue;
-  window.$chatwoot.isOpen = newIsOpen;
+    toggleClass(chatBubble, 'woot--hide');
+    toggleClass(closeBubble, 'woot--hide');
+    toggleClass(widgetHolder, 'woot--hide');
+    IFrameHelper.events.onBubbleToggle(newIsOpen);
 
-  toggleClass(chatBubble, 'woot--hide');
-  toggleClass(closeBubble, 'woot--hide');
-  toggleClass(widgetHolder, 'woot--hide');
-
-  handleBubbleToggle(newIsOpen);
+    if (!newIsOpen) {
+      chatBubble.focus();
+    }
+  }
 };
 
 export const onClickChatBubble = () => {

app/javascript/sdk/sdk.js

@@ -51,7 +51,6 @@ export const SDK_CSS = `
   user-select: none;
   width: 64px;
   z-index: 2147483000 !important;
-  overflow: hidden;
 }
 
 .woot-widget-bubble.woot-widget-bubble--flat {

app/javascript/shared/constants/messages.js

@@ -44,7 +44,6 @@ export const ALLOWED_FILE_TYPES =
   'video/*,' +
   '.3gpp,' +
   'text/csv, text/plain, application/json, application/pdf, text/rtf,' +
-  'application/xml, text/xml,' +
   'application/zip, application/x-7z-compressed application/vnd.rar application/x-tar,' +
   'application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/vnd.oasis.opendocument.text,' +
   'application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,' +

app/javascript/shared/helpers/MessageTypeHelper.js

@@ -4,20 +4,8 @@ export const isASubmittedFormMessage = (message = {}) =>
 
 export const MESSAGE_MAX_LENGTH = {
   GENERAL: 10000,
-  // https://developers.facebook.com/docs/messenger-platform/reference/send-api#request
-  FACEBOOK: 2000,
-  // https://developers.facebook.com/docs/instagram-platform/instagram-api-with-instagram-login/messaging-api#send-a-text-message
-  INSTAGRAM: 1000,
-  // https://www.twilio.com/docs/glossary/what-sms-character-limit
+  FACEBOOK: 1000,
   TWILIO_SMS: 320,
-  // https://help.twilio.com/articles/360033806753-Maximum-Message-Length-with-Twilio-Programmable-Messaging
   TWILIO_WHATSAPP: 1600,
-  // https://developers.facebook.com/docs/whatsapp/cloud-api/reference/messages#text-object
-  WHATSAPP_CLOUD: 4096,
-  // https://support.bandwidth.com/hc/en-us/articles/360010235373-What-are-Bandwidth-s-SMS-character-limits-and-concatenation-practices
-  BANDWIDTH_SMS: 160,
-  // https://core.telegram.org/bots/api#sendmessage
-  TELEGRAM: 4096,
-  LINE: 2000,
   EMAIL: 25000,
 };

app/javascript/shared/helpers/Validators.js

@@ -100,10 +100,3 @@ export const getRegexp = regexPatternValue => {
     regexPatternValue.slice(lastSlash + 1)
   );
 };
-
-/**
- * Checks if a string is a valid slug (letters, numbers, hyphens only, no spaces or other symbols).
- * @param {string} value - The slug to validate.
- * @returns {boolean} True if the slug is valid, false otherwise.
- */
-export const isValidSlug = value => /^[a-zA-Z0-9-]+$/.test(value);

app/javascript/shared/helpers/specs/ValidatorsHelper.spec.js

@@ -9,7 +9,6 @@ import {
   isNumber,
   isDomain,
   getRegexp,
-  isValidSlug,
 } from '../Validators';
 
 describe('#shouldBeUrl', () => {
@@ -154,24 +153,3 @@ describe('#getRegexp', () => {
     expect(regex.test('12-34-5678')).toBe(false);
   });
 });
-
-describe('#isValidSlug', () => {
-  it('should return true for valid slugs', () => {
-    expect(isValidSlug('abc')).toEqual(true);
-    expect(isValidSlug('abc-123')).toEqual(true);
-    expect(isValidSlug('a-b-c')).toEqual(true);
-    expect(isValidSlug('123')).toEqual(true);
-    expect(isValidSlug('abc123-def')).toEqual(true);
-  });
-  it('should return false for invalid slugs', () => {
-    expect(isValidSlug('abc_def')).toEqual(false);
-    expect(isValidSlug('abc def')).toEqual(false);
-    expect(isValidSlug('abc@def')).toEqual(false);
-    expect(isValidSlug('abc.def')).toEqual(false);
-    expect(isValidSlug('abc/def')).toEqual(false);
-    expect(isValidSlug('abc!def')).toEqual(false);
-    expect(isValidSlug('abc--def!')).toEqual(false);
-    expect(isValidSlug('abc-def ')).toEqual(false);
-    expect(isValidSlug(' abc-def')).toEqual(false);
-  });
-});

app/javascript/shared/mixins/inboxMixin.js

@@ -121,7 +121,7 @@ export default {
         this.isATwilioWhatsAppChannel
       );
     },
-    isAnInstagramChannel() {
+    isAInstagramChannel() {
       return this.channelType === INBOX_TYPES.INSTAGRAM;
     },
   },

app/javascript/shared/store/globalConfig.js

@@ -5,6 +5,7 @@ const {
   AZURE_APP_ID: azureAppId,
   BRAND_NAME: brandName,
   CHATWOOT_INBOX_TOKEN: chatwootInboxToken,
+  CSML_EDITOR_HOST: csmlEditorHost,
   CREATE_NEW_ACCOUNT_FROM_DASHBOARD: createNewAccountFromDashboard,
   DIRECT_UPLOADS_ENABLED: directUploadsEnabled,
   DISPLAY_MANIFEST: displayManifest,
@@ -28,6 +29,7 @@ const state = {
   azureAppId,
   brandName,
   chatwootInboxToken,
+  csmlEditorHost,
   deploymentEnv,
   createNewAccountFromDashboard,
   directUploadsEnabled: directUploadsEnabled === 'true',

app/javascript/widget/constants/sdkEvents.js

@@ -1,7 +1,4 @@
 export const CHATWOOT_ERROR = 'chatwoot:error';
 export const CHATWOOT_ON_MESSAGE = 'chatwoot:on-message';
 export const CHATWOOT_ON_START_CONVERSATION = 'chatwoot:on-start-conversation';
-export const CHATWOOT_POSTBACK = 'chatwoot:postback';
 export const CHATWOOT_READY = 'chatwoot:ready';
-export const CHATWOOT_OPENED = 'chatwoot:opened';
-export const CHATWOOT_CLOSED = 'chatwoot:closed';

app/jobs/agent_bots/csml_job.rb

@@ -0,0 +1,10 @@
+class AgentBots::CsmlJob < ApplicationJob
+  queue_as :high
+
+  def perform(event, agent_bot, message)
+    event_data = { message: message }
+    Integrations::Csml::ProcessorService.new(
+      event_name: event, agent_bot: agent_bot, event_data: event_data
+    ).perform
+  end
+end

app/jobs/conversations/update_message_status_job.rb

@@ -15,7 +15,7 @@ class Conversations::UpdateMessageStatusJob < ApplicationJob
     conversation.messages.where(status: %w[sent delivered])
                 .where.not(message_type: 'incoming')
                 .where('messages.created_at <= ?', timestamp).find_each do |message|
-      Messages::StatusUpdateService.new(message, status).perform
+      message.update!(status: status)
     end
   end
 end

app/jobs/crm/setup_job.rb

@@ -1,36 +0,0 @@
-class Crm::SetupJob < ApplicationJob
-  queue_as :default
-
-  def perform(hook_id)
-    hook = Integrations::Hook.find_by(id: hook_id)
-
-    return if hook.blank? || hook.disabled?
-
-    begin
-      setup_service = create_setup_service(hook)
-      return if setup_service.nil?
-
-      setup_service.setup
-    rescue StandardError => e
-      ChatwootExceptionTracker.new(e, account: hook.account).capture_exception
-      Rails.logger.error "Error in CRM setup for hook ##{hook_id} (#{hook.app_id}): #{e.message}"
-    end
-  end
-
-  private
-
-  def create_setup_service(hook)
-    case hook.app_id
-    when 'leadsquared'
-      Crm::Leadsquared::SetupService.new(hook)
-    # Add cases for future CRMs here
-    # when 'hubspot'
-    #   Crm::Hubspot::SetupService.new(hook)
-    # when 'zoho'
-    #   Crm::Zoho::SetupService.new(hook)
-    else
-      Rails.logger.error "Unsupported CRM app_id: #{hook.app_id}"
-      nil
-    end
-  end
-end

app/jobs/hook_job.rb

@@ -1,6 +1,4 @@
-class HookJob < MutexApplicationJob
-  retry_on LockAcquisitionError, wait: 3.seconds, attempts: 3
-
+class HookJob < ApplicationJob
   queue_as :medium
 
   def perform(hook, event_name, event_data = {})
@@ -13,8 +11,6 @@ class HookJob < MutexApplicationJob
       process_dialogflow_integration(hook, event_name, event_data)
     when 'google_translate'
       google_translate_integration(hook, event_name, event_data)
-    when 'leadsquared'
-      process_leadsquared_integration_with_lock(hook, event_name, event_data)
     end
   rescue StandardError => e
     Rails.logger.error e
@@ -45,39 +41,4 @@ class HookJob < MutexApplicationJob
     message = event_data[:message]
     Integrations::GoogleTranslate::DetectLanguageService.new(hook: hook, message: message).perform
   end
-
-  def process_leadsquared_integration_with_lock(hook, event_name, event_data)
-    # Why do we need a mutex here? glad you asked
-    # When a new conversation is created. We get a contact created event, immediately followed by
-    # a contact updated event, and then a conversation created event.
-    # This all happens within milliseconds of each other.
-    # Now each of these subsequent event handlers need to have a leadsquared lead created and the contact to have the ID.
-    # If the lead data is not present, we try to search the API and create a new lead if it doesn't exist.
-    # This gives us a bad race condition that allows the API to create multiple leads for the same contact.
-    #
-    # This would have not been a problem if the email and phone number were unique identifiers for contacts at LeadSquared
-    # But then this is configurable in the LeadSquared settings, and may or may not be unique.
-    valid_event_names = ['contact.updated', 'conversation.created', 'conversation.resolved']
-    return unless valid_event_names.include?(event_name)
-    return unless hook.feature_allowed?
-
-    key = format(::Redis::Alfred::CRM_PROCESS_MUTEX, hook_id: hook.id)
-    with_lock(key) do
-      process_leadsquared_integration(hook, event_name, event_data)
-    end
-  end
-
-  def process_leadsquared_integration(hook, event_name, event_data)
-    # Process the event with the processor service
-    processor = Crm::Leadsquared::ProcessorService.new(hook)
-
-    case event_name
-    when 'contact.updated'
-      processor.handle_contact(event_data[:contact])
-    when 'conversation.created'
-      processor.handle_conversation_created(event_data[:conversation])
-    when 'conversation.resolved'
-      processor.handle_conversation_resolved(event_data[:conversation])
-    end
-  end
 end

app/listeners/agent_bot_listener.rb

@@ -59,10 +59,14 @@ class AgentBotListener < BaseListener
     true
   end
 
-  def process_message_event(method_name, agent_bot, message, _event)
-    # Only webhook bots are supported
-    payload = message.webhook_data.merge(event: method_name)
-    process_webhook_bot_event(agent_bot, payload)
+  def process_message_event(method_name, agent_bot, message, event)
+    case agent_bot.bot_type
+    when 'webhook'
+      payload = message.webhook_data.merge(event: method_name)
+      process_webhook_bot_event(agent_bot, payload)
+    when 'csml'
+      process_csml_bot_event(event.name, agent_bot, message)
+    end
   end
 
   def process_webhook_bot_event(agent_bot, payload)
@@ -70,4 +74,8 @@ class AgentBotListener < BaseListener
 
     AgentBots::WebhookJob.perform_later(agent_bot.outgoing_url, payload)
   end
+
+  def process_csml_bot_event(event, agent_bot, message)
+    AgentBots::CsmlJob.perform_later(event, agent_bot, message)
+  end
 end

app/listeners/hook_listener.rb

@@ -11,29 +11,6 @@ class HookListener < BaseListener
     execute_hooks(event, message)
   end
 
-  def contact_created(event)
-    contact = extract_contact_and_account(event)[0]
-    execute_account_hooks(event, contact.account, contact: contact)
-  end
-
-  def contact_updated(event)
-    contact = extract_contact_and_account(event)[0]
-    execute_account_hooks(event, contact.account, contact: contact)
-  end
-
-  def conversation_created(event)
-    conversation = extract_conversation_and_account(event)[0]
-    execute_account_hooks(event, conversation.account, conversation: conversation)
-  end
-
-  def conversation_resolved(event)
-    conversation = extract_conversation_and_account(event)[0]
-    # Only trigger for status changes is resolved
-    return unless conversation.status == 'resolved'
-
-    execute_account_hooks(event, conversation.account, conversation: conversation)
-  end
-
   private
 
   def execute_hooks(event, message)
@@ -45,10 +22,4 @@ class HookListener < BaseListener
       HookJob.perform_later(hook, event.name, message: message)
     end
   end
-
-  def execute_account_hooks(event, account, event_data = {})
-    account.hooks.account_hooks.find_each do |hook|
-      HookJob.perform_later(hook, event.name, event_data)
-    end
-  end
 end

app/models/agent_bot.rb

@@ -25,8 +25,9 @@ class AgentBot < ApplicationRecord
   has_many :inboxes, through: :agent_bot_inboxes
   has_many :messages, as: :sender, dependent: :nullify
   belongs_to :account, optional: true
-  enum bot_type: { webhook: 0 }
+  enum bot_type: { webhook: 0, csml: 1 }
 
+  validate :validate_agent_bot_config
   validates :outgoing_url, length: { maximum: Limits::URL_LENGTH_LIMIT }
 
   def available_name
@@ -50,7 +51,9 @@ class AgentBot < ApplicationRecord
     }
   end
 
-  def system_bot?
-    account.nil?
+  private
+
+  def validate_agent_bot_config
+    errors.add(:bot_config, 'Invalid Bot Configuration') unless AgentBots::ValidateBotService.new(agent_bot: self).perform
   end
 end

app/models/channel/whatsapp.rb

@@ -54,7 +54,6 @@ class Channel::Whatsapp < ApplicationRecord
 
   delegate :send_message, to: :provider_service
   delegate :send_template, to: :provider_service
-  delegate :send_typing_indicator, to: :provider_service
   delegate :sync_templates, to: :provider_service
   delegate :media_url, to: :provider_service
   delegate :api_headers, to: :provider_service

app/models/integrations/app.rb

@@ -18,10 +18,6 @@ class Integrations::App
     I18n.t("integration_apps.#{params[:i18n_key]}.description")
   end
 
-  def short_description
-    I18n.t("integration_apps.#{params[:i18n_key]}.short_description")
-  end
-
   def logo
     params[:logo]
   end
@@ -55,8 +51,6 @@ class Integrations::App
       GlobalConfigService.load('LINEAR_CLIENT_ID', nil).present?
     when 'shopify'
       account.feature_enabled?('shopify_integration') && GlobalConfigService.load('SHOPIFY_CLIENT_ID', nil).present?
-    when 'leadsquared'
-      account.feature_enabled?('crm_integration')
     else
       true
     end

app/models/integrations/hook.rb

@@ -19,13 +19,11 @@ class Integrations::Hook < ApplicationRecord
 
   attr_readonly :app_id, :account_id, :inbox_id, :hook_type
   before_validation :ensure_hook_type
-  after_create :trigger_setup_if_crm
 
   validates :account_id, presence: true
   validates :app_id, presence: true
   validates :inbox_id, presence: true, if: -> { hook_type == 'inbox' }
   validate :validate_settings_json_schema
-  validate :ensure_feature_enabled
   validates :app_id, uniqueness: { scope: [:account_id], unless: -> { app.present? && app.params[:allow_multiple_hooks].present? } }
 
   # TODO: This seems to be only used for slack at the moment
@@ -38,9 +36,6 @@ class Integrations::Hook < ApplicationRecord
 
   enum hook_type: { account: 0, inbox: 1 }
 
-  scope :account_hooks, -> { where(hook_type: 'account') }
-  scope :inbox_hooks, -> { where(hook_type: 'inbox') }
-
   def app
     @app ||= Integrations::App.find(id: app_id)
   end
@@ -66,21 +61,8 @@ class Integrations::Hook < ApplicationRecord
     end
   end
 
-  def feature_allowed?
-    return true if app.blank?
-
-    flag = app.params[:feature_flag]
-    return true unless flag
-
-    account.feature_enabled?(flag)
-  end
-
   private
 
-  def ensure_feature_enabled
-    errors.add(:feature_flag, 'Feature not enabled') unless feature_allowed?
-  end
-
   def ensure_hook_type
     self.hook_type = app.params[:hook_type] if app.present?
   end
@@ -90,17 +72,4 @@ class Integrations::Hook < ApplicationRecord
 
     errors.add(:settings, ': Invalid settings data') unless JSONSchemer.schema(app.params[:settings_json_schema]).valid?(settings)
   end
-
-  def trigger_setup_if_crm
-    # we need setup services to create data prerequisite to functioning of the integration
-    # in case of Leadsquared, we need to create a custom activity type for capturing conversations and transcripts
-    # https://apidocs.leadsquared.com/create-new-activity-type-api/
-    return unless crm_integration?
-
-    ::Crm::SetupJob.perform_later(id)
-  end
-
-  def crm_integration?
-    %w[leadsquared].include?(app_id)
-  end
 end

app/services/agent_bots/validate_bot_service.rb

@@ -0,0 +1,38 @@
+class AgentBots::ValidateBotService
+  pattr_initialize [:agent_bot]
+  def perform
+    return true unless agent_bot.bot_type == 'csml'
+
+    validate_csml_bot
+  end
+
+  private
+
+  def csml_client
+    @csml_client ||= CsmlEngine.new
+  end
+
+  def csml_bot_payload
+    {
+      id: agent_bot[:name],
+      name: agent_bot[:name],
+      default_flow: 'Default',
+      flows: [
+        {
+          id: SecureRandom.uuid,
+          name: 'Default',
+          content: agent_bot.bot_config['csml_content'],
+          commands: []
+        }
+      ]
+    }
+  end
+
+  def validate_csml_bot
+    response = csml_client.validate(csml_bot_payload)
+    response.blank? || response['valid']
+  rescue StandardError => e
+    ChatwootExceptionTracker.new(e, account: agent_bot&.account).capture_exception
+    false
+  end
+end

app/services/conversations/typing_status_manager.rb

@@ -18,22 +18,9 @@ class Conversations::TypingStatusManager
     case params[:typing_status]
     when 'on'
       trigger_typing_event(CONVERSATION_TYPING_ON, params[:is_private])
-      send_whatsapp_typing_indicator if conversation.inbox.whatsapp? && conversation.inbox.channel.provider == 'whatsapp_cloud'
     when 'off'
       trigger_typing_event(CONVERSATION_TYPING_OFF, params[:is_private])
     end
     # Return the head :ok response from the controller
   end
-
-  private
-
-  def send_whatsapp_typing_indicator
-    last_incoming_message = @conversation.messages&.incoming&.last
-    return if last_incoming_message.blank?
-
-    conversation.inbox.channel.send_typing_indicator(
-      last_incoming_message.conversation.contact_inbox.source_id,
-      last_incoming_message.source_id
-    )
-  end
 end