Merge branch 'release/4.1.0'

- Move instagram channel from  `internal` to  general availability

app/builders/messages/instagram/base_message_builder.rb

@@ -94,11 +94,10 @@ class Messages::Instagram::BaseMessageBuilder < Messages::Messenger::MessageBuil
   def build_message
     # Duplicate webhook events may be sent for the same message
     # when a user is connected to the Instagram account through both Messenger and Instagram login.
+    # There is chance for echo events to be sent for the same message.
     # Therefore, we need to check if the message already exists before creating it.
     return if message_already_exists?
 
-    return if @outgoing_echo
-
     return if message_content.blank? && all_unsupported_files?
 
     @message = conversation.messages.create!(message_params)

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

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

app/controllers/dashboard_controller.rb

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

app/controllers/devise_overrides/omniauth_callbacks_controller.rb

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

app/javascript/dashboard/api/agentBots.js

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

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

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

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

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

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

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

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

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

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

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

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

@@ -22,8 +22,14 @@ const {
   isAInstagramChannel,
 } = useInbox();
 
-const { status, isPrivate, createdAt, sourceId, messageType } =
-  useMessageContext();
+const {
+  status,
+  isPrivate,
+  createdAt,
+  sourceId,
+  messageType,
+  contentAttributes,
+} = useMessageContext();
 
 const readableTime = computed(() =>
   messageTimestamp(createdAt.value, 'LLL d, h:mm a')
@@ -31,6 +37,11 @@ const readableTime = computed(() =>
 
 const showStatusIndicator = computed(() => {
   if (isPrivate.value) return false;
+  // Don't show status for failed messages, we already show error message
+  if (status.value === MESSAGE_STATUS.FAILED) return false;
+  // Don't show status for deleted messages
+  if (contentAttributes.value?.deleted) return false;
+
   if (messageType.value === MESSAGE_TYPES.OUTGOING) return true;
   if (messageType.value === MESSAGE_TYPES.TEMPLATE) return true;
 

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -49,13 +49,6 @@ export default {
       return !!this.menuItem.children;
     },
     isMenuItemVisible() {
-      if (this.menuItem.globalConfigFlag) {
-        // this checks for the `csmlEditorHost` flag in the global config
-        // if this is present, we toggle the CSML editor menu item
-        // TODO: This is very specific, and can be handled better, fix it
-        return !!this.globalConfig[this.menuItem.globalConfigFlag];
-      }
-
       let isFeatureEnabled = true;
       if (this.menuItem.featureFlag) {
         isFeatureEnabled = this.isFeatureEnabledonAccount(

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

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

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

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

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

@@ -65,7 +65,7 @@ const validateDate = () => {
     <input
       v-model="localDateValue"
       type="text"
-      class="reset-base border bg-slate-25 dark:bg-slate-900 ring-offset-ash-900 border-slate-50 dark:border-slate-700/50 w-full disabled:text-slate-200 dark:disabled:text-slate-700 disabled:cursor-not-allowed text-slate-800 dark:text-slate-50 px-1.5 py-1 text-sm rounded-xl h-10"
+      class="!text-sm !mb-0 disabled:!outline-n-strong"
       :placeholder="dateFormat"
       :disabled="isDisabled"
       @keypress.enter="validateDate"

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

@@ -18,7 +18,7 @@ const setDateRange = range => {
 <template>
   <div class="w-[200px] flex flex-col items-start">
     <h4
-      class="w-full px-5 py-4 text-sm font-medium capitalize text-start text-slate-600 dark:text-slate-200"
+      class="w-full px-5 py-4 text-sm font-medium capitalize text-start text-n-slate-12"
     >
       {{ $t('DATE_PICKER.DATE_RANGE_OPTIONS.TITLE') }}
     </h4>
@@ -26,11 +26,11 @@ const setDateRange = range => {
       <button
         v-for="range in dateRanges"
         :key="range.label"
-        class="w-full px-5 py-3 text-sm font-medium truncate border-none rounded-none text-start hover:bg-slate-50 dark:hover:bg-slate-700"
+        class="w-full px-5 py-3 text-sm font-medium truncate border-none rounded-none text-start hover:bg-n-alpha-2 dark:hover:bg-n-solid-3"
         :class="
           range.value === selectedRange
-            ? 'text-slate-800 dark:text-slate-50 bg-slate-50 dark:bg-slate-700'
-            : 'text-slate-600 dark:text-slate-200'
+            ? 'text-n-slate-12 bg-n-alpha-1 dark:bg-n-solid-active'
+            : 'text-n-slate-12'
         "
         @click="setDateRange(range)"
       >

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

@@ -1,4 +1,6 @@
 <script setup>
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 const emit = defineEmits(['clear', 'change']);
 
 const onClickClear = () => {
@@ -11,18 +13,19 @@ const onClickApply = () => {
 </script>
 
 <template>
-  <div class="h-[56px] flex justify-between px-5 py-3 items-center">
-    <button
-      class="p-1.5 rounded-lg w-fit text-sm font-medium text-slate-600 dark:text-slate-200 hover:text-slate-800 dark:hover:text-slate-100"
+  <div class="h-[56px] flex justify-between gap-2 px-2 py-3 items-center">
+    <NextButton
+      slate
+      ghost
+      sm
+      :label="$t('DATE_PICKER.CLEAR_BUTTON')"
       @click="onClickClear"
-    >
-      {{ $t('DATE_PICKER.CLEAR_BUTTON') }}
-    </button>
-    <button
-      class="p-1.5 rounded-lg w-fit text-sm font-medium text-woot-500 dark:text-woot-300 hover:text-woot-700 dark:hover:text-woot-500"
+    />
+    <NextButton
+      sm
+      ghost
+      :label="$t('DATE_PICKER.APPLY_BUTTON')"
       @click="onClickApply"
-    >
-      {{ $t('DATE_PICKER.APPLY_BUTTON') }}
-    </button>
+    />
   </div>
 </template>

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

@@ -71,10 +71,12 @@ const selectMonth = index => {
       <button
         v-for="(month, index) in months"
         :key="index"
-        class="p-2 text-sm font-medium text-center text-slate-800 dark:text-slate-50 w-[92px] h-10 rounded-lg py-2.5 px-2 hover:bg-slate-75 dark:hover:bg-slate-700"
+        class="p-2 text-sm font-medium text-center text-n-slate-12 w-[92px] h-10 rounded-lg py-2.5 px-2"
         :class="{
-          'bg-woot-600 dark:bg-woot-600 text-white dark:text-white hover:bg-woot-500 dark:bg-woot-700':
+          'bg-n-brand text-white hover:bg-n-blue-10':
             index === activeMonthIndex,
+          'hover:bg-n-alpha-2 dark:hover:bg-n-solid-3':
+            index !== activeMonthIndex,
         }"
         @click="selectMonth(index)"
       >

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

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

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

@@ -72,10 +72,10 @@ const selectYear = year => {
       <button
         v-for="year in years"
         :key="year"
-        class="p-2 text-sm font-medium text-center text-slate-800 dark:text-slate-50 w-[144px] h-10 rounded-lg py-2.5 px-2 hover:bg-slate-75 dark:hover:bg-slate-700"
+        class="p-2 text-sm font-medium text-center text-n-slate-12 w-[144px] h-10 rounded-lg py-2.5 px-2"
         :class="{
-          'bg-woot-600 dark:bg-woot-600 text-white dark:text-white hover:bg-woot-500 dark:hover:bg-woot-700':
-            year === activeYear,
+          'bg-n-brand text-white hover:bg-n-blue-10': year === activeYear,
+          'hover:bg-n-alpha-2 dark:hover:bg-n-solid-3': year !== activeYear,
         }"
         @click="selectYear(year)"
       >

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

@@ -48,7 +48,7 @@ const openDatePicker = () => {
 
 <template>
   <button
-    class="inline-flex relative items-center rounded-lg gap-2 py-1.5 px-3 h-8 bg-slate-50 dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800 active:bg-slate-75 dark:active:bg-slate-800"
+    class="inline-flex relative items-center rounded-lg gap-2 py-1.5 px-3 h-8 bg-n-alpha-2 hover:bg-n-alpha-1 active:bg-n-alpha-1"
     @click="openDatePicker"
   >
     <fluent-icon

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

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

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

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

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

@@ -36,6 +36,7 @@ import { REPLY_POLICY } from 'shared/constants/links';
 import wootConstants from 'dashboard/constants/globals';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { FEATURE_FLAGS } from '../../../featureFlags';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
 
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
@@ -209,6 +210,17 @@ export default {
       return contactLastSeenAt;
     },
 
+    // Check there is a instagram inbox exists with the same instagram_id
+    hasDuplicateInstagramInbox() {
+      const instagramId = this.inbox.instagram_id;
+      const instagramInbox =
+        this.$store.getters['inboxes/getInstagramInboxByInstagramId'](
+          instagramId
+        );
+
+      return this.inbox.channel_type === INBOX_TYPES.FB && instagramInbox;
+    },
+
     replyWindowBannerMessage() {
       if (this.isAWhatsAppChannel) {
         return this.$t('CONVERSATION.TWILIO_WHATSAPP_CAN_REPLY');
@@ -218,8 +230,14 @@ export default {
         if (additionalAttributes) {
           const {
             agent_reply_time_window_message: agentReplyTimeWindowMessage,
+            agent_reply_time_window: agentReplyTimeWindow,
           } = additionalAttributes;
-          return agentReplyTimeWindowMessage;
+          return (
+            agentReplyTimeWindowMessage ||
+            this.$t('CONVERSATION.API_HOURS_WINDOW', {
+              hours: agentReplyTimeWindow,
+            })
+          );
         }
         return '';
       }
@@ -497,6 +515,12 @@ export default {
       :href-link="replyWindowLink"
       :href-link-text="replyWindowLinkText"
     />
+    <Banner
+      v-else-if="hasDuplicateInstagramInbox"
+      color-scheme="alert"
+      class="mx-2 mt-2 overflow-hidden rounded-lg"
+      :banner-message="$t('CONVERSATION.OLD_INSTAGRAM_INBOX_REPLY_BANNER')"
+    />
     <div class="flex justify-end">
       <NextButton
         faded

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

@@ -686,7 +686,11 @@ export default {
           this.isATwilioWhatsAppChannel ||
           this.isAWhatsAppCloudChannel ||
           this.is360DialogWhatsAppChannel;
-        if (isOnWhatsApp && !this.isPrivate) {
+        // When users send messages containing both text and attachments on Instagram, Instagram treats them as separate messages.
+        // Although Chatwoot combines these into a single message, Instagram sends separate echo events for each component.
+        // This can create duplicate messages in Chatwoot. To prevent this issue, we'll handle text and attachments as separate messages.
+        const isOnInstagram = this.isAInstagramChannel;
+        if ((isOnWhatsApp || isOnInstagram) && !this.isPrivate) {
           this.sendMessageAsMultipleMessages(this.message);
         } else {
           const messagePayload = this.getMessagePayload(this.message);
@@ -703,7 +707,7 @@ export default {
       }
     },
     sendMessageAsMultipleMessages(message) {
-      const messages = this.getMessagePayloadForWhatsapp(message);
+      const messages = this.getMultipleMessagesPayload(message);
       messages.forEach(messagePayload => {
         this.sendMessage(messagePayload);
       });
@@ -935,11 +939,11 @@ export default {
 
       return payload;
     },
-    getMessagePayloadForWhatsapp(message) {
+    getMultipleMessagesPayload(message) {
       const multipleMessagePayload = [];
 
       if (this.attachedFiles && this.attachedFiles.length) {
-        let caption = message;
+        let caption = this.isAInstagramChannel ? '' : message;
         this.attachedFiles.forEach(attachment => {
           const attachedFile = this.globalConfig.directUploadsEnabled
             ? attachment.blobSignedId
@@ -954,9 +958,19 @@ export default {
 
           attachmentPayload = this.setReplyToInPayload(attachmentPayload);
           multipleMessagePayload.push(attachmentPayload);
-          caption = '';
+          // For WhatsApp, only the first attachment gets a caption
+          if (!this.isAInstagramChannel) caption = '';
         });
-      } else {
+      }
+
+      const hasNoAttachments =
+        !this.attachedFiles || !this.attachedFiles.length;
+      // For Instagram, we need a separate text message
+      // For WhatsApp, we only need a text message if there are no attachments
+      if (
+        (this.isAInstagramChannel && this.message) ||
+        (!this.isAInstagramChannel && hasNoAttachments)
+      ) {
         let messagePayload = {
           conversationId: this.currentChat.id,
           message,
@@ -1136,7 +1150,7 @@ export default {
         v-else-if="!showRichContentEditor"
         ref="messageInput"
         v-model="message"
-        class="input"
+        class="rounded-none input"
         :placeholder="messagePlaceHolder"
         :min-height="4"
         :signature="signatureToApply"

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

@@ -69,10 +69,6 @@ const onAgentSelect = index => {
       v-if="items.length"
       ref="tagAgentsRef"
       class="vertical dropdown menu mention--box bg-n-solid-1 p-1 rounded-xl text-sm overflow-auto absolute w-full z-20 shadow-md left-0 leading-[1.2] bottom-full max-h-[12.5rem] border border-solid border-n-strong"
-      :class="{
-        'border-b-[0.5rem] border-solid border-white dark:!border-slate-700':
-          items.length <= 4,
-      }"
     >
       <li
         v-for="(agent, index) in items"

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

@@ -0,0 +1,39 @@
+import { ref } from 'vue';
+import { useTranslations } from '../useTranslations';
+
+describe('useTranslations', () => {
+  it('returns false and null when contentAttributes is null', () => {
+    const contentAttributes = ref(null);
+    const { hasTranslations, translationContent } =
+      useTranslations(contentAttributes);
+    expect(hasTranslations.value).toBe(false);
+    expect(translationContent.value).toBeNull();
+  });
+
+  it('returns false and null when translations are missing', () => {
+    const contentAttributes = ref({});
+    const { hasTranslations, translationContent } =
+      useTranslations(contentAttributes);
+    expect(hasTranslations.value).toBe(false);
+    expect(translationContent.value).toBeNull();
+  });
+
+  it('returns false and null when translations is an empty object', () => {
+    const contentAttributes = ref({ translations: {} });
+    const { hasTranslations, translationContent } =
+      useTranslations(contentAttributes);
+    expect(hasTranslations.value).toBe(false);
+    expect(translationContent.value).toBeNull();
+  });
+
+  it('returns true and correct translation content when translations exist', () => {
+    const contentAttributes = ref({
+      translations: { en: 'Hello' },
+    });
+    const { hasTranslations, translationContent } =
+      useTranslations(contentAttributes);
+    expect(hasTranslations.value).toBe(true);
+    // Should return the first translation (en: 'Hello')
+    expect(translationContent.value).toBe('Hello');
+  });
+});

app/javascript/dashboard/composables/useReportMetrics.js

@@ -7,8 +7,12 @@ import { formatTime } from '@chatwoot/utils';
  * @param {string} [accountSummaryKey='getAccountSummary'] - The key for accessing account summary data.
  * @returns {Object} An object containing utility functions for report metrics.
  */
-export function useReportMetrics(accountSummaryKey = 'getAccountSummary') {
+export function useReportMetrics(
+  accountSummaryKey = 'getAccountSummary',
+  summarFetchingKey = 'getAccountSummaryFetchingStatus'
+) {
   const accountSummary = useMapGetter(accountSummaryKey);
+  const fetchingStatus = useMapGetter(summarFetchingKey);
 
   /**
    * Calculates the trend percentage for a given metric.
@@ -53,5 +57,6 @@ export function useReportMetrics(accountSummaryKey = 'getAccountSummary') {
     calculateTrend,
     isAverageMetricType,
     displayMetric,
+    fetchingStatus,
   };
 }

app/javascript/dashboard/composables/useTranslations.js

@@ -0,0 +1,22 @@
+import { computed } from 'vue';
+
+/**
+ * Composable to extract translation state/content from contentAttributes.
+ * @param {Ref|Reactive} contentAttributes - Ref or reactive object containing `translations` property
+ * @returns {Object} { hasTranslations, translationContent }
+ */
+export function useTranslations(contentAttributes) {
+  const hasTranslations = computed(() => {
+    if (!contentAttributes.value) return false;
+    const { translations = {} } = contentAttributes.value;
+    return Object.keys(translations || {}).length > 0;
+  });
+
+  const translationContent = computed(() => {
+    if (!hasTranslations.value) return null;
+    const translations = contentAttributes.value.translations;
+    return translations[Object.keys(translations)[0]];
+  });
+
+  return { hasTranslations, translationContent };
+}

app/javascript/dashboard/composables/useUISettings.js

@@ -36,7 +36,7 @@ const useConversationSidebarItemsOrder = uiSettings => {
     const { conversation_sidebar_items_order: itemsOrder } = uiSettings.value;
     // If the sidebar order is not set, use the default order.
     if (!itemsOrder) {
-      return DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER;
+      return [...DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER];
     }
     // Create a copy of itemsOrder to avoid mutating the original store object.
     const itemsOrderCopy = [...itemsOrder];

app/javascript/dashboard/helper/permissionsHelper.js

@@ -16,6 +16,15 @@ export const getUserPermissions = (user, accountId) => {
   return currentAccount.permissions || [];
 };
 
+export const getUserRole = (user, accountId) => {
+  const currentAccount = getCurrentAccount(user, accountId) || {};
+  if (currentAccount.custom_role_id) {
+    return 'custom_role';
+  }
+
+  return currentAccount.role || 'agent';
+};
+
 const isPermissionsPresentInRoute = route =>
   route.meta && route.meta.permissions;
 

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

@@ -2,23 +2,13 @@
   "AGENT_BOTS": {
     "HEADER": "Bots",
     "LOADING_EDITOR": "Loading editor...",
-    "DESCRIPTION": "Agent Bots are like the most fabulous members of your team. They can handle the small stuff, so you can focus on the stuff that matters. Give them a try.You can manage your bots from this page or create new ones using the 'Configure new bot' button.",
+    "DESCRIPTION": "Agent Bots are like the most fabulous members of your team. They can handle the small stuff, so you can focus on the stuff that matters. Give them a try. You can manage your bots from this page or create new ones using the 'Add Bot' button.",
     "LEARN_MORE": "Learn about agent bots",
-    "CSML_BOT_EDITOR": {
-      "NAME": {
-        "LABEL": "Bot name",
-        "PLACEHOLDER": "Name your bot.",
-        "ERROR": "Bot name is required."
-      },
-      "DESCRIPTION": {
-        "LABEL": "Bot description",
-        "PLACEHOLDER": "What does this bot do?"
-      },
-      "BOT_CONFIG": {
-        "ERROR": "Please enter your CSML bot configuration above.",
-        "API_ERROR": "Your CSML configuration is invalid. Please fix it and try again."
-      },
-      "SUBMIT": "Validate and save"
+    "GLOBAL_BOT": "System bot",
+    "GLOBAL_BOT_BADGE": "System",
+    "AVATAR": {
+      "SUCCESS_DELETE": "Bot avatar deleted successfully",
+      "ERROR_DELETE": "Error deleting bot avatar, please try again"
     },
     "BOT_CONFIGURATION": {
       "TITLE": "Select an agent bot",
@@ -32,7 +22,7 @@
       "SELECT_PLACEHOLDER": "Select bot"
     },
     "ADD": {
-      "TITLE": "Configure new bot",
+      "TITLE": "Add Bot",
       "CANCEL_BUTTON_TEXT": "Cancel",
       "API": {
         "SUCCESS_MESSAGE": "Bot added successfully.",
@@ -40,16 +30,22 @@
       }
     },
     "LIST": {
-      "404": "No bots found. You can create a bot by clicking the 'Configure new bot' button ↗",
+      "404": "No bots found. You can create a bot by clicking the 'Add Bot' button.",
       "LOADING": "Fetching bots...",
-      "TYPE": "Bot type"
+      "TABLE_HEADER": {
+        "DETAILS": "Bot Details",
+        "URL": "Webhook URL"
+      }
     },
     "DELETE": {
       "BUTTON_TEXT": "Delete",
       "TITLE": "Delete bot",
-      "SUBMIT": "Delete",
-      "CANCEL_BUTTON_TEXT": "Cancel",
-      "DESCRIPTION": "Are you sure you want to delete this bot? This action is irreversible.",
+      "CONFIRM": {
+        "TITLE": "Confirm Deletion",
+        "MESSAGE": "Are you sure you want to delete {name}?",
+        "YES": "Yes, Delete",
+        "NO": "No, Keep"
+      },
       "API": {
         "SUCCESS_MESSAGE": "Bot deleted successfully.",
         "ERROR_MESSAGE": "Could not delete bot. Please try again."
@@ -57,17 +53,44 @@
     },
     "EDIT": {
       "BUTTON_TEXT": "Edit",
-      "LOADING": "Fetching bots...",
       "TITLE": "Edit bot",
-      "CANCEL_BUTTON_TEXT": "Cancel",
       "API": {
         "SUCCESS_MESSAGE": "Bot updated successfully.",
         "ERROR_MESSAGE": "Could not update bot. Please try again."
       }
     },
+    "FORM": {
+      "AVATAR": {
+        "LABEL": "Bot avatar"
+      },
+      "NAME": {
+        "LABEL": "Bot name",
+        "PLACEHOLDER": "Enter bot name",
+        "REQUIRED": "Bot name is required"
+      },
+      "DESCRIPTION": {
+        "LABEL": "Description",
+        "PLACEHOLDER": "What does this bot do?"
+      },
+      "WEBHOOK_URL": {
+        "LABEL": "Webhook URL",
+        "PLACEHOLDER": "https://example.com/webhook",
+        "REQUIRED": "Webhook URL is required"
+      },
+      "ERRORS": {
+        "NAME": "Bot name is required",
+        "URL": "Webhook URL is required",
+        "VALID_URL": "Please enter a valid URL starting with http:// or https://"
+      },
+      "CANCEL": "Cancel",
+      "CREATE": "Create Bot",
+      "UPDATE": "Update Bot"
+    },
+    "WEBHOOK": {
+      "DESCRIPTION": "Configure a webhook bot to integrate with your custom services. The bot will receive and process events from conversations and can respond to them."
+    },
     "TYPES": {
-      "WEBHOOK": "Webhook bot",
-      "CSML": "CSML bot"
+      "WEBHOOK": "Webhook bot"
     }
   }
 }

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

@@ -32,10 +32,12 @@
     "LOADING_CONVERSATIONS": "Loading Conversations",
     "CANNOT_REPLY": "You cannot reply due to",
     "24_HOURS_WINDOW": "24 hour message window restriction",
+    "API_HOURS_WINDOW": "You can only reply to this conversation within {hours} hours",
     "NOT_ASSIGNED_TO_YOU": "This conversation is not assigned to you. Would you like to assign this conversation to yourself?",
     "ASSIGN_TO_ME": "Assign to me",
     "TWILIO_WHATSAPP_CAN_REPLY": "You can only reply to this conversation using a template message due to",
     "TWILIO_WHATSAPP_24_HOURS_WINDOW": "24 hour message window restriction",
+    "OLD_INSTAGRAM_INBOX_REPLY_BANNER": "This Instagram account was migrated to the new Instagram channel inbox. All new messages will show up there. You won’t be able to send messages from this conversation anymore.",
     "REPLYING_TO": "You are replying to:",
     "REMOVE_SELECTION": "Remove Selection",
     "DOWNLOAD": "Download",

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

@@ -51,7 +51,9 @@
         "CONNECT_YOUR_INSTAGRAM_PROFILE": "Connect your Instagram Profile",
         "HELP": "To add your Instagram profile as a channel, you need to authenticate your Instagram Profile by clicking on 'Continue with Instagram' ",
         "ERROR_MESSAGE": "There was an error connecting to Instagram, please try again",
-        "ERROR_AUTH": "There was an error connecting to Instagram, please try again"
+        "ERROR_AUTH": "There was an error connecting to Instagram, please try again",
+        "NEW_INBOX_SUGGESTION": "This Instagram account was previously linked to a different inbox and has now been migrated here. All new messages will appear here. The old inbox will no longer be able to send or receive messages for this account.",
+        "DUPLICATE_INBOX_BANNER": "This Instagram account was migrated to the new Instagram channel inbox. You won’t be able to send/receive Instagram messages from this inbox anymore."
       },
       "TWITTER": {
         "HELP": "To add your Twitter profile as a channel, you need to authenticate your Twitter Profile by clicking on 'Sign in with Twitter' ",

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

@@ -326,6 +326,7 @@
     "HEADER_KNOW_MORE": "Know more",
     "COPILOT": {
       "SEND_MESSAGE": "Send message...",
+      "EMPTY_MESSAGE": "There was an error generating the response. Please try again.",
       "LOADER": "Captain is thinking",
       "YOU": "You",
       "USE": "Use this",

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

@@ -1,102 +1,191 @@
 <script setup>
-import { ref, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
+import { ref, computed, onMounted } from 'vue';
 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 confirmDialog = ref(null);
+const selectedBot = ref({});
+const loading = ref({});
+const modalType = ref(MODAL_TYPES.CREATE);
+const agentBotModalRef = ref(null);
+const agentBotDeleteDialogRef = ref(null);
 
-const onConfigureNewBot = () => {
-  router.push({
-    name: 'agent_bots_csml_new',
-  });
+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();
 };
 
 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="onConfigureNewBot"
+            @click="openAddModal"
           />
         </template>
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <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>
+      <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>
     </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,9 +1,6 @@
 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 {
@@ -26,36 +23,5 @@ 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

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

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

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

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

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

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

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

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

@@ -1,11 +1,13 @@
 <script>
 import EmptyState from '../../../../components/widgets/EmptyState.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
-
+import DuplicateInboxBanner from './channels/instagram/DuplicateInboxBanner.vue';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
 export default {
   components: {
     EmptyState,
     NextButton,
+    DuplicateInboxBanner,
   },
   computed: {
     currentInbox() {
@@ -16,6 +18,20 @@ export default {
     isATwilioInbox() {
       return this.currentInbox.channel_type === 'Channel::TwilioSms';
     },
+    // Check if a facebook inbox exists with the same instagram_id
+    hasDuplicateInstagramInbox() {
+      const instagramId = this.currentInbox.instagram_id;
+      const facebookInbox =
+        this.$store.getters['inboxes/getFacebookInboxByInstagramId'](
+          instagramId
+        );
+
+      return (
+        this.currentInbox.channel_type === INBOX_TYPES.INSTAGRAM &&
+        facebookInbox
+      );
+    },
+
     isAEmailInbox() {
       return this.currentInbox.channel_type === 'Channel::Email';
     },
@@ -72,8 +88,12 @@ export default {
 
 <template>
   <div
-    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
+    class="w-full h-full col-span-6 p-6 overflow-auto border border-b-0 rounded-t-lg border-n-weak bg-n-solid-1"
   >
+    <DuplicateInboxBanner
+      v-if="hasDuplicateInstagramInbox"
+      :content="$t('INBOX_MGMT.ADD.INSTAGRAM.NEW_INBOX_SUGGESTION')"
+    />
     <EmptyState
       :title="$t('INBOX_MGMT.FINISH.TITLE')"
       :message="message"

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

@@ -8,6 +8,7 @@ import SettingsSection from '../../../../components/SettingsSection.vue';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import FacebookReauthorize from './facebook/Reauthorize.vue';
 import InstagramReauthorize from './channels/instagram/Reauthorize.vue';
+import DuplicateInboxBanner from './channels/instagram/DuplicateInboxBanner.vue';
 import MicrosoftReauthorize from './channels/microsoft/Reauthorize.vue';
 import GoogleReauthorize from './channels/google/Reauthorize.vue';
 import PreChatFormSettings from './PreChatForm/Settings.vue';
@@ -20,6 +21,7 @@ import BotConfiguration from './components/BotConfiguration.vue';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
 import SenderNameExamplePreview from './components/SenderNameExamplePreview.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
 
 export default {
   components: {
@@ -38,6 +40,7 @@ export default {
     GoogleReauthorize,
     NextButton,
     InstagramReauthorize,
+    DuplicateInboxBanner,
   },
   mixins: [inboxMixin],
   setup() {
@@ -138,11 +141,7 @@ export default {
       }
 
       if (
-        this.isFeatureEnabledonAccount(
-          this.accountId,
-          FEATURE_FLAGS.AGENT_BOTS
-        ) &&
-        !(this.isAnEmailChannel || this.isATwitterInbox)
+        this.isFeatureEnabledonAccount(this.accountId, FEATURE_FLAGS.AGENT_BOTS)
       ) {
         visibleToAllChannelTabs = [
           ...visibleToAllChannelTabs,
@@ -207,6 +206,16 @@ export default {
     instagramUnauthorized() {
       return this.isAInstagramChannel && this.inbox.reauthorization_required;
     },
+    // Check if a instagram inbox exists with the same instagram_id
+    hasDuplicateInstagramInbox() {
+      const instagramId = this.inbox.instagram_id;
+      const instagramInbox =
+        this.$store.getters['inboxes/getInstagramInboxByInstagramId'](
+          instagramId
+        );
+
+      return this.inbox.channel_type === INBOX_TYPES.FB && instagramInbox;
+    },
     microsoftUnauthorized() {
       return this.isAMicrosoftInbox && this.inbox.reauthorization_required;
     },
@@ -393,6 +402,11 @@ export default {
       <FacebookReauthorize v-if="facebookUnauthorized" :inbox="inbox" />
       <GoogleReauthorize v-if="googleUnauthorized" :inbox="inbox" />
       <InstagramReauthorize v-if="instagramUnauthorized" :inbox="inbox" />
+      <DuplicateInboxBanner
+        v-if="hasDuplicateInstagramInbox"
+        :content="$t('INBOX_MGMT.ADD.INSTAGRAM.DUPLICATE_INBOX_BANNER')"
+        class="mx-8 mt-5"
+      />
       <div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
         <SettingsSection
           :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"

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

@@ -0,0 +1,16 @@
+<script setup>
+import Banner from 'dashboard/components-next/banner/Banner.vue';
+
+defineProps({
+  content: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <Banner color="ruby">
+    {{ content }}
+  </Banner>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue

@@ -98,6 +98,7 @@ export default {
     <BotMetrics :filters="requestPayload" />
     <ReportContainer
       account-summary-key="getBotSummary"
+      summary-fetching-key="getBotSummaryFetchingStatus"
       :group-by="groupBy"
       :report-keys="reportKeys"
     />

app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue

@@ -19,6 +19,10 @@ export default {
       type: String,
       default: 'getAccountSummary',
     },
+    summaryFetchingKey: {
+      type: String,
+      default: 'getAccountSummaryFetchingStatus',
+    },
     reportKeys: {
       type: Object,
       default: () => ({
@@ -148,7 +152,11 @@ export default {
       :key="metric.KEY"
       class="p-4 mb-3 rounded-md"
     >
-      <ChartStats :metric="metric" :account-summary-key="accountSummaryKey" />
+      <ChartStats
+        :metric="metric"
+        :account-summary-key="accountSummaryKey"
+        :summary-fetching-key="summaryFetchingKey"
+      />
       <div class="mt-4 h-72">
         <woot-loading-state
           v-if="accountReport.isFetching[metric.KEY]"

app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue

@@ -1,5 +1,8 @@
 <script setup>
 import { useReportMetrics } from 'dashboard/composables/useReportMetrics';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import { STATUS } from 'dashboard/store/constants';
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
   metric: {
@@ -10,11 +13,16 @@ const props = defineProps({
     type: String,
     default: 'getAccountSummary',
   },
+  summaryFetchingKey: {
+    type: String,
+    default: 'getAccountSummaryFetchingStatus',
+  },
 });
 
-const { calculateTrend, displayMetric, isAverageMetricType } = useReportMetrics(
-  props.accountSummaryKey
-);
+const { t } = useI18n();
+
+const { calculateTrend, displayMetric, isAverageMetricType, fetchingStatus } =
+  useReportMetrics(props.accountSummaryKey, props.summaryFetchingKey);
 
 const trendColor = (value, key) => {
   if (isAverageMetricType(key)) {
@@ -34,10 +42,25 @@ const trendColor = (value, key) => {
       {{ metric.NAME }}
     </span>
     <div class="flex items-end text-n-slate-12">
-      <div class="text-xl font-medium">
+      <div v-if="fetchingStatus === STATUS.FETCHING">
+        <Spinner />
+      </div>
+      <div
+        v-else-if="fetchingStatus === STATUS.FAILED"
+        class="text-n-ruby-10 text-sm"
+      >
+        {{ t('REPORT.SUMMARY_FETCHING_FAILED') }}
+      </div>
+      <div
+        v-else-if="fetchingStatus === STATUS.FINISHED"
+        class="text-xl font-medium"
+      >
         {{ displayMetric(metric.KEY) }}
       </div>
-      <div v-if="metric.trend" class="text-xs ml-4 flex items-center mb-0.5">
+      <div
+        v-if="metric.trend && fetchingStatus === STATUS.FINISHED"
+        class="text-xs ml-4 flex items-center mb-0.5"
+      >
         <div
           v-if="metric.trend < 0"
           class="h-0 w-0 border-x-4 medium border-x-transparent border-t-[8px] mr-1"

app/javascript/dashboard/store/constants.js

@@ -0,0 +1,5 @@
+export const STATUS = {
+  FAILED: 'failed',
+  FETCHING: 'fetching',
+  FINISHED: 'finished',
+};

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

@@ -12,6 +12,7 @@ export const state = {
     isCreating: false,
     isDeleting: false,
     isUpdating: false,
+    isUpdatingAvatar: false,
     isFetchingAgentBot: false,
     isSettingAgentBot: false,
     isDisconnecting: false,
@@ -48,10 +49,23 @@ export const actions = {
       commit(types.SET_AGENT_BOT_UI_FLAG, { isFetching: false });
     }
   },
-  create: async ({ commit }, agentBotObj) => {
+
+  create: async ({ commit }, botData) => {
     commit(types.SET_AGENT_BOT_UI_FLAG, { isCreating: true });
     try {
-      const response = await AgentBotsAPI.create(agentBotObj);
+      // 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);
       commit(types.ADD_AGENT_BOT, response.data);
       return response.data;
     } catch (error) {
@@ -61,10 +75,22 @@ export const actions = {
     }
     return null;
   },
-  update: async ({ commit }, { id, ...agentBotObj }) => {
+
+  update: async ({ commit }, { id, data }) => {
     commit(types.SET_AGENT_BOT_UI_FLAG, { isUpdating: true });
     try {
-      const response = await AgentBotsAPI.update(id, agentBotObj);
+      // 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);
       commit(types.EDIT_AGENT_BOT, response.data);
     } catch (error) {
       throwErrorMessage(error);
@@ -72,6 +98,7 @@ 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 {
@@ -83,6 +110,20 @@ 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 {
@@ -150,6 +191,12 @@ 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/conversations/getters.js

@@ -1,7 +1,11 @@
 import { MESSAGE_TYPE } from 'shared/constants/messages';
-import { applyPageFilters, sortComparator } from './helpers';
+import { applyPageFilters, applyRoleFilter, sortComparator } from './helpers';
 import filterQueryGenerator from 'dashboard/helper/filterQueryGenerator';
 import { matchesFilters } from './helpers/filterHelpers';
+import {
+  getUserPermissions,
+  getUserRole,
+} from '../../../helper/permissionsHelper';
 import camelcaseKeys from 'camelcase-keys';
 
 export const getSelectedChatConversation = ({
@@ -77,10 +81,24 @@ const getters = {
       return isUnAssigned && shouldFilter;
     });
   },
-  getAllStatusChats: _state => activeFilters => {
+  getAllStatusChats: (_state, _, __, rootGetters) => activeFilters => {
+    const currentUser = rootGetters.getCurrentUser;
+    const currentUserId = rootGetters.getCurrentUser.id;
+    const currentAccountId = rootGetters.getCurrentAccountId;
+
+    const permissions = getUserPermissions(currentUser, currentAccountId);
+    const userRole = getUserRole(currentUser, currentAccountId);
+
     return _state.allConversations.filter(conversation => {
       const shouldFilter = applyPageFilters(conversation, activeFilters);
-      return shouldFilter;
+      const allowedForRole = applyRoleFilter(
+        conversation,
+        userRole,
+        permissions,
+        currentUserId
+      );
+
+      return shouldFilter && allowedForRole;
     });
   },
   getChatListLoadingStatus: ({ listLoadingStatus }) => listLoadingStatus,

app/javascript/dashboard/store/modules/conversations/helpers.js

@@ -62,6 +62,51 @@ export const applyPageFilters = (conversation, filters) => {
   return shouldFilter;
 };
 
+/**
+ * Filters conversations based on user role and permissions
+ *
+ * @param {Object} conversation - The conversation object to check permissions for
+ * @param {string} role - The user's role (administrator, agent, etc.)
+ * @param {Array<string>} permissions - List of permission strings the user has
+ * @param {number|string} currentUserId - The ID of the current user
+ * @returns {boolean} - Whether the user has permissions to access this conversation
+ */
+export const applyRoleFilter = (
+  conversation,
+  role,
+  permissions,
+  currentUserId
+) => {
+  // the role === "agent" check is typically not correct on it's own
+  // the backend handles this by checking the custom_role_id at the user model
+  // here however, the `getUserRole` returns "custom_role" if the id is present,
+  // so we can check the role === "agent" directly
+  if (['administrator', 'agent'].includes(role)) {
+    return true;
+  }
+
+  // Check for full conversation management permission
+  if (permissions.includes('conversation_manage')) {
+    return true;
+  }
+
+  const conversationAssignee = conversation.meta.assignee;
+  const isUnassigned = !conversationAssignee;
+  const isAssignedToUser = conversationAssignee?.id === currentUserId;
+
+  // Check unassigned management permission
+  if (permissions.includes('conversation_unassigned_manage')) {
+    return isUnassigned || isAssignedToUser;
+  }
+
+  // Check participating conversation management permission
+  if (permissions.includes('conversation_participating_manage')) {
+    return isAssignedToUser;
+  }
+
+  return false;
+};
+
 const SORT_OPTIONS = {
   last_activity_at_asc: ['sortOnLastActivityAt', 'asc'],
   last_activity_at_desc: ['sortOnLastActivityAt', 'desc'],

app/javascript/dashboard/store/modules/conversations/specs/helpers.spec.js

@@ -0,0 +1,276 @@
+import { describe, it, expect } from 'vitest';
+import { applyRoleFilter } from '../helpers';
+
+describe('Conversation Helpers', () => {
+  describe('#applyRoleFilter', () => {
+    // Test data for conversations
+    const conversationWithAssignee = {
+      meta: {
+        assignee: {
+          id: 1,
+        },
+      },
+    };
+
+    const conversationWithDifferentAssignee = {
+      meta: {
+        assignee: {
+          id: 2,
+        },
+      },
+    };
+
+    const conversationWithoutAssignee = {
+      meta: {
+        assignee: null,
+      },
+    };
+
+    // Test for administrator role
+    it('always returns true for administrator role regardless of permissions', () => {
+      const role = 'administrator';
+      const permissions = [];
+      const currentUserId = 1;
+
+      expect(
+        applyRoleFilter(
+          conversationWithAssignee,
+          role,
+          permissions,
+          currentUserId
+        )
+      ).toBe(true);
+      expect(
+        applyRoleFilter(
+          conversationWithDifferentAssignee,
+          role,
+          permissions,
+          currentUserId
+        )
+      ).toBe(true);
+      expect(
+        applyRoleFilter(
+          conversationWithoutAssignee,
+          role,
+          permissions,
+          currentUserId
+        )
+      ).toBe(true);
+    });
+
+    // Test for agent role
+    it('always returns true for agent role regardless of permissions', () => {
+      const role = 'agent';
+      const permissions = [];
+      const currentUserId = 1;
+
+      expect(
+        applyRoleFilter(
+          conversationWithAssignee,
+          role,
+          permissions,
+          currentUserId
+        )
+      ).toBe(true);
+      expect(
+        applyRoleFilter(
+          conversationWithDifferentAssignee,
+          role,
+          permissions,
+          currentUserId
+        )
+      ).toBe(true);
+      expect(
+        applyRoleFilter(
+          conversationWithoutAssignee,
+          role,
+          permissions,
+          currentUserId
+        )
+      ).toBe(true);
+    });
+
+    // Test for custom role with 'conversation_manage' permission
+    it('returns true for any user with conversation_manage permission', () => {
+      const role = 'custom_role';
+      const permissions = ['conversation_manage'];
+      const currentUserId = 1;
+
+      expect(
+        applyRoleFilter(
+          conversationWithAssignee,
+          role,
+          permissions,
+          currentUserId
+        )
+      ).toBe(true);
+      expect(
+        applyRoleFilter(
+          conversationWithDifferentAssignee,
+          role,
+          permissions,
+          currentUserId
+        )
+      ).toBe(true);
+      expect(
+        applyRoleFilter(
+          conversationWithoutAssignee,
+          role,
+          permissions,
+          currentUserId
+        )
+      ).toBe(true);
+    });
+
+    // Test for custom role with 'conversation_unassigned_manage' permission
+    describe('with conversation_unassigned_manage permission', () => {
+      const role = 'custom_role';
+      const permissions = ['conversation_unassigned_manage'];
+      const currentUserId = 1;
+
+      it('returns true for conversations assigned to the user', () => {
+        expect(
+          applyRoleFilter(
+            conversationWithAssignee,
+            role,
+            permissions,
+            currentUserId
+          )
+        ).toBe(true);
+      });
+
+      it('returns true for unassigned conversations', () => {
+        expect(
+          applyRoleFilter(
+            conversationWithoutAssignee,
+            role,
+            permissions,
+            currentUserId
+          )
+        ).toBe(true);
+      });
+
+      it('returns false for conversations assigned to other users', () => {
+        expect(
+          applyRoleFilter(
+            conversationWithDifferentAssignee,
+            role,
+            permissions,
+            currentUserId
+          )
+        ).toBe(false);
+      });
+    });
+
+    // Test for custom role with 'conversation_participating_manage' permission
+    describe('with conversation_participating_manage permission', () => {
+      const role = 'custom_role';
+      const permissions = ['conversation_participating_manage'];
+      const currentUserId = 1;
+
+      it('returns true for conversations assigned to the user', () => {
+        expect(
+          applyRoleFilter(
+            conversationWithAssignee,
+            role,
+            permissions,
+            currentUserId
+          )
+        ).toBe(true);
+      });
+
+      it('returns false for unassigned conversations', () => {
+        expect(
+          applyRoleFilter(
+            conversationWithoutAssignee,
+            role,
+            permissions,
+            currentUserId
+          )
+        ).toBe(false);
+      });
+
+      it('returns false for conversations assigned to other users', () => {
+        expect(
+          applyRoleFilter(
+            conversationWithDifferentAssignee,
+            role,
+            permissions,
+            currentUserId
+          )
+        ).toBe(false);
+      });
+    });
+
+    // Test for user with no relevant permissions
+    it('returns false for custom role without any relevant permissions', () => {
+      const role = 'custom_role';
+      const permissions = ['some_other_permission'];
+      const currentUserId = 1;
+
+      expect(
+        applyRoleFilter(
+          conversationWithAssignee,
+          role,
+          permissions,
+          currentUserId
+        )
+      ).toBe(false);
+      expect(
+        applyRoleFilter(
+          conversationWithDifferentAssignee,
+          role,
+          permissions,
+          currentUserId
+        )
+      ).toBe(false);
+      expect(
+        applyRoleFilter(
+          conversationWithoutAssignee,
+          role,
+          permissions,
+          currentUserId
+        )
+      ).toBe(false);
+    });
+
+    // Test edge cases for meta.assignee
+    describe('handles edge cases with meta.assignee', () => {
+      const role = 'custom_role';
+      const permissions = ['conversation_unassigned_manage'];
+      const currentUserId = 1;
+
+      it('treats undefined assignee as unassigned', () => {
+        const conversationWithUndefinedAssignee = {
+          meta: {
+            assignee: undefined,
+          },
+        };
+
+        expect(
+          applyRoleFilter(
+            conversationWithUndefinedAssignee,
+            role,
+            permissions,
+            currentUserId
+          )
+        ).toBe(true);
+      });
+
+      it('handles empty meta object', () => {
+        const conversationWithEmptyMeta = {
+          meta: {},
+        };
+
+        expect(
+          applyRoleFilter(
+            conversationWithEmptyMeta,
+            role,
+            permissions,
+            currentUserId
+          )
+        ).toBe(true);
+      });
+    });
+  });
+});

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

@@ -122,6 +122,20 @@ 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 =>
+        item.instagram_id === instagramId &&
+        item.channel_type === INBOX_TYPES.INSTAGRAM
+    );
+  },
 };
 
 const sendAnalyticsEvent = channelType => {

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

@@ -1,5 +1,6 @@
 /* eslint no-console: 0 */
 import * as types from '../mutation-types';
+import { STATUS } from '../constants';
 import Report from '../../api/reports';
 import { downloadCsvFile, generateFileName } from '../../helper/downloadHelper';
 import AnalyticsHelper from '../../helper/AnalyticsHelper';
@@ -9,6 +10,8 @@ import liveReports from '../../api/liveReports';
 
 const state = {
   fetchingStatus: false,
+  accountSummaryFetchingStatus: STATUS.FINISHED,
+  botSummaryFetchingStatus: STATUS.FINISHED,
   accountReport: {
     isFetching: {
       conversations_count: false,
@@ -74,6 +77,12 @@ const getters = {
   getBotSummary(_state) {
     return _state.botSummary;
   },
+  getAccountSummaryFetchingStatus(_state) {
+    return _state.accountSummaryFetchingStatus;
+  },
+  getBotSummaryFetchingStatus(_state) {
+    return _state.botSummaryFetchingStatus;
+  },
   getAccountConversationMetric(_state) {
     return _state.overview.accountConversationMetric;
   },
@@ -122,6 +131,7 @@ export const actions = {
     });
   },
   fetchAccountSummary({ commit }, reportObj) {
+    commit(types.default.SET_ACCOUNT_SUMMARY_STATUS, STATUS.FETCHING);
     Report.getSummary(
       reportObj.from,
       reportObj.to,
@@ -132,12 +142,14 @@ export const actions = {
     )
       .then(accountSummary => {
         commit(types.default.SET_ACCOUNT_SUMMARY, accountSummary.data);
+        commit(types.default.SET_ACCOUNT_SUMMARY_STATUS, STATUS.FINISHED);
       })
       .catch(() => {
-        commit(types.default.TOGGLE_ACCOUNT_REPORT_LOADING, false);
+        commit(types.default.SET_ACCOUNT_SUMMARY_STATUS, STATUS.FAILED);
       });
   },
   fetchBotSummary({ commit }, reportObj) {
+    commit(types.default.SET_BOT_SUMMARY_STATUS, STATUS.FETCHING);
     Report.getBotSummary({
       from: reportObj.from,
       to: reportObj.to,
@@ -146,9 +158,10 @@ export const actions = {
     })
       .then(botSummary => {
         commit(types.default.SET_BOT_SUMMARY, botSummary.data);
+        commit(types.default.SET_BOT_SUMMARY_STATUS, STATUS.FINISHED);
       })
       .catch(() => {
-        commit(types.default.TOGGLE_ACCOUNT_REPORT_LOADING, false);
+        commit(types.default.SET_BOT_SUMMARY_STATUS, STATUS.FAILED);
       });
   },
   fetchAccountConversationMetric({ commit }, params = {}) {
@@ -277,6 +290,12 @@ const mutations = {
   [types.default.TOGGLE_ACCOUNT_REPORT_LOADING](_state, { metric, value }) {
     _state.accountReport.isFetching[metric] = value;
   },
+  [types.default.SET_BOT_SUMMARY_STATUS](_state, status) {
+    _state.botSummaryFetchingStatus = status;
+  },
+  [types.default.SET_ACCOUNT_SUMMARY_STATUS](_state, status) {
+    _state.accountSummaryFetchingStatus = status;
+  },
   [types.default.TOGGLE_HEATMAP_LOADING](_state, flag) {
     _state.overview.uiFlags.isFetchingAccountConversationsHeatmap = flag;
   },

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 } from './fixtures';
+import { agentBotRecords, agentBotData } from './fixtures';
 
 const commit = vi.fn();
 global.axios = axios;
@@ -30,16 +30,22 @@ describe('#actions', () => {
   describe('#create', () => {
     it('sends correct actions if API is success', async () => {
       axios.post.mockResolvedValue({ data: agentBotRecords[0] });
-      await actions.create({ commit }, agentBotRecords[0]);
+      await actions.create({ commit }, agentBotData);
+
       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 }],
@@ -50,17 +56,29 @@ describe('#actions', () => {
   describe('#update', () => {
     it('sends correct actions if API is success', async () => {
       axios.patch.mockResolvedValue({ data: agentBotRecords[0] });
-      await actions.update({ commit }, agentBotRecords[0]);
+      await actions.update(
+        { commit },
+        {
+          id: agentBotRecords[0].id,
+          data: agentBotData,
+        }
+      );
+
       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 }, agentBotRecords[0])
+        actions.update({ commit }, { id: 1, data: {} })
       ).rejects.toThrow(Error);
       expect(commit.mock.calls).toEqual([
         [types.SET_AGENT_BOT_UI_FLAG, { isUpdating: true }],
@@ -68,7 +86,6 @@ 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,15 +1,35 @@
 export const agentBotRecords = [
   {
+    account_id: 1,
     id: 11,
     name: 'Agent Bot 11',
     description: 'Agent Bot Description',
-    type: 'csml',
+    bot_type: 'webhook',
+    thumbnail: 'https://example.com/thumbnail.jpg',
+    bot_config: {},
+    outgoing_url: 'https://example.com/outgoing',
+    access_token: 'hN8QwG769RqBXmme',
+    system_bot: false,
   },
 
   {
+    account_id: 1,
     id: 12,
     name: 'Agent Bot 12',
     description: 'Agent Bot Description 12',
-    type: 'csml',
+    bot_type: 'webhook',
+    thumbnail: 'https://example.com/thumbnail.jpg',
+    bot_config: {},
+    outgoing_url: 'https://example.com/outgoing',
+    access_token: 'hN8QwG769RqBXmme',
+    system_bot: false,
   },
 ];
+
+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,4 +51,16 @@ 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/fixtures.js

@@ -9,6 +9,7 @@ export default [
     widget_color: null,
     website_token: null,
     enable_auto_assignment: true,
+    instagram_id: 123456789,
   },
   {
     id: 2,
@@ -62,4 +63,12 @@ export default [
     channel_type: 'Channel::Sms',
     provider: 'default',
   },
+  {
+    id: 7,
+    channel_id: 7,
+    name: 'Test Instagram 1',
+    channel_type: 'Channel::Instagram',
+    instagram_id: 123456789,
+    provider: 'default',
+  },
 ];

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

@@ -26,7 +26,7 @@ describe('#getters', () => {
 
   it('dialogFlowEnabledInboxes', () => {
     const state = { records: inboxList };
-    expect(getters.dialogFlowEnabledInboxes(state).length).toEqual(6);
+    expect(getters.dialogFlowEnabledInboxes(state).length).toEqual(7);
   });
 
   it('getInbox', () => {
@@ -43,6 +43,7 @@ describe('#getters', () => {
       widget_color: null,
       website_token: null,
       enable_auto_assignment: true,
+      instagram_id: 123456789,
     });
   });
 
@@ -64,4 +65,32 @@ describe('#getters', () => {
       isDeleting: false,
     });
   });
+
+  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({
+      id: 7,
+      channel_id: 7,
+      name: 'Test Instagram 1',
+      channel_type: 'Channel::Instagram',
+      instagram_id: 123456789,
+      provider: 'default',
+    });
+  });
 });

app/javascript/dashboard/store/modules/specs/reports/actions.spec.js

@@ -1,14 +1,122 @@
 import axios from 'axios';
 import { actions } from '../../reports';
+import * as types from '../../../mutation-types';
+import { STATUS } from '../../../constants';
 import * as DownloadHelper from 'dashboard/helper/downloadHelper';
+import { flushPromises } from '@vue/test-utils';
 
 global.open = vi.fn();
 global.axios = axios;
+global.URL.createObjectURL = vi.fn();
 
 vi.mock('axios');
 vi.spyOn(DownloadHelper, 'downloadCsvFile');
 
 describe('#actions', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('#fetchAccountSummary', () => {
+    it('sends correct actions if API is success', async () => {
+      const commit = vi.fn();
+      const reportObj = {
+        from: 1630504922510,
+        to: 1630504922510,
+        type: 'account',
+        id: 1,
+        groupBy: 'day',
+        businessHours: true,
+      };
+      const summaryData = {
+        conversations_count: 10,
+        incoming_messages_count: 20,
+        outgoing_messages_count: 15,
+        avg_first_response_time: 30,
+        avg_resolution_time: 60,
+        resolutions_count: 5,
+        bot_resolutions_count: 2,
+        bot_handoffs_count: 1,
+        reply_time: 25,
+      };
+      axios.get.mockResolvedValue({ data: summaryData });
+
+      actions.fetchAccountSummary({ commit }, reportObj);
+      await flushPromises();
+
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_ACCOUNT_SUMMARY_STATUS, STATUS.FETCHING],
+        [types.default.SET_ACCOUNT_SUMMARY, summaryData],
+        [types.default.SET_ACCOUNT_SUMMARY_STATUS, STATUS.FINISHED],
+      ]);
+    });
+
+    it('sends correct actions if API fails', async () => {
+      const commit = vi.fn();
+      const reportObj = {
+        from: 1630504922510,
+        to: 1630504922510,
+      };
+      axios.get.mockRejectedValue(new Error('API Error'));
+
+      actions.fetchAccountSummary({ commit }, reportObj);
+      await flushPromises();
+
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_ACCOUNT_SUMMARY_STATUS, STATUS.FETCHING],
+        [types.default.SET_ACCOUNT_SUMMARY_STATUS, STATUS.FAILED],
+      ]);
+    });
+  });
+
+  describe('#fetchBotSummary', () => {
+    it('sends correct actions if API is success', async () => {
+      const commit = vi.fn();
+      const reportObj = {
+        from: 1630504922510,
+        to: 1630504922510,
+        groupBy: 'day',
+        businessHours: true,
+      };
+      const summaryData = {
+        bot_resolutions_count: 10,
+        bot_handoffs_count: 5,
+        previous: {
+          bot_resolutions_count: 8,
+          bot_handoffs_count: 4,
+        },
+      };
+      axios.get.mockResolvedValue({ data: summaryData });
+
+      actions.fetchBotSummary({ commit }, reportObj);
+      await flushPromises();
+
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_BOT_SUMMARY_STATUS, STATUS.FETCHING],
+        [types.default.SET_BOT_SUMMARY, summaryData],
+        [types.default.SET_BOT_SUMMARY_STATUS, STATUS.FINISHED],
+      ]);
+    });
+
+    it('sends correct actions if API fails', async () => {
+      const commit = vi.fn();
+      const reportObj = {
+        from: 1630504922510,
+        to: 1630504922510,
+      };
+      const error = new Error('API error');
+      axios.get.mockRejectedValueOnce(error);
+
+      actions.fetchBotSummary({ commit }, reportObj);
+      await flushPromises();
+
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_BOT_SUMMARY_STATUS, STATUS.FETCHING],
+        [types.default.SET_BOT_SUMMARY_STATUS, STATUS.FAILED],
+      ]);
+    });
+  });
+
   describe('#downloadAgentReports', () => {
     it('open CSV download prompt if API is success', async () => {
       const data = `Agent name,Conversations count,Avg first response time (Minutes),Avg resolution time (Minutes)
@@ -20,7 +128,9 @@ describe('#actions', () => {
         to: 1630504922510,
         fileName: 'agent-report-01-09-2021.csv',
       };
-      await actions.downloadAgentReports(1, param);
+      actions.downloadAgentReports(1, param);
+      await flushPromises();
+
       expect(DownloadHelper.downloadCsvFile).toBeCalledWith(
         param.fileName,
         data
@@ -39,7 +149,9 @@ describe('#actions', () => {
         type: 'label',
         fileName: 'label-report-01-09-2021.csv',
       };
-      await actions.downloadLabelReports(1, param);
+      actions.downloadLabelReports(1, param);
+      await flushPromises();
+
       expect(DownloadHelper.downloadCsvFile).toBeCalledWith(
         param.fileName,
         data
@@ -59,7 +171,9 @@ describe('#actions', () => {
         to: 1635013800,
         fileName: 'inbox-report-24-10-2021.csv',
       };
-      await actions.downloadInboxReports(1, param);
+      actions.downloadInboxReports(1, param);
+      await flushPromises();
+
       expect(DownloadHelper.downloadCsvFile).toBeCalledWith(
         param.fileName,
         data
@@ -78,7 +192,9 @@ describe('#actions', () => {
         to: 1635013800,
         fileName: 'inbox-report-24-10-2021.csv',
       };
-      await actions.downloadInboxReports(1, param);
+      actions.downloadInboxReports(1, param);
+      await flushPromises();
+
       expect(DownloadHelper.downloadCsvFile).toBeCalledWith(
         param.fileName,
         data

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

@@ -189,6 +189,8 @@ export default {
   SET_ACCOUNT_SUMMARY: 'SET_ACCOUNT_SUMMARY',
   SET_BOT_SUMMARY: 'SET_BOT_SUMMARY',
   TOGGLE_ACCOUNT_REPORT_LOADING: 'TOGGLE_ACCOUNT_REPORT_LOADING',
+  SET_BOT_SUMMARY_STATUS: 'SET_BOT_SUMMARY_STATUS',
+  SET_ACCOUNT_SUMMARY_STATUS: 'SET_ACCOUNT_SUMMARY_STATUS',
   SET_ACCOUNT_CONVERSATION_METRIC: 'SET_ACCOUNT_CONVERSATION_METRIC',
   TOGGLE_ACCOUNT_CONVERSATION_METRIC_LOADING:
     'TOGGLE_ACCOUNT_CONVERSATION_METRIC_LOADING',
@@ -299,6 +301,7 @@ 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/shared/store/globalConfig.js

@@ -5,7 +5,6 @@ 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,
@@ -29,7 +28,6 @@ const state = {
   azureAppId,
   brandName,
   chatwootInboxToken,
-  csmlEditorHost,
   deploymentEnv,
   createNewAccountFromDashboard,
   directUploadsEnabled: directUploadsEnabled === 'true',

app/jobs/agent_bots/csml_job.rb

@@ -1,10 +0,0 @@
-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/webhooks/instagram_events_job.rb

@@ -24,6 +24,11 @@ class Webhooks::InstagramEventsJob < MutexApplicationJob
   private
 
   def process_single_entry(entry)
+    if test_event?(entry)
+      process_test_event(entry)
+      return
+    end
+
     process_messages(entry)
   end
 
@@ -46,6 +51,20 @@ class Webhooks::InstagramEventsJob < MutexApplicationJob
     messaging[:message].present? && messaging[:message][:is_echo].present?
   end
 
+  def test_event?(entry)
+    entry[:changes].present?
+  end
+
+  def process_test_event(entry)
+    messaging = extract_messaging_from_test_event(entry)
+
+    Instagram::TestEventService.new(messaging).perform if messaging.present?
+  end
+
+  def extract_messaging_from_test_event(entry)
+    entry[:changes].first&.dig(:value) if entry[:changes].present?
+  end
+
   def instagram_id(messaging)
     if agent_message_via_echo?(messaging)
       messaging[:sender][:id]

app/listeners/agent_bot_listener.rb

@@ -59,14 +59,10 @@ class AgentBotListener < BaseListener
     true
   end
 
-  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
+  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)
   end
 
   def process_webhook_bot_event(agent_bot, payload)
@@ -74,8 +70,4 @@ 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/mailers/conversation_reply_mailer.rb

@@ -1,4 +1,8 @@
 class ConversationReplyMailer < ApplicationMailer
+  # We needs to expose large attachments to the view as links
+  # Small attachments are linked as mail attachments directly
+  attr_reader :large_attachments
+
   include ConversationReplyMailerHelper
   default from: ENV.fetch('MAILER_SENDER_EMAIL', 'Chatwoot <accounts@chatwoot.com>')
   layout :choose_layout

app/mailers/conversation_reply_mailer_helper.rb

@@ -17,11 +17,44 @@ module ConversationReplyMailerHelper
     google_smtp_settings
     set_delivery_method
 
-    Rails.logger.info("Email sent from #{email_from} to #{to_emails} with subject #{mail_subject}")
-
+    # Email type detection logic:
+    # - email_reply: Sets @message with a single message
+    # - Other actions: Set @messages with a collection of messages
+    #
+    # So this check implicitly determines we're handling an email_reply
+    # and not one of the other email types (summary, transcript, etc.)
+    process_attachments_as_files_for_email_reply if @message&.attachments.present?
     mail(@options)
   end
 
+  def process_attachments_as_files_for_email_reply
+    # Attachment processing for direct email replies (when replying to a single message)
+    #
+    # How attachments are handled:
+    # 1. Total file size (<20MB): Added directly to the email as proper attachments
+    # 2. Total file size (>20MB): Added to @large_attachments to be displayed as links in the email
+
+    @options[:attachments] = []
+    @large_attachments = []
+    current_total_size = 0
+
+    @message.attachments.each do |attachment|
+      raw_data = attachment.file.download
+      attachment_name = attachment.file.filename.to_s
+      file_size = raw_data.bytesize
+
+      # Attach files directly until we hit 20MB total
+      # After reaching 20MB, send remaining files as links
+      if current_total_size + file_size <= 20.megabytes
+        mail.attachments[attachment_name] = raw_data
+        @options[:attachments] << { name: attachment_name }
+        current_total_size += file_size
+      else
+        @large_attachments << attachment
+      end
+    end
+  end
+
   private
 
   def google_smtp_settings
@@ -52,6 +85,8 @@ module ConversationReplyMailerHelper
       tls: false,
       enable_starttls_auto: true,
       openssl_verify_mode: 'none',
+      open_timeout: 15,
+      read_timeout: 15,
       authentication: 'xoauth2'
     }
   end

app/models/agent_bot.rb

@@ -25,9 +25,8 @@ 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, csml: 1 }
+  enum bot_type: { webhook: 0 }
 
-  validate :validate_agent_bot_config
   validates :outgoing_url, length: { maximum: Limits::URL_LENGTH_LIMIT }
 
   def available_name
@@ -51,9 +50,7 @@ class AgentBot < ApplicationRecord
     }
   end
 
-  private
-
-  def validate_agent_bot_config
-    errors.add(:bot_config, 'Invalid Bot Configuration') unless AgentBots::ValidateBotService.new(agent_bot: self).perform
+  def system_bot?
+    account.nil?
   end
 end

app/models/channel/api.rb

@@ -33,10 +33,6 @@ class Channel::Api < ApplicationRecord
     'API'
   end
 
-  def messaging_window_enabled?
-    additional_attributes.present? && additional_attributes['agent_reply_time_window'].present?
-  end
-
   private
 
   def ensure_valid_agent_reply_time_window

app/models/channel/facebook_page.rb

@@ -32,10 +32,6 @@ class Channel::FacebookPage < ApplicationRecord
     'Facebook'
   end
 
-  def messaging_window_enabled?
-    false
-  end
-
   def create_contact_inbox(instagram_id, name)
     @contact_inbox = ::ContactInboxWithContactBuilder.new({
                                                             source_id: instagram_id,

app/models/channel/twilio_sms.rb

@@ -41,10 +41,6 @@ class Channel::TwilioSms < ApplicationRecord
     medium == 'sms' ? 'Twilio SMS' : 'Whatsapp'
   end
 
-  def messaging_window_enabled?
-    medium == 'whatsapp'
-  end
-
   def send_message(to:, body:, media_url: nil)
     params = send_message_from.merge(to: to, body: body)
     params[:media_url] = media_url if media_url.present?

app/models/channel/whatsapp.rb

@@ -46,10 +46,6 @@ class Channel::Whatsapp < ApplicationRecord
     end
   end
 
-  def messaging_window_enabled?
-    true
-  end
-
   def mark_message_templates_updated
     # rubocop:disable Rails/SkipsModelValidations
     update_column(:message_templates_last_updated, Time.zone.now)

app/models/concerns/channelable.rb

@@ -7,10 +7,6 @@ module Channelable
     after_update :create_audit_log_entry
   end
 
-  def messaging_window_enabled?
-    false
-  end
-
   def create_audit_log_entry; end
 end
 

app/models/conversation.rb

@@ -115,14 +115,7 @@ class Conversation < ApplicationRecord
   delegate :auto_resolve_duration, to: :account
 
   def can_reply?
-    channel = inbox&.channel
-
-    return can_reply_on_instagram? if additional_attributes['type'] == 'instagram_direct_message'
-
-    return true unless channel&.messaging_window_enabled?
-
-    messaging_window = inbox.api? ? channel.additional_attributes['agent_reply_time_window'].to_i : 24
-    last_message_in_messaging_window?(messaging_window)
+    Conversations::MessageWindowService.new(self).can_reply?
   end
 
   def language
@@ -137,24 +130,6 @@ class Conversation < ApplicationRecord
     messages&.incoming&.last
   end
 
-  def last_message_in_messaging_window?(time)
-    return false if last_incoming_message.nil?
-
-    Time.current < last_incoming_message.created_at + time.hours
-  end
-
-  def can_reply_on_instagram?
-    global_config = GlobalConfig.get('ENABLE_MESSENGER_CHANNEL_HUMAN_AGENT')
-
-    return false if last_incoming_message.nil?
-
-    if global_config['ENABLE_MESSENGER_CHANNEL_HUMAN_AGENT']
-      Time.current < last_incoming_message.created_at + 7.days
-    else
-      last_message_in_messaging_window?(24)
-    end
-  end
-
   def toggle_status
     # FIXME: implement state machine with aasm
     self.status = open? ? :resolved : :open

app/services/agent_bots/validate_bot_service.rb

@@ -1,38 +0,0 @@
-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/message_window_service.rb

@@ -0,0 +1,64 @@
+class Conversations::MessageWindowService
+  MESSAGING_WINDOW_24_HOURS = 24.hours
+  MESSAGING_WINDOW_7_DAYS = 7.days
+
+  def initialize(conversation)
+    @conversation = conversation
+  end
+
+  def can_reply?
+    return true if messaging_window.blank?
+
+    last_message_in_messaging_window?(messaging_window)
+  end
+
+  private
+
+  def messaging_window
+    case @conversation.inbox.channel_type
+    when 'Channel::Api'
+      api_messaging_window
+    when 'Channel::FacebookPage'
+      messenger_messaging_window
+    when 'Channel::Instagram'
+      instagram_messaging_window
+    when 'Channel::Whatsapp'
+      MESSAGING_WINDOW_24_HOURS
+    when 'Channel::TwilioSms'
+      twilio_messaging_window
+    end
+  end
+
+  def last_message_in_messaging_window?(time)
+    return false if last_incoming_message.nil?
+
+    Time.current < last_incoming_message.created_at + time
+  end
+
+  def api_messaging_window
+    return if @conversation.inbox.channel.additional_attributes['agent_reply_time_window'].blank?
+
+    @conversation.inbox.channel.additional_attributes['agent_reply_time_window'].to_i.hours
+  end
+
+  # Check medium of the inbox to determine the messaging window
+  def twilio_messaging_window
+    @conversation.inbox.channel.medium == 'whatsapp' ? MESSAGING_WINDOW_24_HOURS : nil
+  end
+
+  def messenger_messaging_window
+    meta_messaging_window('ENABLE_MESSENGER_CHANNEL_HUMAN_AGENT')
+  end
+
+  def instagram_messaging_window
+    meta_messaging_window('ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT')
+  end
+
+  def meta_messaging_window(config_key)
+    GlobalConfigService.load(config_key, nil) ? MESSAGING_WINDOW_7_DAYS : MESSAGING_WINDOW_24_HOURS
+  end
+
+  def last_incoming_message
+    @last_incoming_message ||= @conversation.messages&.incoming&.last
+  end
+end

app/services/instagram/test_event_service.rb

@@ -0,0 +1,79 @@
+class Instagram::TestEventService
+  def initialize(messaging)
+    @messaging = messaging
+  end
+
+  def perform
+    Rails.logger.info("Processing Instagram test webhook event, #{@messaging}")
+
+    return false unless test_webhook_event?
+
+    create_test_text
+  end
+
+  private
+
+  def test_webhook_event?
+    @messaging[:sender][:id] == '12334' && @messaging[:recipient][:id] == '23245'
+  end
+
+  def create_test_text
+    # As of now, we are using the last created instagram channel as the test channel,
+    # since we don't have any other channel for testing purpose at the time of meta approval
+    channel = Channel::Instagram.last
+
+    @inbox = ::Inbox.find_by(channel: channel)
+    return unless @inbox
+
+    @contact = create_test_contact
+
+    @conversation ||= create_test_conversation(conversation_params)
+
+    @message = @conversation.messages.create!(test_message_params)
+  end
+
+  def create_test_contact
+    @contact_inbox = @inbox.contact_inboxes.where(source_id: @messaging[:sender][:id]).first
+    unless @contact_inbox
+      @contact_inbox ||= @inbox.channel.create_contact_inbox(
+        'sender_username', 'sender_username'
+      )
+    end
+
+    @contact_inbox.contact
+  end
+
+  def create_test_conversation(conversation_params)
+    Conversation.find_by(conversation_params) || build_conversation(conversation_params)
+  end
+
+  def test_message_params
+    {
+      account_id: @conversation.account_id,
+      inbox_id: @conversation.inbox_id,
+      message_type: 'incoming',
+      source_id: @messaging[:message][:mid],
+      content: @messaging[:message][:text],
+      sender: @contact
+    }
+  end
+
+  def build_conversation(conversation_params)
+    Conversation.create!(
+      conversation_params.merge(
+        contact_inbox_id: @contact_inbox.id
+      )
+    )
+  end
+
+  def conversation_params
+    {
+      account_id: @inbox.account_id,
+      inbox_id: @inbox.id,
+      contact_id: @contact.id,
+      additional_attributes: {
+        type: 'instagram_direct_message'
+      }
+    }
+  end
+end

app/views/api/v1/models/_agent_bot.json.jbuilder

@@ -1,8 +1,10 @@
 json.id resource.id
 json.name resource.name
 json.description resource.description
-json.outgoing_url resource.outgoing_url
+json.thumbnail resource.avatar_url
+json.outgoing_url resource.outgoing_url unless resource.system_bot?
 json.bot_type resource.bot_type
 json.bot_config resource.bot_config
 json.account_id resource.account_id
 json.access_token resource.access_token if resource.access_token.present?
+json.system_bot resource.system_bot?

app/views/api/v1/models/_inbox.json.jbuilder

@@ -56,6 +56,7 @@ end
 
 ## Instagram Attributes
 json.reauthorization_required resource.channel.try(:reauthorization_required?) if resource.instagram?
+json.instagram_id resource.channel.try(:instagram_id) if resource.instagram?
 
 ## Twilio Attributes
 json.messaging_service_sid resource.channel.try(:messaging_service_sid)

app/views/layouts/portal.html.erb

@@ -39,6 +39,10 @@ By default, it renders:
     <% else %>
       <title><%= @portal.page_title%></title>
     <% end %>
+    
+    <% if @portal.logo.present? %>
+      <link rel="icon" href="<%= url_for(@portal.logo) %>">
+    <% end %>
 
     <% unless @theme_from_params.blank? %>
     <%# this adds the theme from params, ensuring that there a localstorage value set %>

app/views/layouts/vueapp.html.erb

@@ -35,6 +35,7 @@
         hostURL: '<%= ENV.fetch('FRONTEND_URL', '') %>',
         helpCenterURL: '<%= ENV.fetch('HELPCENTER_URL', '') %>',
         fbAppId: '<%= @global_config['FB_APP_ID'] %>',
+        instagramAppId: '<%= @global_config['INSTAGRAM_APP_ID'] %>',
         googleOAuthClientId: '<%= ENV.fetch('GOOGLE_OAUTH_CLIENT_ID', nil) %>',
         googleOAuthCallbackUrl: '<%= ENV.fetch('GOOGLE_OAUTH_CALLBACK_URL', nil) %>',
         fbApiVersion: '<%= @global_config['FACEBOOK_API_VERSION'] %>',

app/views/mailers/conversation_reply_mailer/conversation_transcript.html.erb

@@ -32,9 +32,10 @@
       <% if message.content %>
         <%= ChatwootMarkdownRenderer.new(message.content).render_message %>
       <% end %>
-      <% if message.attachments %>
+      <% if message.attachments.present? %>
+        <p>Attachments:</p>
         <% message.attachments.each do |attachment| %>
-          Attachment [<a href="<%= attachment.file_url %>" _target="blank">Click here to view</a>]
+          <p><a href="<%= attachment.file_url %>" target="_blank"><%= attachment.file.filename.to_s %></a></p>
         <% end %>
       <% end %>
       <p style="font-size: 90%; font-size: 90%;color: #899096;margin-top: -8px; margin-bottom: 0px;">

app/views/mailers/conversation_reply_mailer/email_reply.html.erb

@@ -1,8 +1,9 @@
 <% if @message.content %>
   <%= ChatwootMarkdownRenderer.new(@message.content).render_message %>
 <% end %>
-<% if @message.attachments %>
-  <% @message.attachments.each do |attachment| %>
-    attachment [<a href="<%= attachment.file_url %>" _target="blank">click here to view</a>]
+<% if @large_attachments.present? %>
+  <p>Attachments:</p>
+  <% @large_attachments.each do |attachment| %>
+    <p><a href="<%= attachment.file_url %>" target="_blank"><%= attachment.file.filename.to_s %></a></p>
   <% end %>
 <% end %>

app/views/mailers/conversation_reply_mailer/reply_with_summary.html.erb

@@ -20,9 +20,10 @@
           <% if message.content.present? %>
             <hr style="border: 0; border-bottom: 1px solid #AEC3D5;"/>
           <% end %>
-          This message contains <%= message.attachments.count > 1 ? 'attachments' : 'an attachment' %>.
-          <% message.attachments.each do |attachment| %>
-            <br />- View the attachment <a href="<%= attachment.file_url %>" _target="blank">here</a>.
+          Attachments:
+          <% message.attachments.each_with_index do |attachment, index| %>
+            <% if index > 0 %><br /><% end %>
+            <a href="<%= attachment.file_url %>" target="_blank"><%= attachment.file.filename.to_s %></a>
           <% end %>
         </p>
       <% end %>

app/views/mailers/conversation_reply_mailer/reply_without_summary.html.erb

@@ -3,9 +3,10 @@
     <% if message.content %>
       <%= ChatwootMarkdownRenderer.new(message.content).render_message %>
     <% end %>
-    <% if message.attachments %>
+    <% if message.attachments.present? %>
+      <p>Attachments:</p>
       <% message.attachments.each do |attachment| %>
-        attachment [<a href="<%= attachment.file_url %>" _target="blank">click here to view</a>]
+        <p><a href="<%= attachment.file_url %>" target="_blank"><%= attachment.file.filename.to_s %></a></p>
       <% end %>
     <% end %>
   </p>

config/app.yml

@@ -1,5 +1,5 @@
 shared: &shared
-  version: '4.0.4'
+  version: '4.1.0'
 
 development:
   <<: *shared

config/features.yml

@@ -37,7 +37,7 @@
   help_url: https://chwt.app/hc/help-center
 - name: agent_bots
   display_name: Agent Bots
-  enabled: false
+  enabled: true
   help_url: https://chwt.app/hc/agent-bots
 - name: macros
   display_name: Macros
@@ -149,7 +149,8 @@
   enabled: false
 - name: report_v4
   display_name: Report V4
-  enabled: false
+  enabled: true
+  deprecated: true
 - name: contact_chatwoot_support_team
   display_name: Contact Chatwoot Support Team
   enabled: true
@@ -161,7 +162,7 @@
 - name: search_with_gin
   display_name: Search messages with GIN
   enabled: false
+  chatwoot_internal: true
 - name: channel_instagram
   display_name: Instagram Channel
-  enabled: false
-  chatwoot_internal: true
+  enabled: true

db/migrate/20250410061725_convert_csml_bots_to_webhook_bots.rb

@@ -0,0 +1,13 @@
+class ConvertCsmlBotsToWebhookBots < ActiveRecord::Migration[7.0]
+  def up
+    # Find all CSML bots (bot_type = 1) and convert them to webhook (bot_type = 0)
+    AgentBot.where(bot_type: 1).find_each do |bot|
+      bot.update(bot_type: 0, bot_config: {})
+    end
+  end
+
+  def down
+    # This migration is not reversible - we've removed CSML support
+    raise ActiveRecord::IrreversibleMigration
+  end
+end

db/migrate/20250416182131_flip_chatwoot_v4_default_feature_flag_installation_config.rb

@@ -0,0 +1,24 @@
+class FlipChatwootV4DefaultFeatureFlagInstallationConfig < ActiveRecord::Migration[7.0]
+  def up
+    # Update the default feature flag config to enable chatwoot_v4
+    config = InstallationConfig.find_by(name: 'ACCOUNT_LEVEL_FEATURE_DEFAULTS')
+    if config && config.value.present?
+      features = config.value.map do |f|
+        if f['name'] == 'chatwoot_v4'
+          f.merge('enabled' => true)
+        else
+          f
+        end
+      end
+      config.value = features
+      config.save!
+    end
+
+    # Enable chatwoot_v4 for all accounts in batches of 100
+    Account.find_in_batches(batch_size: 100) do |accounts|
+      accounts.each { |account| account.enable_features!('chatwoot_v4') }
+    end
+
+    GlobalConfig.clear_cache
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.0].define(version: 2025_04_02_233933) do
+ActiveRecord::Schema[7.0].define(version: 2025_04_16_182131) do
   # These extensions should be enabled to support this database
   enable_extension "pg_stat_statements"
   enable_extension "pg_trgm"