Merge branch 'develop' into fix/missing-postmessage-validation

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

@@ -0,0 +1,18 @@
+/* global axios */
+import ApiClient from '../ApiClient';
+
+class CaptainPreferences extends ApiClient {
+  constructor() {
+    super('captain/preferences', { accountScoped: true });
+  }
+
+  get() {
+    return axios.get(this.url);
+  }
+
+  updatePreferences(data) {
+    return axios.put(this.url, data);
+  }
+}
+
+export default new CaptainPreferences();

app/javascript/dashboard/api/reports.js

@@ -61,6 +61,12 @@ class ReportsAPI extends ApiClient {
     });
   }
 
+  getConversationsSummaryReports({ from: since, to: until, businessHours }) {
+    return axios.get(`${this.url}/conversations_summary`, {
+      params: { since, until, business_hours: businessHours },
+    });
+  }
+
   getConversationTrafficCSV({ daysBefore = 6 } = {}) {
     return axios.get(`${this.url}/conversation_traffic`, {
       params: { timezone_offset: getTimeOffset(), days_before: daysBefore },

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

@@ -5,6 +5,7 @@ import WootEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 
 const props = defineProps({
   modelValue: { type: String, default: '' },
+  editorKey: { type: String, default: '' },
   label: { type: String, default: '' },
   placeholder: { type: String, default: '' },
   focusOnMount: { type: Boolean, default: false },
@@ -96,6 +97,7 @@ watch(
       ]"
     >
       <WootEditor
+        :editor-id="editorKey"
         :model-value="modelValue"
         :placeholder="placeholder"
         :focus-on-mount="focusOnMount"
@@ -152,6 +154,13 @@ watch(
           }
         }
       }
+
+      .ProseMirror-menubar {
+        width: fit-content !important;
+        position: relative !important;
+        top: unset !important;
+        @apply ltr:left-[-0.188rem] rtl:right-[-0.188rem] !important;
+      }
     }
   }
 }

app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue

@@ -44,6 +44,12 @@ const emit = defineEmits([
 
 const { t } = useI18n();
 
+const attachmentId = ref(0);
+const generateUid = () => {
+  attachmentId.value += 1;
+  return `attachment-${attachmentId.value}`;
+};
+
 const uploadAttachment = ref(null);
 const isEmojiPickerOpen = ref(false);
 
@@ -176,7 +182,8 @@ const onPaste = e => {
     .filter(file => file.size > 0)
     .forEach(file => {
       const { name, type, size } = file;
-      onFileUpload({ file, name, type, size });
+      // Add unique ID for clipboard-pasted files
+      onFileUpload({ file, name, type, size, id: generateUid() });
     });
 };
 

app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue

@@ -7,6 +7,7 @@ import {
   appendSignature,
   removeSignature,
   getEffectiveChannelType,
+  stripUnsupportedMarkdown,
 } from 'dashboard/helper/editorHelper';
 import {
   buildContactableInboxesList,
@@ -47,6 +48,8 @@ const emit = defineEmits([
   'createConversation',
 ]);
 
+const DEFAULT_FORMATTING = 'Context::Default';
+
 const showContactsDropdown = ref(false);
 const showInboxesDropdown = ref(false);
 const showCcEmailsDropdown = ref(false);
@@ -198,10 +201,22 @@ const setSelectedContact = async ({ value, action, ...rest }) => {
   showInboxesDropdown.value = true;
 };
 
-const handleInboxAction = ({ value, action, ...rest }) => {
+const stripMessageFormatting = channelType => {
+  if (!state.message || !channelType) return;
+
+  state.message = stripUnsupportedMarkdown(state.message, channelType, false);
+};
+
+const handleInboxAction = ({ value, action, channelType, medium, ...rest }) => {
   v$.value.$reset();
-  state.message = '';
-  emit('updateTargetInbox', { ...rest });
+
+  // Strip unsupported formatting when changing the target inbox
+  if (channelType) {
+    const newChannelType = getEffectiveChannelType(channelType, medium);
+    stripMessageFormatting(newChannelType);
+  }
+
+  emit('updateTargetInbox', { ...rest, channelType, medium });
   showInboxesDropdown.value = false;
   state.attachedFiles = [];
 };
@@ -221,7 +236,9 @@ const removeSignatureFromMessage = () => {
 const removeTargetInbox = value => {
   v$.value.$reset();
   removeSignatureFromMessage();
-  state.message = '';
+
+  stripMessageFormatting(DEFAULT_FORMATTING);
+
   emit('updateTargetInbox', value);
   state.attachedFiles = [];
 };
@@ -324,67 +341,68 @@ const shouldShowMessageEditor = computed(() => {
 
 <template>
   <div
-    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0"
+    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0 max-h-[calc(100vh-8rem)]"
   >
-    <ContactSelector
-      :contacts="contacts"
-      :selected-contact="selectedContact"
-      :show-contacts-dropdown="showContactsDropdown"
-      :is-loading="isLoading"
-      :is-creating-contact="isCreatingContact"
-      :contact-id="contactId"
-      :contactable-inboxes-list="contactableInboxesList"
-      :show-inboxes-dropdown="showInboxesDropdown"
-      :has-errors="validationStates.isContactInvalid"
-      @search-contacts="handleContactSearch"
-      @set-selected-contact="setSelectedContact"
-      @clear-selected-contact="clearSelectedContact"
-      @update-dropdown="handleDropdownUpdate"
-    />
-    <InboxEmptyState v-if="showNoInboxAlert" />
-    <InboxSelector
-      v-else
-      :target-inbox="targetInbox"
-      :selected-contact="selectedContact"
-      :show-inboxes-dropdown="showInboxesDropdown"
-      :contactable-inboxes-list="contactableInboxesList"
-      :has-errors="validationStates.isInboxInvalid"
-      @update-inbox="removeTargetInbox"
-      @toggle-dropdown="showInboxesDropdown = $event"
-      @handle-inbox-action="handleInboxAction"
-    />
+    <div class="flex-1 overflow-y-auto divide-y divide-n-strong">
+      <ContactSelector
+        :contacts="contacts"
+        :selected-contact="selectedContact"
+        :show-contacts-dropdown="showContactsDropdown"
+        :is-loading="isLoading"
+        :is-creating-contact="isCreatingContact"
+        :contact-id="contactId"
+        :contactable-inboxes-list="contactableInboxesList"
+        :show-inboxes-dropdown="showInboxesDropdown"
+        :has-errors="validationStates.isContactInvalid"
+        @search-contacts="handleContactSearch"
+        @set-selected-contact="setSelectedContact"
+        @clear-selected-contact="clearSelectedContact"
+        @update-dropdown="handleDropdownUpdate"
+      />
+      <InboxEmptyState v-if="showNoInboxAlert" />
+      <InboxSelector
+        v-else
+        :target-inbox="targetInbox"
+        :selected-contact="selectedContact"
+        :show-inboxes-dropdown="showInboxesDropdown"
+        :contactable-inboxes-list="contactableInboxesList"
+        :has-errors="validationStates.isInboxInvalid"
+        @update-inbox="removeTargetInbox"
+        @toggle-dropdown="showInboxesDropdown = $event"
+        @handle-inbox-action="handleInboxAction"
+      />
 
-    <EmailOptions
-      v-if="inboxTypes.isEmail"
-      v-model:cc-emails="state.ccEmails"
-      v-model:bcc-emails="state.bccEmails"
-      v-model:subject="state.subject"
-      :contacts="contacts"
-      :show-cc-emails-dropdown="showCcEmailsDropdown"
-      :show-bcc-emails-dropdown="showBccEmailsDropdown"
-      :is-loading="isLoading"
-      :has-errors="validationStates.isSubjectInvalid"
-      @search-cc-emails="searchCcEmails"
-      @search-bcc-emails="searchBccEmails"
-      @update-dropdown="handleDropdownUpdate"
-    />
+      <EmailOptions
+        v-if="inboxTypes.isEmail"
+        v-model:cc-emails="state.ccEmails"
+        v-model:bcc-emails="state.bccEmails"
+        v-model:subject="state.subject"
+        :contacts="contacts"
+        :show-cc-emails-dropdown="showCcEmailsDropdown"
+        :show-bcc-emails-dropdown="showBccEmailsDropdown"
+        :is-loading="isLoading"
+        :has-errors="validationStates.isSubjectInvalid"
+        @search-cc-emails="searchCcEmails"
+        @search-bcc-emails="searchBccEmails"
+        @update-dropdown="handleDropdownUpdate"
+      />
 
-    <MessageEditor
-      v-if="shouldShowMessageEditor"
-      v-model="state.message"
-      :message-signature="messageSignature"
-      :send-with-signature="sendWithSignature"
-      :has-errors="validationStates.isMessageInvalid"
-      :has-attachments="state.attachedFiles.length > 0"
-      :channel-type="inboxChannelType"
-      :medium="targetInbox?.medium || ''"
-    />
+      <MessageEditor
+        v-if="shouldShowMessageEditor"
+        v-model="state.message"
+        :message-signature="messageSignature"
+        :send-with-signature="sendWithSignature"
+        :has-errors="validationStates.isMessageInvalid"
+        :channel-type="inboxChannelType"
+        :medium="targetInbox?.medium || ''"
+      />
 
-    <AttachmentPreviews
-      v-if="state.attachedFiles.length > 0"
-      :attachments="state.attachedFiles"
-      @update:attachments="state.attachedFiles = $event"
-    />
+      <AttachmentPreviews
+        v-if="state.attachedFiles.length > 0"
+        :attachments="state.attachedFiles"
+        @update:attachments="state.attachedFiles = $event"
+      />
+    </div>
 
     <ActionButtons
       :attached-files="state.attachedFiles"

app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue

@@ -83,7 +83,7 @@ const targetInboxLabel = computed(() => {
       <DropdownMenu
         v-if="contactableInboxesList?.length > 0 && showInboxesDropdown"
         :menu-items="contactableInboxesList"
-        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-60 w-fit max-w-sm dark:!outline-n-slate-5"
+        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-56 w-fit max-w-sm dark:!outline-n-slate-5"
         @action="emit('handleInboxAction', $event)"
       />
     </div>

app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue

@@ -6,7 +6,6 @@ import Editor from 'dashboard/components-next/Editor/Editor.vue';
 
 const props = defineProps({
   hasErrors: { type: Boolean, default: false },
-  hasAttachments: { type: Boolean, default: false },
   sendWithSignature: { type: Boolean, default: false },
   messageSignature: { type: String, default: '' },
   channelType: { type: String, default: '' },
@@ -24,14 +23,14 @@ const modelValue = defineModel({
 </script>
 
 <template>
-  <div class="flex-1 h-full" :class="[!hasAttachments && 'min-h-[200px]']">
+  <div class="flex-1 h-full">
     <Editor
-      :key="editorKey"
       v-model="modelValue"
+      :editor-key="editorKey"
       :placeholder="
         t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
       "
-      class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 [&>div]:!bg-transparent h-full [&_.ProseMirror-woot-style]:!max-h-[200px]"
+      class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 [&>div]:!bg-transparent h-full [&_.ProseMirror-woot-style]:!max-h-[12.5rem] [&_.ProseMirror-woot-style]:!min-h-[10rem] [&_.ProseMirror-menubar]:!pt-0 [&_.mention--box]:-top-[7.5rem] [&_.mention--box]:bottom-[unset]"
       :class="
         hasErrors
           ? '[&_.empty-node]:before:!text-n-ruby-9 [&_.empty-node]:dark:before:!text-n-ruby-9'

app/javascript/dashboard/components-next/filter/helper/filterHelper.js

@@ -11,7 +11,6 @@ export const CONVERSATION_ATTRIBUTES = {
   CAMPAIGN_ID: 'campaign_id',
   LABELS: 'labels',
   BROWSER_LANGUAGE: 'browser_language',
-  COUNTRY_CODE: 'country_code',
   REFERER: 'referer',
   CREATED_AT: 'created_at',
   LAST_ACTIVITY_AT: 'last_activity_at',

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

@@ -7,7 +7,6 @@ import {
   buildAttributesFilterTypes,
   CONVERSATION_ATTRIBUTES,
 } from './helper/filterHelper';
-import countries from 'shared/constants/countries.js';
 import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages.js';
 
 /**
@@ -218,17 +217,6 @@ export function useConversationFilterContext() {
       filterOperators: equalityOperators.value,
       attributeModel: 'additional',
     },
-    {
-      attributeKey: CONVERSATION_ATTRIBUTES.COUNTRY_CODE,
-      value: CONVERSATION_ATTRIBUTES.COUNTRY_CODE,
-      attributeName: t('FILTER.ATTRIBUTES.COUNTRY_NAME'),
-      label: t('FILTER.ATTRIBUTES.COUNTRY_NAME'),
-      inputType: 'searchSelect',
-      options: countries,
-      dataType: 'text',
-      filterOperators: equalityOperators.value,
-      attributeModel: 'additional',
-    },
     {
       attributeKey: CONVERSATION_ATTRIBUTES.REFERER,
       value: CONVERSATION_ATTRIBUTES.REFERER,

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

@@ -485,6 +485,12 @@ const menuItems = computed(() => {
           icon: 'i-lucide-briefcase',
           to: accountScopedRoute('general_settings_index'),
         },
+        // {
+        //   name: 'Settings Captain',
+        //   label: t('SIDEBAR.CAPTAIN_AI'),
+        //   icon: 'i-woot-captain',
+        //   to: accountScopedRoute('captain_settings_index'),
+        // },
         {
           name: 'Settings Agents',
           label: t('SIDEBAR.AGENTS'),

app/javascript/dashboard/components-next/taginput/TagInput.vue

@@ -230,7 +230,7 @@ const handleBlur = e => emit('blur', e);
         v-if="showDropdownMenu"
         :menu-items="filteredMenuItems"
         :is-searching="isLoading"
-        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-60 w-[inherit] max-w-md dark:!outline-n-slate-5"
+        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-56 w-[inherit] max-w-md dark:!outline-n-slate-5"
         @action="handleDropdownAction"
       />
     </div>

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

@@ -45,6 +45,7 @@ import {
   removeSignature,
   getEffectiveChannelType,
 } from 'dashboard/helper/editorHelper';
+import { isFileTypeAllowedForChannel } from 'shared/helpers/FileHelper';
 
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
@@ -637,6 +638,25 @@ export default {
       // Filter valid files (non-zero size)
       Array.from(e.clipboardData.files)
         .filter(file => file.size > 0)
+        .filter(file => {
+          const isAllowed = isFileTypeAllowedForChannel(file, {
+            channelType: this.channelType || this.inbox?.channel_type,
+            medium: this.inbox?.medium,
+            conversationType: this.conversationType,
+            isInstagramChannel: this.isAnInstagramChannel,
+            isOnPrivateNote: this.isOnPrivateNote,
+          });
+
+          if (!isAllowed) {
+            useAlert(
+              this.$t('CONVERSATION.FILE_TYPE_NOT_SUPPORTED', {
+                fileName: file.name,
+              })
+            );
+          }
+
+          return isAllowed;
+        })
         .forEach(file => {
           const { name, type, size } = file;
           this.onFileUpload({ name, type, size, file });

app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js

@@ -78,14 +78,6 @@ const filterTypes = [
     filterOperators: OPERATOR_TYPES_1,
     attributeModel: 'additional',
   },
-  {
-    attributeKey: 'country_code',
-    attributeI18nKey: 'COUNTRY_NAME',
-    inputType: 'search_select',
-    dataType: 'text',
-    filterOperators: OPERATOR_TYPES_1,
-    attributeModel: 'additional',
-  },
   {
     attributeKey: 'referer',
     attributeI18nKey: 'REFERER_LINK',
@@ -171,10 +163,6 @@ export const filterAttributeGroups = [
         key: 'browser_language',
         i18nKey: 'BROWSER_LANGUAGE',
       },
-      {
-        key: 'country_code',
-        i18nKey: 'COUNTRY_NAME',
-      },
       {
         key: 'referer',
         i18nKey: 'REFERER_LINK',

app/javascript/dashboard/helper/editorHelper.js

@@ -38,9 +38,14 @@ export function extractTextFromMarkdown(markdown) {
  *
  * @param {string} markdown - markdown text to process
  * @param {string} channelType - The channel type to check supported formatting
+ * @param {boolean} cleanWhitespace - Whether to clean up extra whitespace and blank lines (default: true for signatures)
  * @returns {string} - The markdown with unsupported formatting removed
  */
-export function stripUnsupportedSignatureMarkdown(markdown, channelType) {
+export function stripUnsupportedMarkdown(
+  markdown,
+  channelType,
+  cleanWhitespace = true
+) {
   if (!markdown) return '';
 
   const { marks = [], nodes = [] } = FORMATTING[channelType] || {};
@@ -55,6 +60,9 @@ export function stripUnsupportedSignatureMarkdown(markdown, channelType) {
     );
   }, markdown);
 
+  if (!cleanWhitespace) return result;
+
+  // Clean whitespace for signatures
   return result
     .split('\n')
     .map(line => line.trim())
@@ -155,7 +163,7 @@ export function getEffectiveChannelType(channelType, medium) {
 export function appendSignature(body, signature, channelType) {
   // Strip only unsupported formatting based on channel capabilities
   const preparedSignature = channelType
-    ? stripUnsupportedSignatureMarkdown(signature, channelType)
+    ? stripUnsupportedMarkdown(signature, channelType)
     : signature;
   const cleanedSignature = cleanSignature(preparedSignature);
   // if signature is already present, return body
@@ -178,7 +186,7 @@ export function appendSignature(body, signature, channelType) {
 export function removeSignature(body, signature, channelType) {
   // Build unique list of signature variants to try
   const channelStripped = channelType
-    ? cleanSignature(stripUnsupportedSignatureMarkdown(signature, channelType))
+    ? cleanSignature(stripUnsupportedMarkdown(signature, channelType))
     : null;
   const signaturesToTry = [
     cleanSignature(signature),

app/javascript/dashboard/helper/emailQuoteExtractor.js

@@ -1,3 +1,5 @@
+import DOMPurify from 'dompurify';
+
 // Quote detection strategies
 const QUOTE_INDICATORS = [
   '.gmail_quote_container',
@@ -29,7 +31,7 @@ export class EmailQuoteExtractor {
   static extractQuotes(htmlContent) {
     // Create a temporary DOM element to parse HTML
     const tempDiv = document.createElement('div');
-    tempDiv.innerHTML = htmlContent;
+    tempDiv.innerHTML = DOMPurify.sanitize(htmlContent);
 
     // Remove elements matching class selectors
     QUOTE_INDICATORS.forEach(selector => {
@@ -56,7 +58,7 @@ export class EmailQuoteExtractor {
    */
   static hasQuotes(htmlContent) {
     const tempDiv = document.createElement('div');
-    tempDiv.innerHTML = htmlContent;
+    tempDiv.innerHTML = DOMPurify.sanitize(htmlContent);
 
     // Check for class-based quotes
     // eslint-disable-next-line no-restricted-syntax

app/javascript/dashboard/helper/featureHelper.js

@@ -20,6 +20,7 @@ const FEATURE_HELP_URLS = {
   webhook: 'https://chwt.app/hc/webhooks',
   billing: 'https://chwt.app/pricing',
   saml: 'https://chwt.app/hc/saml',
+  captain_billing: 'https://chwt.app/hc/captain_billing',
 };
 
 export function getHelpUrlForFeature(featureName) {

app/javascript/dashboard/helper/quotedEmailHelper.js

@@ -1,4 +1,5 @@
 import { format, parseISO, isValid as isValidDate } from 'date-fns';
+import DOMPurify from 'dompurify';
 
 /**
  * Extracts plain text from HTML content
@@ -13,7 +14,7 @@ export const extractPlainTextFromHtml = html => {
     return html.replace(/<[^>]*>/g, ' ');
   }
   const tempDiv = document.createElement('div');
-  tempDiv.innerHTML = html;
+  tempDiv.innerHTML = DOMPurify.sanitize(html);
   return tempDiv.textContent || tempDiv.innerText || '';
 };
 

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

@@ -5,7 +5,7 @@ import {
   replaceSignature,
   cleanSignature,
   extractTextFromMarkdown,
-  stripUnsupportedSignatureMarkdown,
+  stripUnsupportedMarkdown,
   insertAtCursor,
   findNodeToInsertImage,
   setURLWithQueryAndSize,
@@ -145,25 +145,19 @@ describe('appendSignature', () => {
   });
 });
 
-describe('stripUnsupportedSignatureMarkdown', () => {
+describe('stripUnsupportedMarkdown', () => {
   const richSignature =
     '**Bold** _italic_ [link](http://example.com) ![](http://localhost:3000/image.png)';
 
   it('keeps all formatting for Email channel (supports image, link, strong, em)', () => {
-    const result = stripUnsupportedSignatureMarkdown(
-      richSignature,
-      'Channel::Email'
-    );
+    const result = stripUnsupportedMarkdown(richSignature, 'Channel::Email');
     expect(result).toContain('**Bold**');
     expect(result).toContain('_italic_');
     expect(result).toContain('[link](http://example.com)');
     expect(result).toContain('![](http://localhost:3000/image.png)');
   });
   it('strips images but keeps bold/italic for Api channel', () => {
-    const result = stripUnsupportedSignatureMarkdown(
-      richSignature,
-      'Channel::Api'
-    );
+    const result = stripUnsupportedMarkdown(richSignature, 'Channel::Api');
     expect(result).toContain('**Bold**');
     expect(result).toContain('_italic_');
     expect(result).toContain('link'); // link text kept
@@ -171,20 +165,14 @@ describe('stripUnsupportedSignatureMarkdown', () => {
     expect(result).not.toContain('![]('); // image removed
   });
   it('strips images but keeps bold/italic/link for Telegram channel', () => {
-    const result = stripUnsupportedSignatureMarkdown(
-      richSignature,
-      'Channel::Telegram'
-    );
+    const result = stripUnsupportedMarkdown(richSignature, 'Channel::Telegram');
     expect(result).toContain('**Bold**');
     expect(result).toContain('_italic_');
     expect(result).toContain('[link](http://example.com)');
     expect(result).not.toContain('![](');
   });
   it('strips all formatting for SMS channel', () => {
-    const result = stripUnsupportedSignatureMarkdown(
-      richSignature,
-      'Channel::Sms'
-    );
+    const result = stripUnsupportedMarkdown(richSignature, 'Channel::Sms');
     expect(result).toContain('Bold');
     expect(result).toContain('italic');
     expect(result).toContain('link');
@@ -194,8 +182,52 @@ describe('stripUnsupportedSignatureMarkdown', () => {
     expect(result).not.toContain('![](');
   });
   it('returns empty string for empty input', () => {
-    expect(stripUnsupportedSignatureMarkdown('', 'Channel::Api')).toBe('');
-    expect(stripUnsupportedSignatureMarkdown(null, 'Channel::Api')).toBe('');
+    expect(stripUnsupportedMarkdown('', 'Channel::Api')).toBe('');
+    expect(stripUnsupportedMarkdown(null, 'Channel::Api')).toBe('');
+  });
+
+  describe('with cleanWhitespace parameter', () => {
+    const textWithWhitespace =
+      '**Bold** text\n\nWith multiple\n\nLine breaks\n\n  And spaces  ';
+
+    it('cleans whitespace when cleanWhitespace=true (default)', () => {
+      const result = stripUnsupportedMarkdown(
+        textWithWhitespace,
+        'Channel::Api',
+        true
+      );
+      expect(result).toBe(
+        '**Bold** text\nWith multiple\nLine breaks\nAnd spaces'
+      );
+      expect(result).not.toContain('\n\n');
+      expect(result).not.toContain('  ');
+    });
+
+    it('preserves whitespace when cleanWhitespace=false', () => {
+      const result = stripUnsupportedMarkdown(
+        textWithWhitespace,
+        'Channel::Api',
+        false
+      );
+      expect(result).toContain('\n\n');
+      expect(result).toContain('  And spaces  ');
+      expect(result).toBe(
+        '**Bold** text\n\nWith multiple\n\nLine breaks\n\n  And spaces  '
+      );
+    });
+
+    it('strips formatting but preserves whitespace for messages', () => {
+      const messageWithFormatting = '**Bold**\n\n`code`\n\nNormal text';
+      const result = stripUnsupportedMarkdown(
+        messageWithFormatting,
+        'Channel::Sms',
+        false
+      );
+      expect(result).toBe('Bold\n\ncode\n\nNormal text');
+      expect(result).toContain('\n\n');
+      expect(result).not.toContain('**');
+      expect(result).not.toContain('`');
+    });
   });
 });
 

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

@@ -96,4 +96,58 @@ describe('EmailQuoteExtractor', () => {
   it('detects quotes for trailing blockquotes even when signatures follow text', () => {
     expect(EmailQuoteExtractor.hasQuotes(EMAIL_WITH_SIGNATURE)).toBe(true);
   });
+
+  describe('HTML sanitization', () => {
+    it('removes onerror handlers from img tags in extractQuotes', () => {
+      const maliciousHtml = '<p>Hello</p><img src="x" onerror="alert(1)">';
+      const cleanedHtml = EmailQuoteExtractor.extractQuotes(maliciousHtml);
+
+      expect(cleanedHtml).not.toContain('onerror');
+      expect(cleanedHtml).toContain('<p>Hello</p>');
+    });
+
+    it('removes onerror handlers from img tags in hasQuotes', () => {
+      const maliciousHtml = '<p>Hello</p><img src="x" onerror="alert(1)">';
+      // Should not throw and should safely check for quotes
+      const result = EmailQuoteExtractor.hasQuotes(maliciousHtml);
+      expect(result).toBe(false);
+    });
+
+    it('removes script tags in extractQuotes', () => {
+      const maliciousHtml =
+        '<p>Content</p><script>alert("xss")</script><p>More</p>';
+      const cleanedHtml = EmailQuoteExtractor.extractQuotes(maliciousHtml);
+
+      expect(cleanedHtml).not.toContain('<script');
+      expect(cleanedHtml).not.toContain('alert');
+      expect(cleanedHtml).toContain('<p>Content</p>');
+      expect(cleanedHtml).toContain('<p>More</p>');
+    });
+
+    it('removes onclick handlers in extractQuotes', () => {
+      const maliciousHtml = '<p onclick="alert(1)">Click me</p>';
+      const cleanedHtml = EmailQuoteExtractor.extractQuotes(maliciousHtml);
+
+      expect(cleanedHtml).not.toContain('onclick');
+      expect(cleanedHtml).toContain('Click me');
+    });
+
+    it('removes javascript: URLs in extractQuotes', () => {
+      const maliciousHtml = '<a href="javascript:alert(1)">Link</a>';
+      const cleanedHtml = EmailQuoteExtractor.extractQuotes(maliciousHtml);
+
+      // eslint-disable-next-line no-script-url
+      expect(cleanedHtml).not.toContain('javascript:');
+      expect(cleanedHtml).toContain('Link');
+    });
+
+    it('removes encoded payloads with event handlers in extractQuotes', () => {
+      const maliciousHtml =
+        '<img src="x" id="PHNjcmlwdD5hbGVydCgxKTwvc2NyaXB0Pg==" onerror="eval(atob(this.id))">';
+      const cleanedHtml = EmailQuoteExtractor.extractQuotes(maliciousHtml);
+
+      expect(cleanedHtml).not.toContain('onerror');
+      expect(cleanedHtml).not.toContain('eval');
+    });
+  });
 });

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

@@ -33,6 +33,26 @@ describe('quotedEmailHelper', () => {
       expect(result).toContain('Line 1');
       expect(result).toContain('Line 2');
     });
+
+    it('sanitizes onerror handlers from img tags', () => {
+      const html = '<p>Hello</p><img src="x" onerror="alert(1)">';
+      const result = extractPlainTextFromHtml(html);
+      expect(result).toBe('Hello');
+    });
+
+    it('sanitizes script tags', () => {
+      const html = '<p>Safe</p><script>alert(1)</script><p>Content</p>';
+      const result = extractPlainTextFromHtml(html);
+      expect(result).toContain('Safe');
+      expect(result).toContain('Content');
+      expect(result).not.toContain('alert');
+    });
+
+    it('sanitizes onclick handlers', () => {
+      const html = '<p onclick="alert(1)">Click me</p>';
+      const result = extractPlainTextFromHtml(html);
+      expect(result).toBe('Click me');
+    });
   });
 
   describe('getEmailSenderName', () => {

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

@@ -247,6 +247,7 @@
     "SUCCESS_DELETE_CONVERSATION": "Conversation deleted successfully",
     "FAIL_DELETE_CONVERSATION": "Couldn't delete conversation! Try again",
     "FILE_SIZE_LIMIT": "File exceeds the {MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE} MB attachment limit",
+    "FILE_TYPE_NOT_SUPPORTED": "This {fileName} file type is not supported in this conversation",
     "MESSAGE_ERROR": "Unable to send this message, please try again later",
     "SENT_BY": "Sent by:",
     "BOT": "Bot",

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

@@ -7,6 +7,7 @@
     },
     "CLOSE": "Close",
     "BETA": "Beta",
-    "BETA_DESCRIPTION": "This feature is in beta and may change as we improve it."
+    "BETA_DESCRIPTION": "This feature is in beta and may change as we improve it.",
+    "PREFERRED": "Preferred"
   }
 }

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

@@ -403,6 +403,7 @@
       "CANCEL_ANYTIME": "You can change or cancel your plan anytime"
     },
     "ENTERPRISE_PAYWALL": {
+      "AVAILABLE_ON": "Captain AI is only available in the Enterprise plans.",
       "UPGRADE_PROMPT": "Upgrade your plan to get access to our assistants, copilot and more.",
       "ASK_ADMIN": "Please reach out to your administrator for the upgrade."
     },

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

@@ -3,7 +3,7 @@
     "HEADER": "Conversations",
     "LOADING_CHART": "Loading chart data...",
     "NO_ENOUGH_DATA": "We've not received enough data points to generate report, Please try again later.",
-    "DOWNLOAD_AGENT_REPORTS": "Download agent reports",
+    "DOWNLOAD_CONVERSATION_REPORTS": "Download conversation reports",
     "DATA_FETCHING_FAILED": "Failed to fetch data, please try again later.",
     "SUMMARY_FETCHING_FAILED": "Failed to fetch summary, please try again later.",
     "METRICS": {

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

@@ -378,7 +378,56 @@
       "INFO_SHORT": "Automatically mark offline when you aren't using the app."
     },
     "DOCS": "Read docs",
-    "SECURITY": "Security"
+    "SECURITY": "Security",
+    "CAPTAIN_AI": "Captain"
+  },
+  "CAPTAIN_SETTINGS": {
+    "TITLE": "Captain Settings",
+    "DESCRIPTION": "Configure your AI models and features for Captain. Captain follows a credit based billing, you will be charged credits for every action Captain takes based on the model selected.",
+    "LOADING": "Loading Captain configuration...",
+    "LINK_TEXT": "Learn more about Captain Credits",
+    "NOT_ENABLED": "Captain is not enabled for your account. Please upgrade your plan to access Captain features.",
+    "MODEL_CONFIG": {
+      "TITLE": "Model Configuration",
+      "DESCRIPTION": "Select AI models for different features.",
+      "SELECT_MODEL": "Select model",
+      "CREDITS_PER_MESSAGE": "{credits} credit/message",
+      "COMING_SOON": "Coming soon",
+      "EDITOR": {
+        "TITLE": "Editor Features",
+        "DESCRIPTION": "Powers smart compose, grammar corrections, tone adjustments, and content enhancement in your message editor."
+      },
+      "ASSISTANT": {
+        "TITLE": "Assistant",
+        "DESCRIPTION": "Handles automated responses, conversation summaries, and intelligent reply suggestions for customer interactions."
+      },
+      "COPILOT": {
+        "TITLE": "Co-pilot",
+        "DESCRIPTION": "Provides real-time contextual suggestions, knowledge base recommendations, and proactive insights during conversations."
+      }
+    },
+    "FEATURES": {
+      "TITLE": "Features",
+      "DESCRIPTION": "Enable or disable AI-powered features.",
+      "AUDIO_TRANSCRIPTION": {
+        "TITLE": "Audio Transcription",
+        "DESCRIPTION": "Automatically convert voice messages and call recordings into searchable text transcripts."
+      },
+      "HELP_CENTER_SEARCH": {
+        "TITLE": "Help Center Search Indexing",
+        "DESCRIPTION": "Use AI for context aware search inside your help center articles."
+      },
+      "LABEL_SUGGESTION": {
+        "TITLE": "Label Suggestion",
+        "DESCRIPTION": "Automatically suggest relevant labels and tags for conversations based on content analysis and context.",
+        "MODEL_TITLE": "Label Suggestion Model",
+        "MODEL_DESCRIPTION": "Select the AI model to use for analyzing conversations and suggesting appropriate labels"
+      }
+    },
+    "API": {
+      "SUCCESS": "Captain settings updated successfully.",
+      "ERROR": "Failed to update Captain settings. Please try again."
+    }
   },
   "BILLING_SETTINGS": {
     "TITLE": "Billing",

app/javascript/dashboard/modules/search/components/SearchView.vue

@@ -370,7 +370,7 @@ onUnmounted(() => {
       />
     </div>
     <section class="flex flex-col flex-grow w-full h-full overflow-hidden">
-      <div class="w-full max-w-5xl mx-auto z-[60]">
+      <div class="w-full max-w-5xl mx-auto z-30">
         <div class="flex flex-col w-full px-4">
           <SearchHeader
             v-model:filters="filters"

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

@@ -0,0 +1,182 @@
+<script setup>
+import { computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { useAlert } from 'dashboard/composables';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useCaptain } from 'dashboard/composables/useCaptain';
+import { useConfig } from 'dashboard/composables/useConfig';
+import { useCaptainConfigStore } from 'dashboard/store/captain/preferences';
+
+import SettingsLayout from '../SettingsLayout.vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import SectionLayout from '../account/components/SectionLayout.vue';
+import ModelSelector from './components/ModelSelector.vue';
+import FeatureToggle from './components/FeatureToggle.vue';
+import CaptainPaywall from 'next/captain/pageComponents/Paywall.vue';
+
+const { t } = useI18n();
+const { captainEnabled } = useCaptain();
+const { isEnterprise, enterprisePlanName } = useConfig();
+const { isOnChatwootCloud } = useAccount();
+
+const captainConfigStore = useCaptainConfigStore();
+const { uiFlags } = storeToRefs(captainConfigStore);
+
+const isLoading = computed(() => uiFlags.value.isFetching);
+
+const modelFeatures = computed(() => [
+  {
+    key: 'editor',
+    title: t('CAPTAIN_SETTINGS.MODEL_CONFIG.EDITOR.TITLE'),
+    description: t('CAPTAIN_SETTINGS.MODEL_CONFIG.EDITOR.DESCRIPTION'),
+  },
+  {
+    key: 'assistant',
+    title: t('CAPTAIN_SETTINGS.MODEL_CONFIG.ASSISTANT.TITLE'),
+    description: t('CAPTAIN_SETTINGS.MODEL_CONFIG.ASSISTANT.DESCRIPTION'),
+    enterprise: true,
+  },
+  {
+    key: 'copilot',
+    title: t('CAPTAIN_SETTINGS.MODEL_CONFIG.COPILOT.TITLE'),
+    description: t('CAPTAIN_SETTINGS.MODEL_CONFIG.COPILOT.DESCRIPTION'),
+    enterprise: true,
+  },
+]);
+
+const featureToggles = computed(() => [
+  {
+    key: 'label_suggestion',
+  },
+  {
+    key: 'help_center_search',
+    enterprise: true,
+  },
+  {
+    key: 'audio_transcription',
+    enterprise: true,
+  },
+]);
+
+const shouldShowFeature = feature => {
+  // Cloud will always see these features as long as captain is enabled
+  if (isOnChatwootCloud.value && captainEnabled) {
+    return true;
+  }
+
+  if (feature.enterprise) {
+    // if the app is in enterprise mode, then we can show the feature
+    // this is not the installation plan, but when the enterprise folder is missing
+    return isEnterprise;
+  }
+
+  return true;
+};
+
+const isFeatureAccessible = feature => {
+  // Cloud will always see these features as long as captain is enabled
+  if (isOnChatwootCloud.value && captainEnabled) {
+    return true;
+  }
+
+  if (feature.enterprise) {
+    // plan is shown, but is it accessible?
+    // This ensures that the instance has purchased the enterprise license, and only then we allow
+    // access
+    return isEnterprise && enterprisePlanName === 'enterprise';
+  }
+
+  return true;
+};
+
+async function handleFeatureToggle({ feature, enabled }) {
+  try {
+    await captainConfigStore.updatePreferences({
+      captain_features: { [feature]: enabled },
+    });
+    useAlert(t('CAPTAIN_SETTINGS.API.SUCCESS'));
+  } catch (error) {
+    useAlert(t('CAPTAIN_SETTINGS.API.ERROR'));
+    captainConfigStore.fetch();
+  }
+}
+
+async function handleModelChange({ feature, model }) {
+  try {
+    await captainConfigStore.updatePreferences({
+      captain_models: { [feature]: model },
+    });
+    useAlert(t('CAPTAIN_SETTINGS.API.SUCCESS'));
+  } catch (error) {
+    useAlert(t('CAPTAIN_SETTINGS.API.ERROR'));
+    captainConfigStore.fetch();
+  }
+}
+
+onMounted(() => {
+  captainConfigStore.fetch();
+});
+</script>
+
+<template>
+  <SettingsLayout
+    :is-loading="isLoading"
+    :no-records-message="t('CAPTAIN_SETTINGS.NOT_ENABLED')"
+    :loading-message="t('CAPTAIN_SETTINGS.LOADING')"
+  >
+    <template #header>
+      <BaseSettingsHeader
+        :title="t('CAPTAIN_SETTINGS.TITLE')"
+        :description="t('CAPTAIN_SETTINGS.DESCRIPTION')"
+        :link-text="t('CAPTAIN_SETTINGS.LINK_TEXT')"
+        icon-name="captain"
+        feature-name="captain_billing"
+      />
+    </template>
+    <template #body>
+      <div v-if="captainEnabled" class="flex flex-col gap-1">
+        <!-- Model Configuration Section -->
+        <SectionLayout
+          :title="t('CAPTAIN_SETTINGS.MODEL_CONFIG.TITLE')"
+          :description="t('CAPTAIN_SETTINGS.MODEL_CONFIG.DESCRIPTION')"
+        >
+          <div class="grid gap-4">
+            <ModelSelector
+              v-for="feature in modelFeatures"
+              v-show="shouldShowFeature(feature)"
+              :key="feature.key"
+              :is-allowed="isFeatureAccessible(feature)"
+              :feature-key="feature.key"
+              :title="feature.title"
+              :description="feature.description"
+              @change="handleModelChange"
+            />
+          </div>
+        </SectionLayout>
+
+        <!-- Features Section -->
+        <SectionLayout
+          :title="t('CAPTAIN_SETTINGS.FEATURES.TITLE')"
+          :description="t('CAPTAIN_SETTINGS.FEATURES.DESCRIPTION')"
+          with-border
+        >
+          <div class="grid gap-4">
+            <FeatureToggle
+              v-for="feature in featureToggles"
+              v-show="shouldShowFeature(feature)"
+              :key="feature.key"
+              :is-allowed="isFeatureAccessible(feature)"
+              :feature-key="feature.key"
+              @change="handleFeatureToggle"
+              @model-change="handleModelChange"
+            />
+          </div>
+        </SectionLayout>
+      </div>
+      <div v-else>
+        <CaptainPaywall />
+      </div>
+    </template>
+  </SettingsLayout>
+</template>

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

@@ -0,0 +1,38 @@
+import { frontendURL } from '../../../../helper/URLHelper';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
+import SettingsWrapper from '../SettingsWrapper.vue';
+import Index from './Index.vue';
+
+export default {
+  routes: [
+    {
+      path: frontendURL('accounts/:accountId/settings/captain'),
+      meta: {
+        permissions: ['administrator'],
+        featureFlag: FEATURE_FLAGS.CAPTAIN,
+      },
+      component: SettingsWrapper,
+      props: {
+        headerTitle: 'CAPTAIN_SETTINGS.TITLE',
+        icon: 'i-lucide-bot',
+        showNewButton: false,
+      },
+      children: [
+        {
+          path: '',
+          name: 'captain_settings_index',
+          component: Index,
+          meta: {
+            permissions: ['administrator'],
+            featureFlag: FEATURE_FLAGS.CAPTAIN,
+            installationTypes: [
+              INSTALLATION_TYPES.ENTERPRISE,
+              INSTALLATION_TYPES.CLOUD,
+            ],
+          },
+        },
+      ],
+    },
+  ],
+};

app/javascript/dashboard/routes/dashboard/settings/captain/components/FeatureToggle.vue

@@ -0,0 +1,144 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { useCaptainConfigStore } from 'dashboard/store/captain/preferences';
+import Switch from 'dashboard/components-next/switch/Switch.vue';
+import ModelDropdown from './ModelDropdown.vue';
+
+const props = defineProps({
+  featureKey: {
+    type: String,
+    required: true,
+  },
+  isAllowed: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['change', 'modelChange']);
+
+const { t } = useI18n();
+const captainConfigStore = useCaptainConfigStore();
+const { features } = storeToRefs(captainConfigStore);
+
+const availableModels = computed(() =>
+  captainConfigStore.getModelsForFeature(props.featureKey)
+);
+
+const isEnabled = ref(false);
+
+const featureConfig = computed(() => features.value[props.featureKey]);
+
+const hasMultipleModels = computed(() => {
+  return availableModels.value && availableModels.value.length > 1;
+});
+
+const showModelSelector = computed(() => {
+  return isEnabled.value && hasMultipleModels.value;
+});
+
+const title = computed(() => {
+  if (props.featureKey.toUpperCase() === 'AUDIO_TRANSCRIPTION') {
+    return t('CAPTAIN_SETTINGS.FEATURES.AUDIO_TRANSCRIPTION.TITLE');
+  }
+  if (props.featureKey.toUpperCase() === 'HELP_CENTER_SEARCH') {
+    return t('CAPTAIN_SETTINGS.FEATURES.HELP_CENTER_SEARCH.TITLE');
+  }
+  if (props.featureKey.toUpperCase() === 'LABEL_SUGGESTION') {
+    return t('CAPTAIN_SETTINGS.FEATURES.LABEL_SUGGESTION.TITLE');
+  }
+  return '';
+});
+
+const description = computed(() => {
+  if (props.featureKey.toUpperCase() === 'AUDIO_TRANSCRIPTION') {
+    return t('CAPTAIN_SETTINGS.FEATURES.AUDIO_TRANSCRIPTION.DESCRIPTION');
+  }
+  if (props.featureKey.toUpperCase() === 'HELP_CENTER_SEARCH') {
+    return t('CAPTAIN_SETTINGS.FEATURES.HELP_CENTER_SEARCH.DESCRIPTION');
+  }
+  if (props.featureKey.toUpperCase() === 'LABEL_SUGGESTION') {
+    return t('CAPTAIN_SETTINGS.FEATURES.LABEL_SUGGESTION.DESCRIPTION');
+  }
+  return '';
+});
+
+const modelTitle = computed(() => {
+  if (props.featureKey.toUpperCase() === 'AUDIO_TRANSCRIPTION') {
+    return t('CAPTAIN_SETTINGS.FEATURES.AUDIO_TRANSCRIPTION.MODEL_TITLE');
+  }
+  if (props.featureKey.toUpperCase() === 'HELP_CENTER_SEARCH') {
+    return t('CAPTAIN_SETTINGS.FEATURES.HELP_CENTER_SEARCH.MODEL_TITLE');
+  }
+  if (props.featureKey.toUpperCase() === 'LABEL_SUGGESTION') {
+    return t('CAPTAIN_SETTINGS.FEATURES.LABEL_SUGGESTION.MODEL_TITLE');
+  }
+  return '';
+});
+
+const modelDescription = computed(() => {
+  if (props.featureKey.toUpperCase() === 'AUDIO_TRANSCRIPTION') {
+    return t('CAPTAIN_SETTINGS.FEATURES.AUDIO_TRANSCRIPTION.MODEL_DESCRIPTION');
+  }
+  if (props.featureKey.toUpperCase() === 'HELP_CENTER_SEARCH') {
+    return t('CAPTAIN_SETTINGS.FEATURES.HELP_CENTER_SEARCH.MODEL_DESCRIPTION');
+  }
+  if (props.featureKey.toUpperCase() === 'LABEL_SUGGESTION') {
+    return t('CAPTAIN_SETTINGS.FEATURES.LABEL_SUGGESTION.MODEL_DESCRIPTION');
+  }
+  return '';
+});
+
+watch(
+  featureConfig,
+  newConfig => {
+    if (newConfig !== undefined) {
+      isEnabled.value = !!newConfig.enabled;
+    }
+  },
+  { immediate: true }
+);
+
+const toggleFeature = () => {
+  emit('change', { feature: props.featureKey, enabled: isEnabled.value });
+};
+
+const handleModelChange = ({ feature, model }) => {
+  emit('modelChange', { feature, model });
+};
+</script>
+
+<template>
+  <div
+    class="p-4 rounded-xl border border-n-weak bg-n-solid-1 flex"
+    :class="{
+      'flex-col gap-3': showModelSelector,
+      'items-center justify-between gap-4': !showModelSelector,
+      'opacity-60 pointer-events-none': !isAllowed,
+    }"
+  >
+    <div class="flex items-center justify-between gap-4 flex-1">
+      <div class="flex-1 min-w-0">
+        <h4 class="text-sm font-medium text-n-slate-12">{{ title }}</h4>
+        <p class="text-sm text-n-slate-11 mt-0.5">{{ description }}</p>
+      </div>
+      <div v-if="isAllowed" class="flex-shrink-0">
+        <Switch v-model="isEnabled" @change="toggleFeature" />
+      </div>
+    </div>
+    <div
+      v-if="showModelSelector && isAllowed"
+      class="flex gap-2 ps-8 relative before:content-[''] before:absolute before:w-0.5 before:h-1/2 before:top-0 before:start-3 before:bg-n-weak after:content-[''] after:absolute after:w-2.5 after:h-3 after:top-[calc(50%-6px)] after:start-3 after:border-b-[0.125rem] after:border-s-[0.125rem] after:rounded-es after:border-n-weak"
+    >
+      <div class="flex-1 min-w-0">
+        <h4 class="text-sm font-medium text-n-slate-12">{{ modelTitle }}</h4>
+        <p class="text-sm text-n-slate-11 mt-0.5">{{ modelDescription }}</p>
+      </div>
+      <div class="flex justify-end">
+        <ModelDropdown :feature-key="featureKey" @change="handleModelChange" />
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/captain/components/ModelDropdown.vue

@@ -0,0 +1,153 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useCaptainConfigStore } from 'dashboard/store/captain/preferences';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import DropdownBody from 'dashboard/components-next/dropdown-menu/base/DropdownBody.vue';
+import DropdownItem from 'dashboard/components-next/dropdown-menu/base/DropdownItem.vue';
+import { provideDropdownContext } from 'dashboard/components-next/dropdown-menu/base/provider.js';
+
+const props = defineProps({
+  featureKey: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['change']);
+const { isOnChatwootCloud } = useAccount();
+
+const PROVIDER_ICONS = {
+  openai: 'i-ri-openai-fill',
+  anthropic: 'i-ri-anthropic-line',
+  mistral: 'i-logos-mistral-icon',
+  gemini: 'i-woot-gemini',
+};
+
+const iconForModel = model => {
+  return PROVIDER_ICONS[model.provider];
+};
+
+const { t } = useI18n();
+const captainConfigStore = useCaptainConfigStore();
+const isOpen = ref(false);
+
+const availableModels = computed(() =>
+  captainConfigStore.getModelsForFeature(props.featureKey)
+);
+
+const recommendedModelId = computed(() =>
+  captainConfigStore.getDefaultModelForFeature(props.featureKey)
+);
+
+const selectedModel = computed(() =>
+  captainConfigStore.getSelectedModelForFeature(props.featureKey)
+);
+
+const selectedModelId = ref(null);
+
+watch(
+  selectedModel,
+  newSelected => {
+    if (newSelected) {
+      selectedModelId.value = newSelected;
+    }
+  },
+  { immediate: true }
+);
+
+const selectedModelDetails = computed(() => {
+  if (!selectedModelId.value) return null;
+  return (
+    availableModels.value.find(m => m.id === selectedModelId.value) || null
+  );
+});
+
+const getCreditLabel = model => {
+  const multiplier = model.credit_multiplier || 1;
+  return t('CAPTAIN_SETTINGS.MODEL_CONFIG.CREDITS_PER_MESSAGE', {
+    credits: multiplier,
+  });
+};
+
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value;
+};
+
+const closeDropdown = () => {
+  isOpen.value = false;
+};
+
+provideDropdownContext({
+  isOpen,
+  toggle: () => toggleDropdown(),
+  closeMenu: closeDropdown,
+});
+
+const selectModel = model => {
+  selectedModelId.value = model.id;
+  emit('change', { feature: props.featureKey, model: model.id });
+  closeDropdown();
+};
+</script>
+
+<template>
+  <div v-on-clickaway="closeDropdown" class="relative flex-shrink-0">
+    <button
+      type="button"
+      class="flex items-center gap-2 px-3 py-2 text-sm border rounded-lg border-n-weak dark:bg-n-solid-2 dark:hover:bg-n-solid-3 bg-n-alpha-2 hover:bg-n-alpha-1 min-w-[180px] justify-between"
+      @click="toggleDropdown"
+    >
+      <span v-if="selectedModelDetails" class="text-n-slate-12">
+        {{ selectedModelDetails.display_name }}
+      </span>
+      <span v-else class="text-n-slate-10">
+        {{ t('CAPTAIN_SETTINGS.MODEL_CONFIG.SELECT_MODEL') }}
+      </span>
+      <Icon
+        icon="i-lucide-chevron-down"
+        class="size-4 text-n-slate-11 transition-transform"
+        :class="{ 'rotate-180': isOpen }"
+      />
+    </button>
+    <DropdownBody
+      v-if="isOpen"
+      class="absolute right-0 top-full mt-1 min-w-64 z-50 max-h-96 [&>ul]:max-h-96 [&>ul]:overflow-y-scroll"
+    >
+      <DropdownItem
+        v-for="model in availableModels"
+        :key="model.id"
+        :click="() => selectModel(model)"
+        class="rounded-lg dark:hover:bg-n-solid-3 hover:bg-n-alpha-1"
+        :class="{
+          'dark:bg-n-solid-3 bg-n-alpha-1': selectedModelId === model.id,
+          'pointer-events-none opacity-60': model.coming_soon,
+        }"
+      >
+        <div class="flex gap-2 w-full">
+          <Icon :icon="iconForModel(model)" class="size-4 flex-shrink-0" />
+          <div class="flex flex-col w-full text-left gap-1">
+            <div
+              class="text-sm w-full font-medium leading-none text-n-slate-12 flex items-baseline justify-between"
+            >
+              {{ model.display_name }}
+              <span
+                v-if="model.id === recommendedModelId"
+                class="text-[10px] uppercase text-n-iris-11 border border-1 border-n-iris-10 leading-none rounded-lg px-1 py-0.5"
+              >
+                {{ t('GENERAL.PREFERRED') }}
+              </span>
+            </div>
+            <span v-if="model.coming_soon" class="text-xs text-n-slate-11">
+              {{ t('CAPTAIN_SETTINGS.MODEL_CONFIG.COMING_SOON') }}
+            </span>
+            <span v-else-if="isOnChatwootCloud" class="text-xs text-n-slate-11">
+              {{ getCreditLabel(model) }}
+            </span>
+          </div>
+        </div>
+      </DropdownItem>
+    </DropdownBody>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/captain/components/ModelSelector.vue

@@ -0,0 +1,47 @@
+<script setup>
+import ModelDropdown from './ModelDropdown.vue';
+
+defineProps({
+  featureKey: {
+    type: String,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  isAllowed: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['change']);
+
+const handleModelChange = ({ feature, model }) => {
+  emit('change', { feature, model });
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between gap-4 p-4 rounded-xl border border-n-weak bg-n-solid-1"
+    :class="{ 'opacity-60 pointer-events-none relative': !isAllowed }"
+  >
+    <div class="flex-1 min-w-0">
+      <h4 class="text-sm font-medium text-n-slate-12">
+        {{ title }}
+      </h4>
+      <p class="text-sm text-n-slate-11 mt-0.5">{{ description }}</p>
+    </div>
+    <ModelDropdown
+      v-if="isAllowed"
+      :feature-key="featureKey"
+      @change="handleModelChange"
+    />
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CustomerSatisfactionPage.vue

@@ -28,10 +28,15 @@ const { t } = useI18n();
 const store = useStore();
 const labels = useMapGetter('labels/getLabels');
 
-const { isAWhatsAppCloudChannel: isWhatsAppChannel } = useInbox(
+const { isAWhatsAppChannel, isATwilioWhatsAppChannel } = useInbox(
   props.inbox?.id
 );
 
+// Computed to check if it's any type of WhatsApp channel (Cloud or Twilio)
+const isAnyWhatsAppChannel = computed(
+  () => isAWhatsAppChannel.value || isATwilioWhatsAppChannel.value
+);
+
 const isUpdating = ref(false);
 const selectedLabelValues = ref([]);
 const currentLabel = ref('');
@@ -116,7 +121,9 @@ const templateApprovalStatus = computed(() => {
 
   // Handle existing template with status
   if (templateStatus.value?.template_exists && templateStatus.value.status) {
-    return statusMap[templateStatus.value.status] || statusMap.PENDING;
+    // Convert status to uppercase for consistency with statusMap keys
+    const normalizedStatus = templateStatus.value.status.toUpperCase();
+    return statusMap[normalizedStatus] || statusMap.PENDING;
   }
 
   // Default case - no template exists
@@ -155,7 +162,7 @@ const initializeState = () => {
     : [];
 
   // Store original template values for change detection
-  if (isWhatsAppChannel.value) {
+  if (isAnyWhatsAppChannel.value) {
     originalTemplateValues.value = {
       message: state.message,
       templateButtonText: state.templateButtonText,
@@ -165,7 +172,7 @@ const initializeState = () => {
 };
 
 const checkTemplateStatus = async () => {
-  if (!isWhatsAppChannel.value) return;
+  if (!isAnyWhatsAppChannel.value) return;
 
   try {
     templateLoading.value = true;
@@ -195,7 +202,7 @@ const checkTemplateStatus = async () => {
 onMounted(() => {
   initializeState();
   if (!labels.value?.length) store.dispatch('labels/get');
-  if (isWhatsAppChannel.value) checkTemplateStatus();
+  if (isAnyWhatsAppChannel.value) checkTemplateStatus();
 });
 
 watch(() => props.inbox, initializeState, { immediate: true });
@@ -225,7 +232,7 @@ const removeLabel = label => {
 
 // Check if template-related fields have changed
 const hasTemplateChanges = () => {
-  if (!isWhatsAppChannel.value) return false;
+  if (!isAnyWhatsAppChannel.value) return false;
 
   const original = originalTemplateValues.value;
   return (
@@ -254,10 +261,28 @@ const shouldCreateTemplate = () => {
 
 // Build template config for saving
 const buildTemplateConfig = () => {
-  if (!hasExistingTemplate()) return null;
+  if (!hasExistingTemplate()) {
+    return null;
+  }
 
   const { template_name, template_id, template, status } =
     templateStatus.value || {};
+
+  if (isATwilioWhatsAppChannel.value) {
+    // Twilio WhatsApp format - get from existing template config
+    const existingTemplate = props.inbox?.csat_config?.template;
+
+    return existingTemplate
+      ? {
+          friendly_name: existingTemplate.friendly_name,
+          content_sid: existingTemplate.content_sid,
+          language: existingTemplate.language || state.templateLanguage,
+          status: existingTemplate.status || status,
+        }
+      : null;
+  }
+
+  // WhatsApp Cloud format
   return {
     name: template_name,
     template_id,
@@ -273,11 +298,11 @@ const updateInbox = async attributes => {
     ...attributes,
   };
 
-  return store.dispatch('inboxes/updateInbox', payload);
+  await store.dispatch('inboxes/updateInbox', payload);
 };
 
 const createTemplate = async () => {
-  if (!isWhatsAppChannel.value) return null;
+  if (!isAnyWhatsAppChannel.value) return null;
 
   const response = await store.dispatch('inboxes/createCSATTemplate', {
     inboxId: props.inbox.id,
@@ -298,7 +323,7 @@ const performSave = async () => {
 
     // For WhatsApp channels, create template first if needed
     if (
-      isWhatsAppChannel.value &&
+      isAnyWhatsAppChannel.value &&
       state.csatSurveyEnabled &&
       shouldCreateTemplate()
     ) {
@@ -326,13 +351,25 @@ const performSave = async () => {
 
     // Use new template data if created, otherwise preserve existing template information
     if (newTemplateData) {
-      csatConfig.template = {
-        name: newTemplateData.name,
-        template_id: newTemplateData.template_id,
-        language: newTemplateData.language,
-        status: newTemplateData.status,
-        created_at: new Date().toISOString(),
-      };
+      if (isATwilioWhatsAppChannel.value) {
+        // Twilio WhatsApp template format
+        csatConfig.template = {
+          friendly_name: newTemplateData.friendly_name,
+          content_sid: newTemplateData.content_sid,
+          language: newTemplateData.language,
+          status: newTemplateData.status,
+          created_at: new Date().toISOString(),
+        };
+      } else {
+        // WhatsApp Cloud template format
+        csatConfig.template = {
+          name: newTemplateData.name,
+          template_id: newTemplateData.template_id,
+          language: newTemplateData.language,
+          status: newTemplateData.status,
+          created_at: new Date().toISOString(),
+        };
+      }
     } else {
       const templateConfig = buildTemplateConfig();
       if (templateConfig) {
@@ -356,8 +393,9 @@ const performSave = async () => {
 
 const saveSettings = async () => {
   // Check if we need to show confirmation dialog for WhatsApp template changes
+  // This applies to both WhatsApp Cloud and Twilio WhatsApp channels
   if (
-    isWhatsAppChannel.value &&
+    isAnyWhatsAppChannel.value &&
     state.csatSurveyEnabled &&
     hasExistingTemplate() &&
     hasTemplateChanges()
@@ -390,7 +428,7 @@ const handleConfirmTemplateUpdate = async () => {
       <div class="grid gap-5">
         <!-- Show display type only for non-WhatsApp channels -->
         <WithLabel
-          v-if="!isWhatsAppChannel"
+          v-if="!isAnyWhatsAppChannel"
           :label="$t('INBOX_MGMT.CSAT.DISPLAY_TYPE.LABEL')"
           name="display_type"
         >
@@ -400,7 +438,7 @@ const handleConfirmTemplateUpdate = async () => {
           />
         </WithLabel>
 
-        <template v-if="isWhatsAppChannel">
+        <template v-if="isAnyWhatsAppChannel">
           <div
             class="flex flex-col gap-4 justify-between w-full lg:flex-row lg:gap-6"
           >
@@ -536,7 +574,7 @@ const handleConfirmTemplateUpdate = async () => {
         </WithLabel>
         <p class="text-sm italic text-n-slate-11">
           {{
-            isWhatsAppChannel
+            isAnyWhatsAppChannel
               ? $t('INBOX_MGMT.CSAT.WHATSAPP_NOTE')
               : $t('INBOX_MGMT.CSAT.NOTE')
           }}

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

@@ -76,14 +76,14 @@ export default {
         businessHours,
       };
     },
-    downloadAgentReports() {
+    downloadConversationReports() {
       const { from, to } = this;
       const fileName = generateFileName({
-        type: 'agent',
+        type: 'conversation',
         to,
         businessHours: this.businessHours,
       });
-      this.$store.dispatch('downloadAgentReports', {
+      this.$store.dispatch('downloadConversationsSummaryReports', {
         from,
         to,
         fileName,
@@ -109,10 +109,10 @@ export default {
 <template>
   <ReportHeader :header-title="$t('REPORT.HEADER')">
     <V4Button
-      :label="$t('REPORT.DOWNLOAD_AGENT_REPORTS')"
+      :label="$t('REPORT.DOWNLOAD_CONVERSATION_REPORTS')"
       icon="i-ph-download-simple"
       size="sm"
-      @click="downloadAgentReports"
+      @click="downloadConversationReports"
     />
   </ReportHeader>
   <div class="flex flex-col gap-3">

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

@@ -24,6 +24,7 @@ import teams from './teams/teams.routes';
 import customRoles from './customRoles/customRole.routes';
 import profile from './profile/profile.routes';
 import security from './security/security.routes';
+import captain from './captain/captain.routes';
 
 export default {
   routes: [
@@ -63,5 +64,6 @@ export default {
     ...customRoles.routes,
     ...profile.routes,
     ...security.routes,
+    ...captain.routes,
   ],
 };

app/javascript/dashboard/store/captain/preferences.js

@@ -0,0 +1,71 @@
+import { defineStore } from 'pinia';
+import CaptainPreferencesAPI from 'dashboard/api/captain/preferences';
+
+export const useCaptainConfigStore = defineStore('captainConfig', {
+  state: () => ({
+    providers: {},
+    models: {},
+    features: {},
+    uiFlags: {
+      isFetching: false,
+    },
+  }),
+
+  getters: {
+    getProviders: state => state.providers,
+    getModels: state => state.models,
+    getFeatures: state => state.features,
+    getUIFlags: state => state.uiFlags,
+    getModelsForFeature: state => featureKey => {
+      const feature = state.features[featureKey];
+      const models = feature?.models || [];
+
+      const providerOrder = { openai: 0, anthropic: 1, gemini: 2 };
+
+      return [...models].sort((a, b) => {
+        // Move coming_soon items to the end
+        if (a.coming_soon && !b.coming_soon) return 1;
+        if (!a.coming_soon && b.coming_soon) return -1;
+
+        // Sort by provider
+        const providerA = providerOrder[a.provider] ?? 999;
+        const providerB = providerOrder[b.provider] ?? 999;
+        if (providerA !== providerB) return providerA - providerB;
+
+        // Sort by credit_multiplier (highest first)
+        return (b.credit_multiplier || 0) - (a.credit_multiplier || 0);
+      });
+    },
+    getDefaultModelForFeature: state => featureKey => {
+      const feature = state.features[featureKey];
+      return feature?.default || null;
+    },
+    getSelectedModelForFeature: state => featureKey => {
+      const feature = state.features[featureKey];
+      return feature?.selected || feature?.default || null;
+    },
+  },
+
+  actions: {
+    async fetch() {
+      this.uiFlags.isFetching = true;
+      try {
+        const response = await CaptainPreferencesAPI.get();
+        this.providers = response.data.providers || {};
+        this.models = response.data.models || {};
+        this.features = response.data.features || {};
+      } catch (error) {
+        // Ignore error
+      } finally {
+        this.uiFlags.isFetching = false;
+      }
+    },
+
+    async updatePreferences(data) {
+      const response = await CaptainPreferencesAPI.updatePreferences(data);
+      this.providers = response.data.providers || {};
+      this.models = response.data.models || {};
+      this.features = response.data.features || {};
+    },
+  },
+});

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

@@ -78,7 +78,6 @@ const getValueFromConversation = (conversation, attributeKey) => {
     case 'team_id':
       return conversation.meta?.team?.id;
     case 'browser_language':
-    case 'country_code':
     case 'referer':
       return conversation.additional_attributes?.[attributeKey];
     default:

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

@@ -234,6 +234,19 @@ export const actions = {
         console.error(error);
       });
   },
+  downloadConversationsSummaryReports(_, reportObj) {
+    return Report.getConversationsSummaryReports(reportObj)
+      .then(response => {
+        downloadCsvFile(reportObj.fileName, response.data);
+        AnalyticsHelper.track(REPORTS_EVENTS.DOWNLOAD_REPORT, {
+          reportType: 'conversations_summary',
+          businessHours: reportObj?.businessHours,
+        });
+      })
+      .catch(error => {
+        console.error(error);
+      });
+  },
   downloadLabelReports(_, reportObj) {
     return Report.getLabelReports(reportObj)
       .then(response => {

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

@@ -201,4 +201,24 @@ describe('#actions', () => {
       );
     });
   });
+
+  describe('#downloadConversationsSummaryReports', () => {
+    it('open CSV download prompt if API is success', async () => {
+      const data = `Conversations,Messages received,Messages sent,Avg first response time,Avg resolution time,Resolution count,Avg customer waiting time
+      217,323,623,23 hours 22 minutes,179 days 18 hours,30,48 days 4 hours`;
+      axios.get.mockResolvedValue({ data });
+      const param = {
+        from: 1631039400,
+        to: 1635013800,
+        fileName: 'conversations-summary-report-24-10-2021.csv',
+      };
+      actions.downloadConversationsSummaryReports(1, param);
+      await flushPromises();
+
+      expect(DownloadHelper.downloadCsvFile).toBeCalledWith(
+        param.fileName,
+        data
+      );
+    });
+  });
 });

app/javascript/shared/helpers/FileHelper.js

@@ -1,3 +1,7 @@
+import { getAllowedFileTypesByChannel } from '@chatwoot/utils';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
+
 export const DEFAULT_MAXIMUM_FILE_UPLOAD_SIZE = 40;
 
 export const formatBytes = (bytes, decimals = 2) => {
@@ -31,3 +35,55 @@ export const resolveMaximumFileUploadSize = value => {
 
   return parsedValue;
 };
+
+/**
+ * Validates if a file type is allowed for a specific channel
+ * @param {File} file - The file to validate
+ * @param {Object} options - Validation options
+ * @param {string} options.channelType - The channel type
+ * @param {string} options.medium - The channel medium
+ * @param {string} options.conversationType - The conversation type (for Instagram DM detection)
+ * @param {boolean} options.isInstagramChannel - Whether it's an Instagram channel
+ * @param {boolean} options.isOnPrivateNote - Whether composing a private note (uses broader file type list)
+ * @returns {boolean} - True if file type is allowed, false otherwise
+ */
+export const isFileTypeAllowedForChannel = (file, options = {}) => {
+  if (!file || file.size === 0) return false;
+
+  const {
+    channelType: originalChannelType,
+    medium,
+    conversationType,
+    isInstagramChannel,
+    isOnPrivateNote,
+  } = options;
+
+  // Use broader file types for private notes (matches file picker behavior)
+  const allowedFileTypes = isOnPrivateNote
+    ? ALLOWED_FILE_TYPES
+    : getAllowedFileTypesByChannel({
+        channelType:
+          isInstagramChannel || conversationType === 'instagram_direct_message'
+            ? INBOX_TYPES.INSTAGRAM
+            : originalChannelType,
+        medium,
+      });
+
+  // Convert to array and validate
+  const allowedTypesArray = allowedFileTypes.split(',').map(t => t.trim());
+  const fileExtension = `.${file.name.split('.').pop()}`;
+
+  return allowedTypesArray.some(allowedType => {
+    // Check for exact file extension match
+    if (allowedType === fileExtension) return true;
+
+    // Check for wildcard MIME type (e.g., image/*)
+    if (allowedType.endsWith('/*')) {
+      const prefix = allowedType.slice(0, -2); // Remove '/*'
+      return file.type.startsWith(prefix + '/');
+    }
+
+    // Check for exact MIME type match
+    return allowedType === file.type;
+  });
+};

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

@@ -4,6 +4,7 @@ import {
   fileSizeInMegaBytes,
   checkFileSizeLimit,
   resolveMaximumFileUploadSize,
+  isFileTypeAllowedForChannel,
 } from '../FileHelper';
 
 describe('#File Helpers', () => {
@@ -61,4 +62,187 @@ describe('#File Helpers', () => {
       expect(resolveMaximumFileUploadSize(75)).toBe(75);
     });
   });
+
+  describe('isFileTypeAllowedForChannel', () => {
+    describe('edge cases', () => {
+      it('should return false for null file', () => {
+        expect(isFileTypeAllowedForChannel(null)).toBe(false);
+      });
+
+      it('should return false for undefined file', () => {
+        expect(isFileTypeAllowedForChannel(undefined)).toBe(false);
+      });
+
+      it('should return false for file with zero size', () => {
+        const file = { name: 'test.png', type: 'image/png', size: 0 };
+        expect(isFileTypeAllowedForChannel(file)).toBe(false);
+      });
+    });
+
+    describe('wildcard MIME types', () => {
+      it('should allow image/png when image/* is allowed', () => {
+        const file = { name: 'test.png', type: 'image/png', size: 1000 };
+        expect(
+          isFileTypeAllowedForChannel(file, {
+            channelType: 'Channel::WebWidget',
+          })
+        ).toBe(true);
+      });
+
+      it('should allow image/jpeg when image/* is allowed', () => {
+        const file = { name: 'test.jpg', type: 'image/jpeg', size: 1000 };
+        expect(
+          isFileTypeAllowedForChannel(file, {
+            channelType: 'Channel::WebWidget',
+          })
+        ).toBe(true);
+      });
+
+      it('should allow audio/mp3 when audio/* is allowed', () => {
+        const file = { name: 'test.mp3', type: 'audio/mp3', size: 1000 };
+        expect(
+          isFileTypeAllowedForChannel(file, {
+            channelType: 'Channel::WebWidget',
+          })
+        ).toBe(true);
+      });
+
+      it('should allow video/mp4 when video/* is allowed', () => {
+        const file = { name: 'test.mp4', type: 'video/mp4', size: 1000 };
+        expect(
+          isFileTypeAllowedForChannel(file, {
+            channelType: 'Channel::WebWidget',
+          })
+        ).toBe(true);
+      });
+    });
+
+    describe('exact MIME types', () => {
+      it('should allow application/pdf when explicitly allowed', () => {
+        const file = { name: 'test.pdf', type: 'application/pdf', size: 1000 };
+        expect(
+          isFileTypeAllowedForChannel(file, {
+            channelType: 'Channel::WebWidget',
+          })
+        ).toBe(true);
+      });
+
+      it('should allow text/plain when explicitly allowed', () => {
+        const file = { name: 'test.txt', type: 'text/plain', size: 1000 };
+        expect(
+          isFileTypeAllowedForChannel(file, {
+            channelType: 'Channel::WebWidget',
+          })
+        ).toBe(true);
+      });
+    });
+
+    describe('file extensions', () => {
+      it('should allow .3gpp extension when explicitly allowed', () => {
+        const file = { name: 'test.3gpp', type: '', size: 1000 };
+        expect(
+          isFileTypeAllowedForChannel(file, {
+            channelType: 'Channel::WebWidget',
+          })
+        ).toBe(true);
+      });
+    });
+
+    describe('Instagram special handling', () => {
+      it('should use Instagram rules when isInstagramChannel is true', () => {
+        const file = { name: 'test.png', type: 'image/png', size: 1000 };
+        expect(
+          isFileTypeAllowedForChannel(file, {
+            channelType: 'Channel::WebWidget',
+            isInstagramChannel: true,
+          })
+        ).toBe(true);
+      });
+
+      it('should use Instagram rules when conversationType is instagram_direct_message', () => {
+        const file = { name: 'test.png', type: 'image/png', size: 1000 };
+        expect(
+          isFileTypeAllowedForChannel(file, {
+            channelType: 'Channel::WebWidget',
+            conversationType: 'instagram_direct_message',
+          })
+        ).toBe(true);
+      });
+    });
+
+    describe('disallowed file types', () => {
+      it('should reject executable files', () => {
+        const file = {
+          name: 'malware.exe',
+          type: 'application/x-msdownload',
+          size: 1000,
+        };
+        expect(
+          isFileTypeAllowedForChannel(file, {
+            channelType: 'Channel::WebWidget',
+          })
+        ).toBe(false);
+      });
+
+      it('should reject unsupported file types', () => {
+        const file = {
+          name: 'test.xyz',
+          type: 'application/x-unknown',
+          size: 1000,
+        };
+        expect(
+          isFileTypeAllowedForChannel(file, {
+            channelType: 'Channel::WebWidget',
+          })
+        ).toBe(false);
+      });
+    });
+
+    describe('channel-specific rules', () => {
+      it('should allow WhatsApp-specific file types', () => {
+        const file = { name: 'test.pdf', type: 'application/pdf', size: 1000 };
+        expect(
+          isFileTypeAllowedForChannel(file, {
+            channelType: 'Channel::Whatsapp',
+          })
+        ).toBe(true);
+      });
+
+      it('should allow Twilio WhatsApp-specific file types', () => {
+        const file = { name: 'test.pdf', type: 'application/pdf', size: 1000 };
+        expect(
+          isFileTypeAllowedForChannel(file, {
+            channelType: 'Channel::TwilioSms',
+            medium: 'whatsapp',
+          })
+        ).toBe(true);
+      });
+    });
+
+    describe('private note file types', () => {
+      it('should allow broader file types for private notes', () => {
+        const file = {
+          name: 'test.pdf',
+          type: 'application/pdf',
+          size: 1000,
+        };
+        expect(
+          isFileTypeAllowedForChannel(file, {
+            channelType: 'Channel::Line',
+            isOnPrivateNote: true,
+          })
+        ).toBe(true);
+      });
+
+      it('should allow CSV files in private notes', () => {
+        const file = { name: 'data.csv', type: 'text/csv', size: 1000 };
+        expect(
+          isFileTypeAllowedForChannel(file, {
+            channelType: 'Channel::Line',
+            isOnPrivateNote: true,
+          })
+        ).toBe(true);
+      });
+    });
+  });
 });

app/javascript/widget/App.vue

@@ -82,6 +82,7 @@ export default {
     const { websiteToken, locale, widgetColor } = window.chatwootWebChannel;
     this.setLocale(locale);
     this.setWidgetColor(widgetColor);
+    this.setWidgetColorVariable(widgetColor);
     setHeader(window.authToken);
     if (this.isIFrame) {
       this.registerListeners();
@@ -114,6 +115,14 @@ export default {
       'resetCampaign',
     ]),
     ...mapActions('agent', ['fetchAvailableAgents']),
+    setWidgetColorVariable(widgetColor) {
+      if (widgetColor) {
+        document.documentElement.style.setProperty(
+          '--widget-color',
+          widgetColor
+        );
+      }
+    },
     scrollConversationToBottom() {
       const container = this.$el.querySelector('.conversation-wrap');
       container.scrollTop = container.scrollHeight;

app/javascript/widget/components/ChatInputWrap.vue

@@ -130,7 +130,7 @@ export default {
   <div
     class="items-center flex ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2 rounded-[7px] transition-all duration-200 bg-n-background !shadow-[0_0_0_1px,0_0_2px_3px]"
     :class="{
-      '!shadow-n-brand dark:!shadow-n-brand': isFocused,
+      '!shadow-[var(--widget-color,#2781f6)]': isFocused,
       '!shadow-n-strong dark:!shadow-n-strong': !isFocused,
     }"
     @keydown.esc="hideEmojiPicker"