fix(webhooks): include account data in webhook payloads

Inbound emails containing null bytes could fail while Chatwoot persisted
the incoming message, causing IMAP sync to drop and repeatedly retry the
same malformed email. This strips null bytes at the inbound mailbox
message persistence boundary so the rest of the email can be saved
normally.

Fixes
https://linear.app/chatwoot/issue/CW-7165/argumenterror-string-contains-null-byte-argumenterror
Sentry: https://chatwoot-p3.sentry.io/issues/7405946944/

## Test
- [x] added specs
- [x] manually tested the logic on prod for the inbox(email) which was
throwing the error

## What changed

- Sanitizes null bytes only while building attributes for inbound
mailbox message persistence.
- Uses the sanitized source ID for both duplicate lookup and message
creation.
- Adds regression coverage for the mailbox message creation path.

---------

Co-authored-by: Sony Mathew <2040199+sony-mathew@users.noreply.github.com>
Co-authored-by: Sony Mathew <sony@chatwoot.com>

Gemfile

@@ -76,7 +76,7 @@ gem 'faraday_middleware-aws-sigv4'
 ##--- gems for server & infra configuration ---##
 gem 'dotenv-rails', '>= 3.0.0'
 gem 'foreman'
-gem 'puma'
+gem 'puma', '~> 7.2', '>= 7.2.1'
 gem 'vite_rails'
 # metrics on heroku
 gem 'barnes'

Gemfile.lock

@@ -593,7 +593,7 @@ GEM
       sidekiq
     newrelic_rpm (9.6.0)
       base64
-    nio4r (2.7.3)
+    nio4r (2.7.5)
     nokogiri (1.19.3)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
@@ -682,7 +682,7 @@ GEM
     pry-rails (0.3.9)
       pry (>= 0.10.4)
     public_suffix (7.0.5)
-    puma (6.4.3)
+    puma (7.2.1)
       nio4r (~> 2.0)
     pundit (2.3.0)
       activesupport (>= 3.0.0)
@@ -1132,7 +1132,7 @@ DEPENDENCIES
   pgvector
   procore-sift
   pry-rails
-  puma
+  puma (~> 7.2, >= 7.2.1)
   pundit
   rack-attack (>= 6.7.0)
   rack-cors (= 2.0.0)

app/controllers/api/v1/accounts/microsoft/authorizations_controller.rb

@@ -6,8 +6,7 @@ class Api::V1::Accounts::Microsoft::AuthorizationsController < Api::V1::Accounts
       {
         redirect_uri: "#{base_url}/microsoft/callback",
         scope: scope,
-        state: state,
-        prompt: 'consent'
+        state: state
       }
     )
     if redirect_url

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

@@ -80,10 +80,15 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
       :id, :color, :custom_domain, :header_text, :homepage_link,
       :name, :page_title, :slug, :archived,
       { config: [:default_locale, :layout, { allowed_locales: [] }, { draft_locales: [] },
-                 { social_profiles: %i[facebook x instagram linkedin youtube tiktok github whatsapp] }] }
+                 { social_profiles: %i[facebook x instagram linkedin youtube tiktok github whatsapp] },
+                 { locale_translations: locale_translation_keys.index_with { %i[name page_title header_text] } }] }
     )
   end
 
+  def locale_translation_keys
+    params.dig(:portal, :config, :locale_translations)&.keys || []
+  end
+
   def live_chat_widget_params
     permitted_params = params.permit(:inbox_id)
     return {} unless permitted_params.key?(:inbox_id)

app/controllers/concerns/access_token_auth_helper.rb

@@ -1,8 +1,9 @@
 module AccessTokenAuthHelper
   BOT_ACCESSIBLE_ENDPOINTS = {
-    'api/v1/accounts/conversations' => %w[toggle_status toggle_typing_status toggle_priority create update custom_attributes],
+    'api/v1/accounts/conversations' => %w[show toggle_status toggle_typing_status toggle_priority create update custom_attributes],
     'api/v1/accounts/conversations/messages' => ['create'],
-    'api/v1/accounts/conversations/assignments' => ['create']
+    'api/v1/accounts/conversations/assignments' => ['create'],
+    'api/v1/accounts/conversations/labels' => %w[index create]
   }.freeze
 
   def ensure_access_token

app/controllers/public/api/v1/portals_controller.rb

@@ -9,7 +9,7 @@ class Public::Api::V1::PortalsController < Public::Api::V1::Portals::BaseControl
   layout 'portal'
 
   def show
-    @og_image_url = helpers.set_og_image_url('', @portal.header_text)
+    @og_image_url = helpers.set_og_image_url('', @portal.localized_value('header_text', @locale))
   end
 
   def sitemap

app/drops/contact_drop.rb

@@ -12,7 +12,7 @@ class ContactDrop < BaseDrop
   end
 
   def first_name
-    @obj.try(:name).try(:split).try(:first).try(:capitalize) if @obj.try(:name).try(:split).try(:size) > 1
+    @obj.try(:name).try(:split).try(:first).try(:capitalize)
   end
 
   def last_name

app/drops/user_drop.rb

@@ -12,7 +12,7 @@ class UserDrop < BaseDrop
   end
 
   def first_name
-    @obj.try(:name).try(:split).try(:first).try(:capitalize) if @obj.try(:name).try(:split).try(:size).to_i > 1
+    @obj.try(:name).try(:split).try(:first).try(:capitalize)
   end
 
   def last_name

app/helpers/super_admin/features.yml

@@ -34,6 +34,12 @@ disable_branding:
   enabled: <%= (ChatwootHub.pricing_plan != 'community') %>
   icon: 'icon-sailbot-fill'
   enterprise: true
+voice_calls:
+  name: 'Voice Calls'
+  description: 'Enable voice calling capabilities for your agents and customers.'
+  enabled: <%= (ChatwootHub.pricing_plan != 'community') %>
+  icon: 'icon-voice-line'
+  enterprise: true
 
 # ------- Product Features ------- #
 help_center:

app/javascript/dashboard/api/channel/voice/twilioVoiceClient.js

@@ -48,6 +48,12 @@ class TwilioVoiceClient extends EventTarget {
     return !!this.activeConnection;
   }
 
+  setMuted(shouldMute) {
+    if (!this.activeConnection) return false;
+    this.activeConnection.mute(shouldMute);
+    return shouldMute;
+  }
+
   endClientCall() {
     if (this.activeConnection) {
       this.activeConnection.disconnect();

app/javascript/dashboard/components-next/Companies/CompaniesCard/CompaniesCard.vue

@@ -46,9 +46,8 @@ const formattedLastActivityAt = computed(() => {
         :src="avatarSource"
         class="shrink-0"
         :name="name"
-        :size="48"
+        :size="42"
         hide-offline-status
-        rounded-full
       />
       <div class="flex flex-col gap-0.5 flex-1 min-w-0">
         <div class="flex flex-wrap items-center gap-x-4 gap-y-1 min-w-0">

app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyProfileCard.vue

@@ -141,7 +141,6 @@ const handleUpdateCompany = async () => {
         :src="avatarSource"
         :size="72"
         :allow-upload="!isAvatarBusy"
-        rounded-full
         hide-offline-status
         @upload="handleAvatarUpload"
         @delete="handleAvatarDelete"

app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue

@@ -124,10 +124,9 @@ const handleAvatarHover = isHovered => {
           <Avatar
             :name="name"
             :src="thumbnail"
-            :size="48"
+            :size="42"
             :status="availabilityStatus"
             hide-offline-status
-            rounded-full
           >
             <template v-if="selectable" #overlay="{ size }">
               <label

app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue

@@ -53,6 +53,9 @@ const localeMenuLabels = computed(() => ({
   'publish-locale': t(
     'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.PUBLISH_LOCALE'
   ),
+  'customize-content': t(
+    'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.CUSTOMIZE_CONTENT'
+  ),
   delete: t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.DELETE'),
 }));
 
@@ -128,7 +131,7 @@ const handleAction = ({ action, value }) => {
           <DropdownMenu
             v-if="showDropdownMenu"
             :menu-items="localeMenuItems"
-            class="ltr:right-0 rtl:left-0 mt-1 xl:ltr:left-0 xl:rtl:right-0 top-full z-60 min-w-[150px]"
+            class="ltr:right-0 rtl:left-0 mt-1 top-full z-60 min-w-[150px]"
             @action="handleAction"
           />
         </div>

app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleContentDialog.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+
+const props = defineProps({
+  portal: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { t } = useI18n();
+const store = useStore();
+
+const dialogRef = ref(null);
+const activeLocale = ref('');
+const name = ref('');
+const pageTitle = ref('');
+const headerText = ref('');
+
+const localeTranslations = computed(
+  () => props.portal?.config?.locale_translations || {}
+);
+
+const openForLocale = localeCode => {
+  const existing = localeTranslations.value[localeCode] || {};
+  activeLocale.value = localeCode;
+  name.value = existing.name || '';
+  pageTitle.value = existing.page_title || '';
+  headerText.value = existing.header_text || '';
+  dialogRef.value?.open();
+};
+
+const onConfirm = async () => {
+  const translations = { ...localeTranslations.value };
+  const fields = {};
+  if (name.value.trim()) fields.name = name.value.trim();
+  if (pageTitle.value.trim()) fields.page_title = pageTitle.value.trim();
+  if (headerText.value.trim()) fields.header_text = headerText.value.trim();
+
+  if (Object.keys(fields).length) {
+    translations[activeLocale.value] = fields;
+  } else {
+    delete translations[activeLocale.value];
+  }
+
+  try {
+    await store.dispatch('portals/update', {
+      portalSlug: props.portal?.slug,
+      config: { locale_translations: translations },
+    });
+    dialogRef.value?.close();
+    useAlert(t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(
+      error?.message ||
+        t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.API.ERROR_MESSAGE')
+    );
+  }
+};
+
+defineExpose({ openForLocale });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    :title="t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.TITLE')"
+    :description="t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.DESCRIPTION')"
+    @confirm="onConfirm"
+  >
+    <div class="flex flex-col gap-4">
+      <div class="flex flex-col gap-1">
+        <label class="text-sm font-medium text-n-slate-12">
+          {{ t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.NAME.LABEL') }}
+        </label>
+        <Input v-model="name" :placeholder="portal.name" />
+      </div>
+      <div class="flex flex-col gap-1">
+        <label class="text-sm font-medium text-n-slate-12">
+          {{ t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.PAGE_TITLE.LABEL') }}
+        </label>
+        <Input v-model="pageTitle" :placeholder="portal.page_title" />
+      </div>
+      <div class="flex flex-col gap-1">
+        <label class="text-sm font-medium text-n-slate-12">
+          {{ t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.HEADER_TEXT.LABEL') }}
+        </label>
+        <Input v-model="headerText" :placeholder="portal.header_text" />
+      </div>
+    </div>
+  </Dialog>
+</template>

app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue

@@ -1,5 +1,7 @@
 <script setup>
+import { ref } from 'vue';
 import LocaleCard from 'dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue';
+import LocaleContentDialog from 'dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleContentDialog.vue';
 import { useStore } from 'dashboard/composables/store';
 import { useAlert, useTrack } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -23,6 +25,8 @@ const { t } = useI18n();
 const route = useRoute();
 const { uiSettings, updateUISettings } = useUISettings();
 
+const contentDialogRef = ref(null);
+
 const isLocaleDefault = code => {
   return props.portal?.meta?.default_locale === code;
 };
@@ -148,6 +152,8 @@ const handleAction = ({ action }, localeCode) => {
     moveLocaleToDraft({ localeCode: localeCode });
   } else if (action === 'publish-locale') {
     publishLocale({ localeCode: localeCode });
+  } else if (action === 'customize-content') {
+    contentDialogRef.value.openForLocale(localeCode);
   } else if (action === 'delete') {
     deletePortalLocale({ localeCode: localeCode });
   }
@@ -167,5 +173,6 @@ const handleAction = ({ action }, localeCode) => {
       :category-count="locale.categoriesCount || 0"
       @action="handleAction($event, locale.code)"
     />
+    <LocaleContentDialog ref="contentDialogRef" :portal="portal" />
   </ul>
 </template>

app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js

@@ -182,7 +182,10 @@ const MIN_SEARCH_LENGTH = 2;
 export const createContactSearcher = () => {
   let controller = null;
 
-  return async (query, { skipMinLength = false } = {}) => {
+  return async (
+    query,
+    { skipMinLength = false, reachableOnly = true } = {}
+  ) => {
     const trimmed = typeof query === 'string' ? query.trim() : '';
 
     controller?.abort();
@@ -199,6 +202,8 @@ export const createContactSearcher = () => {
       } = await ContactAPI.search(trimmed, 1, 'name', '', { signal });
 
       const camelCasedPayload = camelcaseKeys(payload, { deep: true });
+      if (!reachableOnly) return camelCasedPayload || [];
+
       // Filter contacts that have either phone_number or email
       const filteredPayload = camelCasedPayload?.filter(
         contact => contact.phoneNumber || contact.email

app/javascript/dashboard/components-next/call/CallCard.vue

@@ -197,9 +197,9 @@ const channelIcon = computed(() => {
                 ? $t('CONVERSATION.VOICE_WIDGET.END_CALL')
                 : $t('CONVERSATION.VOICE_WIDGET.REJECT_CALL')
             "
-            icon="i-ph-phone-x-bold"
+            icon="i-ph-phone-bold"
             ruby
-            class="!rounded-full rotate-[134deg]"
+            class="!rounded-full rotate-[135deg]"
             @click="isOngoing ? $emit('end') : $emit('reject')"
           />
         </div>

app/javascript/dashboard/components-next/call/FloatingCallWidget.vue

@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import { useCallSession } from 'dashboard/composables/useCallSession';
 import { setWhatsappCallMuted } from 'dashboard/composables/useWhatsappCallSession';
+import TwilioVoiceClient from 'dashboard/api/channel/voice/twilioVoiceClient';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import { VOICE_CALL_PROVIDERS } from 'dashboard/helper/inbox';
 import { VOICE_CALL_DIRECTION } from 'dashboard/components-next/message/constants';
@@ -11,7 +12,7 @@ import WindowVisibilityHelper from 'dashboard/helper/AudioAlerts/WindowVisibilit
 import CallCard from 'dashboard/components-next/call/CallCard.vue';
 import countriesList from 'shared/constants/countries.js';
 
-const RINGTONE_URL = '/audio/dashboard/bell.mp3';
+const RINGTONE_URL = '/audio/dashboard/ringtone.mp3';
 
 const route = useRoute();
 const router = useRouter();
@@ -29,8 +30,8 @@ const {
   formattedCallDuration,
 } = useCallSession();
 
-// Mute is currently WhatsApp-only — Twilio calls are mediated server-side and
-// don't expose a mic track on the browser side.
+// Mute routes by provider: WhatsApp toggles the local mic track, Twilio uses
+// the Voice SDK connection's native mute. Both surface the same button.
 const isMuted = ref(false);
 const isWhatsappActive = computed(
   () => activeCall.value?.provider === VOICE_CALL_PROVIDERS.WHATSAPP
@@ -63,7 +64,11 @@ const stackedCardState = call =>
 
 const toggleMute = () => {
   isMuted.value = !isMuted.value;
-  setWhatsappCallMuted(isMuted.value);
+  if (isWhatsappActive.value) {
+    setWhatsappCallMuted(isMuted.value);
+  } else {
+    TwilioVoiceClient.setMuted(isMuted.value);
+  }
 };
 
 watch(hasActiveCall, active => {
@@ -256,7 +261,7 @@ onBeforeUnmount(stopRingtone);
       :call-info="getCallInfo(activeCall || primaryIncomingCall)"
       :duration="hasActiveCall ? formattedCallDuration : ''"
       :is-muted="isMuted"
-      :show-mute="hasActiveCall && isWhatsappActive"
+      :show-mute="hasActiveCall"
       @accept="handleJoinCall(primaryIncomingCall)"
       @reject="rejectIncomingCall(primaryIncomingCall?.callSid)"
       @dismiss="dismissCall(primaryIncomingCall?.callSid)"

app/javascript/dashboard/components-next/filter/ConditionRow.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, h, watch, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { debounce } from '@chatwoot/utils';
 import Button from 'next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
 import FilterSelect from './inputs/FilterSelect.vue';
@@ -109,6 +110,34 @@ const inputFieldType = computed(() => {
   return 'text';
 });
 
+const asyncOptions = ref([]);
+const isSearching = ref(false);
+const lastSearchQuery = ref('');
+
+const performAsyncSearch = async query => {
+  let results;
+  try {
+    results = await currentFilter.value.searchOptions(query);
+  } catch {
+    results = [];
+  }
+  // skip stale responses — a newer search in this row owns the UI
+  if (query !== lastSearchQuery.value) return;
+  // null means another row's search aborted ours, reset instead of staying stuck on the searching state
+  if (results !== null) asyncOptions.value = results;
+  isSearching.value = false;
+};
+
+const debouncedAsyncSearch = debounce(performAsyncSearch, 300);
+
+const onAsyncSearch = query => {
+  const hasQuery = !!query.trim();
+  lastSearchQuery.value = query;
+  if (!hasQuery) asyncOptions.value = [];
+  isSearching.value = hasQuery;
+  debouncedAsyncSearch(query);
+};
+
 const resetModelOnAttributeKeyChange = newAttributeKey => {
   /**
    * Resets the filter values and operator when the attribute key changes. This ensures that
@@ -121,11 +150,16 @@ const resetModelOnAttributeKeyChange = newAttributeKey => {
   const newInputType = getInputType(newOperator, filter);
   if (newInputType === 'multiSelect') {
     values.value = [];
-  } else if (['searchSelect', 'booleanSelect'].includes(newInputType)) {
+  } else if (
+    ['searchSelect', 'asyncSearchSelect', 'booleanSelect'].includes(
+      newInputType
+    )
+  ) {
     values.value = {};
   } else {
     values.value = '';
   }
+  asyncOptions.value = [];
   filterOperator.value = newOperator.value;
 };
 
@@ -185,6 +219,16 @@ defineExpose({ validate, resetValidation });
           :options="currentFilter.options"
           dropdown-max-height="max-h-64"
         />
+        <SingleSelect
+          v-else-if="inputType === 'asyncSearchSelect'"
+          v-model="values"
+          async-search
+          :options="asyncOptions"
+          :is-searching="isSearching"
+          :search-placeholder="currentFilter.searchPlaceholder"
+          dropdown-max-height="max-h-64"
+          @search="onAsyncSearch"
+        />
         <SingleSelect
           v-else-if="inputType === 'booleanSelect'"
           v-model="values"

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

@@ -7,6 +7,7 @@ export const CONVERSATION_ATTRIBUTES = {
   ASSIGNEE_ID: 'assignee_id',
   INBOX_ID: 'inbox_id',
   TEAM_ID: 'team_id',
+  CONTACT_ID: 'contact_id',
   DISPLAY_ID: 'display_id',
   CAMPAIGN_ID: 'campaign_id',
   LABELS: 'labels',

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

@@ -1,9 +1,37 @@
+import { ref } from 'vue';
+import ContactAPI from 'dashboard/api/contacts';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import { useConversationFilterContext } from '../provider';
 import {
+  CONVERSATION_ATTRIBUTES,
   getCustomAttributeInputType,
   buildAttributesFilterTypes,
   replaceUnderscoreWithSpace,
 } from './filterHelper';
 
+vi.mock('dashboard/api/contacts', () => ({
+  default: {
+    search: vi.fn(),
+  },
+}));
+
+vi.mock('dashboard/composables/store.js', () => ({
+  useMapGetter: vi.fn(),
+}));
+
+vi.mock('next/icon/provider', () => ({
+  useChannelIcon: () => ref('i-test-channel'),
+}));
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key, params = {}) => {
+      if (key === 'FILTER.CONTACT_FALLBACK') return `Contact #${params.id}`;
+      return key;
+    },
+  }),
+}));
+
 describe('filterHelper', () => {
   describe('getCustomAttributeInputType', () => {
     it('returns date for date type', () => {
@@ -135,3 +163,64 @@ describe('filterHelper', () => {
     });
   });
 });
+
+const storeValues = {
+  'attributes/getConversationAttributes': ref([]),
+  'labels/getLabels': ref([]),
+  'agents/getAgents': ref([]),
+  'inboxes/getInboxes': ref([]),
+  'teams/getTeams': ref([]),
+  'campaigns/getAllCampaigns': ref([]),
+};
+
+describe('useConversationFilterContext', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    useMapGetter.mockImplementation(key => storeValues[key] || ref([]));
+  });
+
+  it('exposes contact as an async searchable conversation filter', () => {
+    const { filterTypes } = useConversationFilterContext();
+    const contactFilter = filterTypes.value.find(
+      filter => filter.attributeKey === CONVERSATION_ATTRIBUTES.CONTACT_ID
+    );
+
+    expect(contactFilter).toMatchObject({
+      attributeKey: 'contact_id',
+      label: 'FILTER.ATTRIBUTES.CONTACT',
+      inputType: 'asyncSearchSelect',
+      dataType: 'number',
+      attributeModel: 'standard',
+    });
+    expect(
+      contactFilter.filterOperators.map(operator => operator.value)
+    ).toEqual(['equal_to', 'not_equal_to']);
+  });
+
+  it('uses the existing contact search API for contact filter options', async () => {
+    ContactAPI.search.mockResolvedValue({
+      data: {
+        payload: [
+          { id: 1, name: 'Jane Doe' },
+          { id: 2, email: 'alex@example.com' },
+          { id: 3 },
+        ],
+      },
+    });
+
+    const { filterTypes } = useConversationFilterContext();
+    const contactFilter = filterTypes.value.find(
+      filter => filter.attributeKey === CONVERSATION_ATTRIBUTES.CONTACT_ID
+    );
+    const options = await contactFilter.searchOptions('jane');
+
+    expect(ContactAPI.search).toHaveBeenCalledWith('jane', 1, 'name', '', {
+      signal: expect.any(AbortSignal),
+    });
+    expect(options).toEqual([
+      { id: 1, name: 'Jane Doe' },
+      { id: 2, name: 'alex@example.com' },
+      { id: 3, name: 'Contact #3' },
+    ]);
+  });
+});

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

@@ -11,6 +11,8 @@ import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
 
 const {
   options,
+  asyncSearch,
+  isSearching,
   disableSearch,
   disableDeselect,
   placeholderIcon,
@@ -23,6 +25,14 @@ const {
     type: Array,
     required: true,
   },
+  asyncSearch: {
+    type: Boolean,
+    default: false,
+  },
+  isSearching: {
+    type: Boolean,
+    default: false,
+  },
   disableSearch: {
     type: Boolean,
     default: false,
@@ -53,6 +63,12 @@ const {
   },
 });
 
+const emit = defineEmits(['search']);
+
+// the input is re-inserted on every dropdown open (v-if),
+// where the native autofocus attribute is ignored so focus it via a directive instead
+const vFocus = { mounted: el => el.focus() };
+
 const { t } = useI18n();
 const selected = defineModel({
   type: Object,
@@ -60,7 +76,9 @@ const selected = defineModel({
 });
 
 const searchTerm = ref('');
+
 const searchResults = computed(() => {
+  if (asyncSearch) return options;
   if (!options) return [];
   return picoSearch(options, searchTerm.value, ['name']);
 });
@@ -77,7 +95,11 @@ const selectedItem = computed(() => {
   if (!optionToSearch) return null;
   // extract the selected item from the options array
   // this ensures that options like icon is also included
-  return options.find(option => option.id === optionToSearch.id);
+  return (
+    options.find(option => option.id === optionToSearch.id) ||
+    // async options may not include the selected option, fall back to it
+    (asyncSearch && optionToSearch.id !== undefined ? optionToSearch : null)
+  );
 });
 
 const toggleSelected = option => {
@@ -131,13 +153,19 @@ const toggleSelected = option => {
         <Icon class="absolute size-4 left-2 top-2" icon="i-lucide-search" />
         <input
           v-model="searchTerm"
-          autofocus
+          v-focus
           class="p-1.5 pl-8 text-n-slate-11 bg-n-alpha-1 rounded-lg w-full"
           :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
+          @input="emit('search', $event.target.value)"
         />
       </div>
       <DropdownSection :height="dropdownMaxHeight">
-        <template v-if="searchResults.length">
+        <template v-if="isSearching">
+          <DropdownItem disabled>
+            {{ t('DROPDOWN_MENU.SEARCHING') }}
+          </DropdownItem>
+        </template>
+        <template v-else-if="searchResults.length">
           <DropdownItem
             v-for="option in searchResults"
             :key="option.id"

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

@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n';
 import { useOperators } from './operators';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import { useChannelIcon } from 'next/icon/provider';
+import { createContactSearcher } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
 import {
   buildAttributesFilterTypes,
   CONVERSATION_ATTRIBUTES,
@@ -30,7 +31,7 @@ import languages from 'dashboard/components/widgets/conversation/advancedFilterI
  * @property {string} value - This is a proxy for the attribute key used in FilterSelect
  * @property {string} attributeName - The attribute name used to display on the UI
  * @property {string} label - This is a proxy for the attribute name used in FilterSelect
- * @property {'multiSelect'|'searchSelect'|'plainText'|'date'|'booleanSelect'} inputType - The input type for the attribute
+ * @property {'multiSelect'|'searchSelect'|'asyncSearchSelect'|'plainText'|'date'|'booleanSelect'} inputType - The input type for the attribute
  * @property {FilterOption[]} [options] - The options available for the attribute if it is a multiSelect or singleSelect type
  * @property {'text'|'number'} dataType
  * @property {FilterOperator[]} filterOperators - The operators available for the attribute
@@ -68,6 +69,30 @@ export function useConversationFilterContext() {
     getOperatorTypes,
   } = useOperators();
 
+  const searchContacts = createContactSearcher();
+
+  const contactOptionName = contact =>
+    contact.name ||
+    contact.email ||
+    contact.phoneNumber ||
+    contact.identifier ||
+    t('FILTER.CONTACT_FALLBACK', { id: contact.id });
+
+  const searchContactOptions = async query => {
+    const contacts = await searchContacts(query, {
+      skipMinLength: true,
+      reachableOnly: false,
+    });
+
+    // null means the request was aborted (a newer search is in-flight)
+    if (contacts === null) return null;
+
+    return contacts.map(contact => ({
+      id: contact.id,
+      name: contactOptionName(contact),
+    }));
+  };
+
   /**
    * @type {import('vue').ComputedRef<FilterType[]>}
    */
@@ -158,6 +183,18 @@ export function useConversationFilterContext() {
       filterOperators: presenceOperators.value,
       attributeModel: 'standard',
     },
+    {
+      attributeKey: CONVERSATION_ATTRIBUTES.CONTACT_ID,
+      value: CONVERSATION_ATTRIBUTES.CONTACT_ID,
+      attributeName: t('FILTER.ATTRIBUTES.CONTACT'),
+      label: t('FILTER.ATTRIBUTES.CONTACT'),
+      inputType: 'asyncSearchSelect',
+      searchOptions: searchContactOptions,
+      searchPlaceholder: t('FILTER.CONTACT_SEARCH_PLACEHOLDER'),
+      dataType: 'number',
+      filterOperators: equalityOperators.value,
+      attributeModel: 'standard',
+    },
     {
       attributeKey: CONVERSATION_ATTRIBUTES.DISPLAY_ID,
       value: CONVERSATION_ATTRIBUTES.DISPLAY_ID,

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

@@ -145,7 +145,6 @@ const allowedMenuItems = computed(() => {
           :src="currentUser.avatar_url"
           :status="currentUserAvailability"
           class="flex-shrink-0"
-          rounded-full
         />
         <div v-if="!isCollapsed" class="min-w-0">
           <div class="text-sm font-medium leading-4 truncate text-n-slate-12">

app/javascript/dashboard/components/ChatList.vue

@@ -151,6 +151,9 @@ const activeFolder = computed(() => {
   return undefined;
 });
 
+const getContact = useMapGetter('contacts/getContact');
+const folderContactId = useMapGetter('customViews/getActiveFolderContactId');
+
 const activeFolderName = computed(() => {
   return activeFolder.value?.name;
 });
@@ -456,6 +459,7 @@ function setParamsForEditFolderModal() {
     inboxes: inboxesList.value,
     labels: labels.value,
     campaigns: campaigns.value,
+    contacts: [getContact.value(folderContactId.value)],
     languages: languages,
     countries: countries,
     priority: [

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

@@ -32,7 +32,6 @@ import {
   CONVERSATION_EVENTS,
   CAPTAIN_EVENTS,
 } from 'dashboard/helper/AnalyticsHelper/events';
-import { MESSAGE_EDITOR_IMAGE_RESIZES } from 'dashboard/constants/editor';
 
 import {
   messageSchema,
@@ -43,6 +42,7 @@ import {
   MessageMarkdownSerializer,
   EditorState,
   Selection,
+  imageResizeView,
 } from '@chatwoot/prosemirror-schema';
 import {
   suggestionsPlugin,
@@ -57,7 +57,6 @@ import {
   insertAtCursor,
   removeSignature as removeSignatureHelper,
   scrollCursorIntoView,
-  setURLWithQueryAndSize,
   getFormattingForEditor,
   getSelectionCoords,
   calculateMenuPosition,
@@ -72,6 +71,7 @@ import {
 import { createTypingIndicator } from '@chatwoot/utils';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
 
 const props = defineProps({
   modelValue: { type: String, default: '' },
@@ -93,7 +93,6 @@ const props = defineProps({
   channelType: { type: String, default: '' },
   conversationId: { type: Number, default: null },
   medium: { type: String, default: '' },
-  showImageResizeToolbar: { type: Boolean, default: false }, // A kill switch to show or hide the image toolbar
   focusOnMount: { type: Boolean, default: true },
 });
 
@@ -119,6 +118,14 @@ const TYPING_INDICATOR_IDLE_TIME = 4000;
 const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
 const DEFAULT_FORMATTING = 'Context::Default';
 const PRIVATE_NOTE_FORMATTING = 'Context::PrivateNote';
+const MESSAGE_SIGNATURE_FORMATTING = 'Context::MessageSignature';
+const INLINE_IMAGE_PASTE_TYPES = [
+  'image/png',
+  'image/jpeg',
+  'image/jpg',
+  'image/gif',
+  'image/webp',
+];
 
 const effectiveChannelType = computed(() =>
   getEffectiveChannelType(props.channelType, props.medium)
@@ -192,12 +199,8 @@ const cannedSearchTerm = ref('');
 const variableSearchTerm = ref('');
 const emojiSearchTerm = ref('');
 const range = ref(null);
-const isImageNodeSelected = ref(false);
-const toolbarPosition = ref({ top: 0, left: 0 });
-const selectedImageNode = ref(null);
 const isTextSelected = ref(false); // Tracks text selection and prevents unnecessary re-renders on mouse selection
 const showSelectionMenu = ref(false);
-const sizes = MESSAGE_EDITOR_IMAGE_RESIZES;
 
 // element ref
 const editorRoot = useTemplateRef('editorRoot');
@@ -475,16 +478,6 @@ function removeSignature() {
   reloadState(content);
 }
 
-function setToolbarPosition() {
-  const editorRect = editorRoot.value.getBoundingClientRect();
-  const rect = selectedImageNode.value.getBoundingClientRect();
-
-  toolbarPosition.value = {
-    top: `${rect.top - editorRect.top - 30}px`,
-    left: `${rect.left - editorRect.left - 4}px`,
-  };
-}
-
 function setMenubarPosition({ selection } = {}) {
   const wrapper = editorRoot.value;
   if (!selection || !wrapper) return;
@@ -520,30 +513,6 @@ function checkSelection(editorState) {
   if (hasSelection) setMenubarPosition(editorState);
 }
 
-function setURLWithQueryAndImageSize(size) {
-  if (!props.showImageResizeToolbar) {
-    return;
-  }
-  setURLWithQueryAndSize(selectedImageNode.value, size, editorView);
-  isImageNodeSelected.value = false;
-}
-
-function isEditorMouseFocusedOnAnImage() {
-  if (!props.showImageResizeToolbar) {
-    return;
-  }
-  selectedImageNode.value = document.querySelector(
-    'img.ProseMirror-selectednode'
-  );
-  if (selectedImageNode.value) {
-    isImageNodeSelected.value = !!selectedImageNode.value;
-    // Get the position of the selected node
-    setToolbarPosition();
-  } else {
-    isImageNodeSelected.value = false;
-  }
-}
-
 function emitOnChange() {
   emit('input', contentFromEditor());
   emit('update:modelValue', contentFromEditor());
@@ -563,21 +532,6 @@ function toggleSignatureInEditor(signatureEnabled) {
   emitOnChange();
 }
 
-function updateImgToolbarOnDelete() {
-  // check if the selected node is present or not on keyup
-  // this is needed because the user can select an image and then delete it
-  // in that case, the selected node will be null and we need to hide the toolbar
-  // otherwise, the toolbar will be visible even when the image is deleted and cause some errors
-  if (selectedImageNode.value) {
-    const hasImgSelectedNode = document.querySelector(
-      'img.ProseMirror-selectednode'
-    );
-    if (!hasImgSelectedNode) {
-      isImageNodeSelected.value = false;
-    }
-  }
-}
-
 function isEnterToSendEnabled() {
   return isEditorHotKeyEnabled('enter');
 }
@@ -586,17 +540,6 @@ function isCmdPlusEnterToSendEnabled() {
   return isEditorHotKeyEnabled('cmd_enter');
 }
 
-useKeyboardEvents({
-  'Alt+KeyP': {
-    action: focusEditorInputField,
-    allowOnFocusedInput: false,
-  },
-  'Alt+KeyL': {
-    action: focusEditorInputField,
-    allowOnFocusedInput: false,
-  },
-});
-
 function onImageInsertInEditor(fileUrl) {
   const { tr } = editorView.state;
 
@@ -617,7 +560,11 @@ async function uploadImageToStorage(file) {
       onImageInsertInEditor(fileUrl);
     }
     useAlert(
-      t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.IMAGE_UPLOAD_SUCCESS')
+      props.channelType === MESSAGE_SIGNATURE_FORMATTING
+        ? t(
+            'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.IMAGE_UPLOAD_SUCCESS'
+          )
+        : t('CONVERSATION.REPLYBOX.IMAGE_UPLOAD_SUCCESS')
     );
   } catch (error) {
     useAlert(
@@ -626,8 +573,8 @@ async function uploadImageToStorage(file) {
   }
 }
 
-function onFileChange() {
-  const file = imageUpload.value.files[0];
+function uploadImageIfWithinSizeLimit(file) {
+  if (!file) return;
   if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
     uploadImageToStorage(file);
   } else {
@@ -640,10 +587,61 @@ function onFileChange() {
       )
     );
   }
-
-  imageUpload.value = '';
 }
 
+function onFileChange() {
+  const input = imageUpload.value;
+  uploadImageIfWithinSizeLimit(input.files[0]);
+  input.value = '';
+}
+
+const allowsInlineImagePaste = computed(
+  () =>
+    !props.isPrivate &&
+    (props.channelType === INBOX_TYPES.EMAIL ||
+      props.channelType === INBOX_TYPES.WEB)
+);
+
+// Shift+Cmd/Ctrl+V on email/website: upload a clipboard image inline. This
+// gesture's native paste event carries no image, so clipboard.read() is the
+// only way to get the bytes. No preventDefault: text still pastes natively.
+async function pasteInlineImageFromClipboard() {
+  if (!editorView?.hasFocus()) return;
+  if (!allowsInlineImagePaste.value || !navigator.clipboard?.read) return;
+  try {
+    const items = await navigator.clipboard.read();
+    const imageItem = items.find(item =>
+      item.types.some(type => INLINE_IMAGE_PASTE_TYPES.includes(type))
+    );
+    if (!imageItem) return;
+    const imageType = imageItem.types.find(type =>
+      INLINE_IMAGE_PASTE_TYPES.includes(type)
+    );
+    const blob = await imageItem.getType(imageType);
+    uploadImageIfWithinSizeLimit(
+      new File([blob], 'pasted-image', { type: imageType })
+    );
+  } catch (error) {
+    // clipboard-read denied/unfocused (NotAllowedError): image can't be read.
+    // Text paste is unaffected — ProseMirror handles it from the native event.
+  }
+}
+
+useKeyboardEvents({
+  'Alt+KeyP': {
+    action: focusEditorInputField,
+    allowOnFocusedInput: false,
+  },
+  'Alt+KeyL': {
+    action: focusEditorInputField,
+    allowOnFocusedInput: false,
+  },
+  '$mod+Shift+KeyV': {
+    action: pasteInlineImageFromClipboard,
+    allowOnFocusedInput: true,
+  },
+});
+
 function handleLineBreakWhenEnterToSendEnabled(event) {
   if (
     hasPressedEnterAndNotCmdOrShift(event) &&
@@ -736,6 +734,9 @@ function createEditorView() {
   editorView = new EditorView(editor.value, {
     state: state,
     editable: () => !props.disabled,
+    nodeViews: {
+      image: imageResizeView,
+    },
     dispatchTransaction: tx => {
       state = state.apply(tx);
       editorView.updateState(state);
@@ -748,12 +749,10 @@ function createEditorView() {
       keyup: () => {
         if (!props.disabled) {
           typingIndicator.start();
-          updateImgToolbarOnDelete();
         }
       },
       keydown: (view, event) => !props.disabled && onKeydown(event),
       focus: () => !props.disabled && emit('focus'),
-      click: () => !props.disabled && isEditorMouseFocusedOnAnImage(),
       blur: () => {
         if (props.disabled) return;
         typingIndicator.stop();
@@ -918,23 +917,6 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
       @change="onFileChange"
     />
     <div ref="editor" />
-    <div
-      v-show="isImageNodeSelected && showImageResizeToolbar"
-      class="absolute shadow-md rounded-[6px] flex gap-1 py-1 px-1 bg-n-solid-3 outline outline-1 outline-n-weak text-n-slate-12"
-      :style="{
-        top: toolbarPosition.top,
-        left: toolbarPosition.left,
-      }"
-    >
-      <button
-        v-for="size in sizes"
-        :key="size.name"
-        class="text-xs font-medium rounded-[4px] outline outline-1 outline-n-strong px-1.5 py-0.5 hover:bg-n-slate-5"
-        @click="setURLWithQueryAndImageSize(size)"
-      >
-        {{ size.name }}
-      </button>
-    </div>
     <slot name="footer" />
   </div>
 </template>
@@ -997,10 +979,6 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
         @apply text-n-slate-11;
       }
     }
-
-    ol li {
-      @apply list-item list-decimal;
-    }
   }
 }
 

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

@@ -124,7 +124,6 @@ const copyConversationId = async () => {
         :size="32"
         :status="currentContact.availability_status"
         hide-offline-status
-        rounded-full
       />
       <div
         class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2"

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

@@ -46,6 +46,14 @@ const filterTypes = [
     filterOperators: OPERATOR_TYPES_2,
     attributeModel: 'standard',
   },
+  {
+    attributeKey: 'contact_id',
+    attributeI18nKey: 'CONTACT',
+    inputType: 'search_select',
+    dataType: 'number',
+    filterOperators: OPERATOR_TYPES_1,
+    attributeModel: 'standard',
+  },
   {
     attributeKey: 'display_id',
     attributeI18nKey: 'CONVERSATION_IDENTIFIER',
@@ -133,6 +141,10 @@ export const filterAttributeGroups = [
         key: 'team_id',
         i18nKey: 'TEAM_NAME',
       },
+      {
+        key: 'contact_id',
+        i18nKey: 'CONTACT',
+      },
       {
         key: 'display_id',
         i18nKey: 'CONVERSATION_IDENTIFIER',

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

@@ -0,0 +1,148 @@
+import { useFacebookPageConnect } from '../useFacebookPageConnect';
+import { useMapGetter } from 'dashboard/composables/store';
+import ChannelApi from 'dashboard/api/channels';
+import { setupFacebookSdk } from 'dashboard/routes/dashboard/settings/inbox/channels/whatsapp/utils';
+
+vi.mock('dashboard/composables/store', () => ({ useMapGetter: vi.fn() }));
+vi.mock('dashboard/api/channels', () => ({
+  default: { fetchFacebookPages: vi.fn() },
+}));
+vi.mock(
+  'dashboard/routes/dashboard/settings/inbox/channels/whatsapp/utils',
+  () => ({ setupFacebookSdk: vi.fn() })
+);
+
+const flushPromises = () =>
+  new Promise(resolve => {
+    setTimeout(resolve, 0);
+  });
+
+const createDeferred = () => {
+  let resolve;
+  let reject;
+  const promise = new Promise((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+};
+
+const ACCOUNT_ID = 42;
+const PAGES = [
+  { id: 'p1', name: 'Page One', access_token: 'page-token-1' },
+  { id: 'p2', name: 'Page Two', access_token: 'page-token-2', exists: true },
+];
+
+const pagesResponse = {
+  data: { data: { page_details: PAGES, user_access_token: 'long-token' } },
+};
+
+// FB.login invokes its callback with the given response.
+const stubLogin = response => {
+  window.FB = { login: vi.fn(callback => callback(response)) };
+};
+
+const connected = {
+  status: 'connected',
+  authResponse: { accessToken: 'user-token' },
+};
+
+describe('useFacebookPageConnect', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    window.chatwootConfig = { fbAppId: 'fb-app', fbApiVersion: 'v22.0' };
+    useMapGetter.mockReturnValue({ value: ACCOUNT_ID });
+    setupFacebookSdk.mockResolvedValue();
+    ChannelApi.fetchFacebookPages.mockResolvedValue(pagesResponse);
+    stubLogin(connected);
+  });
+
+  it('resolves the user token and pages on a connected login', async () => {
+    const { loginAndFetchPages } = useFacebookPageConnect();
+
+    await expect(loginAndFetchPages()).resolves.toEqual({
+      userAccessToken: 'long-token',
+      pages: PAGES,
+    });
+    expect(setupFacebookSdk).toHaveBeenCalledWith('fb-app', 'v22.0');
+    expect(ChannelApi.fetchFacebookPages).toHaveBeenCalledWith(
+      'user-token',
+      ACCOUNT_ID
+    );
+    expect(window.FB.login).toHaveBeenCalledWith(expect.any(Function), {
+      scope: expect.stringContaining('pages_show_list'),
+    });
+  });
+
+  it('resolves null when the user is not authorized', async () => {
+    stubLogin({ status: 'not_authorized' });
+    const { loginAndFetchPages } = useFacebookPageConnect();
+
+    await expect(loginAndFetchPages()).resolves.toBeNull();
+    expect(ChannelApi.fetchFacebookPages).not.toHaveBeenCalled();
+  });
+
+  it('resolves null on an unknown login status', async () => {
+    stubLogin({ status: 'unknown' });
+    const { loginAndFetchPages } = useFacebookPageConnect();
+
+    await expect(loginAndFetchPages()).resolves.toBeNull();
+  });
+
+  it('rejects when fetching pages fails', async () => {
+    ChannelApi.fetchFacebookPages.mockRejectedValue(new Error('fetch failed'));
+    const { loginAndFetchPages } = useFacebookPageConnect();
+
+    await expect(loginAndFetchPages()).rejects.toThrow('fetch failed');
+  });
+
+  it('rejects when the SDK fails to load', async () => {
+    const error = new Error('script load failed');
+    error.name = 'ScriptLoaderError';
+    setupFacebookSdk.mockRejectedValue(error);
+    const { loginAndFetchPages } = useFacebookPageConnect();
+
+    await expect(loginAndFetchPages()).rejects.toThrow('script load failed');
+  });
+
+  it('ignores a second call while a run is in flight', async () => {
+    const pending = createDeferred();
+    ChannelApi.fetchFacebookPages.mockReturnValue(pending.promise);
+
+    const { loginAndFetchPages } = useFacebookPageConnect();
+    const first = loginAndFetchPages();
+    const second = loginAndFetchPages();
+
+    await expect(second).resolves.toBeNull();
+
+    pending.resolve(pagesResponse);
+    await first;
+    expect(window.FB.login).toHaveBeenCalledTimes(1);
+  });
+
+  it('toggles isAuthenticating across a run', async () => {
+    const pending = createDeferred();
+    ChannelApi.fetchFacebookPages.mockReturnValue(pending.promise);
+
+    const { isAuthenticating, loginAndFetchPages } = useFacebookPageConnect();
+    expect(isAuthenticating.value).toBe(false);
+
+    const result = loginAndFetchPages();
+    await flushPromises();
+    expect(isAuthenticating.value).toBe(true);
+
+    pending.resolve(pagesResponse);
+    await result;
+    expect(isAuthenticating.value).toBe(false);
+  });
+
+  it('preloads the SDK once and reuses it for login', async () => {
+    const { preloadSdk, loginAndFetchPages } = useFacebookPageConnect();
+
+    preloadSdk();
+    preloadSdk();
+    await loginAndFetchPages();
+
+    expect(setupFacebookSdk).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,208 @@
+import { useWhatsappEmbeddedSignup } from '../useWhatsappEmbeddedSignup';
+import {
+  setupFacebookSdk,
+  initWhatsAppEmbeddedSignup,
+  createMessageHandler,
+} from 'dashboard/routes/dashboard/settings/inbox/channels/whatsapp/utils';
+
+vi.mock(
+  'dashboard/routes/dashboard/settings/inbox/channels/whatsapp/utils',
+  () => ({
+    setupFacebookSdk: vi.fn(),
+    initWhatsAppEmbeddedSignup: vi.fn(),
+    createMessageHandler: vi.fn(),
+    isValidBusinessData: vi.fn(data =>
+      Boolean(data && data.business_id && data.waba_id)
+    ),
+  })
+);
+
+const flushPromises = () =>
+  new Promise(resolve => {
+    setTimeout(resolve, 0);
+  });
+
+const createDeferred = () => {
+  let resolve;
+  let reject;
+  const promise = new Promise((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+};
+
+const VALID_BUSINESS = {
+  business_id: 'biz-1',
+  waba_id: 'waba-1',
+  phone_number_id: 'phone-1',
+};
+
+describe('useWhatsappEmbeddedSignup', () => {
+  // The mocked createMessageHandler captures the callback the composable
+  // registers, so tests can simulate Meta's WA_EMBEDDED_SIGNUP postMessages
+  // directly without the window-event + origin plumbing (that is covered by
+  // the utils' own tests).
+  let signupCallback;
+  let registeredListener;
+
+  const emit = data => signupCallback(data);
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    window.chatwootConfig = {
+      whatsappAppId: 'app-id',
+      whatsappConfigurationId: 'config-id',
+      whatsappApiVersion: 'v22.0',
+    };
+
+    setupFacebookSdk.mockResolvedValue();
+    createMessageHandler.mockImplementation(callback => {
+      signupCallback = callback;
+      registeredListener = () => {};
+      return registeredListener;
+    });
+  });
+
+  it('resolves credentials when the auth code arrives before the business data', async () => {
+    initWhatsAppEmbeddedSignup.mockResolvedValue('auth-code');
+
+    const { runEmbeddedSignup } = useWhatsappEmbeddedSignup();
+    const result = runEmbeddedSignup();
+
+    await flushPromises(); // SDK setup + FB.login resolve the code first
+    emit({ event: 'FINISH', data: VALID_BUSINESS });
+
+    await expect(result).resolves.toEqual({
+      code: 'auth-code',
+      business_id: 'biz-1',
+      waba_id: 'waba-1',
+      phone_number_id: 'phone-1',
+    });
+    expect(setupFacebookSdk).toHaveBeenCalledWith('app-id', 'v22.0');
+    expect(initWhatsAppEmbeddedSignup).toHaveBeenCalledWith('config-id');
+  });
+
+  it('resolves credentials when the business data arrives before the auth code', async () => {
+    const code = createDeferred();
+    initWhatsAppEmbeddedSignup.mockReturnValue(code.promise);
+
+    const { runEmbeddedSignup } = useWhatsappEmbeddedSignup();
+    const result = runEmbeddedSignup();
+
+    // Business data lands first, while FB.login is still pending.
+    emit({
+      event: 'FINISH_WHATSAPP_BUSINESS_APP_ONBOARDING',
+      data: VALID_BUSINESS,
+    });
+    code.resolve('late-code');
+
+    await expect(result).resolves.toEqual({
+      code: 'late-code',
+      business_id: 'biz-1',
+      waba_id: 'waba-1',
+      phone_number_id: 'phone-1',
+    });
+  });
+
+  it('defaults phone_number_id to an empty string when absent', async () => {
+    initWhatsAppEmbeddedSignup.mockResolvedValue('auth-code');
+
+    const { runEmbeddedSignup } = useWhatsappEmbeddedSignup();
+    const result = runEmbeddedSignup();
+
+    await flushPromises();
+    emit({
+      event: 'FINISH',
+      data: { business_id: 'biz-1', waba_id: 'waba-1' },
+    });
+
+    await expect(result).resolves.toMatchObject({ phone_number_id: '' });
+  });
+
+  it('resolves null when FB.login is cancelled', async () => {
+    initWhatsAppEmbeddedSignup.mockRejectedValue(new Error('Login cancelled'));
+
+    const { runEmbeddedSignup } = useWhatsappEmbeddedSignup();
+
+    await expect(runEmbeddedSignup()).resolves.toBeNull();
+  });
+
+  it('resolves null on a CANCEL event', async () => {
+    initWhatsAppEmbeddedSignup.mockReturnValue(createDeferred().promise);
+
+    const { runEmbeddedSignup } = useWhatsappEmbeddedSignup();
+    const result = runEmbeddedSignup();
+
+    emit({ event: 'CANCEL' });
+
+    await expect(result).resolves.toBeNull();
+  });
+
+  it('rejects with the Meta error message on an error event', async () => {
+    initWhatsAppEmbeddedSignup.mockReturnValue(createDeferred().promise);
+
+    const { runEmbeddedSignup } = useWhatsappEmbeddedSignup();
+    const result = runEmbeddedSignup();
+
+    emit({ event: 'error', error_message: 'WABA not eligible' });
+
+    await expect(result).rejects.toThrow('WABA not eligible');
+  });
+
+  it('rejects when the business data is invalid', async () => {
+    initWhatsAppEmbeddedSignup.mockReturnValue(createDeferred().promise);
+
+    const { runEmbeddedSignup } = useWhatsappEmbeddedSignup();
+    const result = runEmbeddedSignup();
+
+    emit({ event: 'FINISH', data: { business_id: 'biz-1' } }); // no waba_id
+
+    await expect(result).rejects.toThrow('Invalid business data');
+  });
+
+  it('rejects when the SDK or login fails for a non-cancel reason', async () => {
+    initWhatsAppEmbeddedSignup.mockRejectedValue(new Error('popup blocked'));
+
+    const { runEmbeddedSignup } = useWhatsappEmbeddedSignup();
+
+    await expect(runEmbeddedSignup()).rejects.toThrow('popup blocked');
+  });
+
+  it('ignores a second call while a run is in flight', async () => {
+    initWhatsAppEmbeddedSignup.mockResolvedValue('auth-code');
+
+    const { runEmbeddedSignup } = useWhatsappEmbeddedSignup();
+    const first = runEmbeddedSignup();
+    const second = runEmbeddedSignup();
+
+    await expect(second).resolves.toBeNull();
+
+    // Let the first run finish so it doesn't leak into the next test.
+    await flushPromises();
+    emit({ event: 'FINISH', data: VALID_BUSINESS });
+    await first;
+
+    expect(setupFacebookSdk).toHaveBeenCalledTimes(1);
+  });
+
+  it('toggles isAuthenticating and removes the listener once settled', async () => {
+    initWhatsAppEmbeddedSignup.mockResolvedValue('auth-code');
+    const removeSpy = vi.spyOn(window, 'removeEventListener');
+
+    const { isAuthenticating, runEmbeddedSignup } = useWhatsappEmbeddedSignup();
+    expect(isAuthenticating.value).toBe(false);
+
+    const result = runEmbeddedSignup();
+    expect(isAuthenticating.value).toBe(true);
+
+    await flushPromises();
+    emit({ event: 'FINISH', data: VALID_BUSINESS });
+    await result;
+
+    expect(isAuthenticating.value).toBe(false);
+    expect(removeSpy).toHaveBeenCalledWith('message', registeredListener);
+    removeSpy.mockRestore();
+  });
+});

app/javascript/dashboard/composables/useFacebookPageConnect.js

@@ -0,0 +1,81 @@
+import { ref } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import ChannelApi from 'dashboard/api/channels';
+import { setupFacebookSdk } from 'dashboard/routes/dashboard/settings/inbox/channels/whatsapp/utils';
+
+// Page-management + messaging scopes required to list pages and create a
+// Channel::FacebookPage inbox (mirrors the standalone settings flow).
+const FB_PAGE_SCOPES =
+  'pages_manage_metadata,business_management,pages_messaging,instagram_basic,pages_show_list,pages_read_engagement,instagram_manage_messages';
+
+// Headless half of the Facebook Page connect flow: load the Meta SDK, run
+// FB.login for page scopes, and fetch the user's pages. The caller owns the
+// page-picker UI and the channel creation, because choosing a page is an
+// interactive step (a user can manage several pages).
+//
+// Split into preloadSdk() + loginAndFetchPages() for popup safety: FB.login
+// opens a popup and needs the click's transient activation. Preloading the SDK
+// when the picker opens means the click-time `await` resolves within that
+// activation window; a cold load resolves on the script's `load` task seconds
+// later, after activation has expired, and the popup gets blocked.
+export function useFacebookPageConnect() {
+  const accountId = useMapGetter('getCurrentAccountId');
+  const isAuthenticating = ref(false);
+
+  let sdkSetupPromise = null;
+
+  // Idempotent — call this when the picker UI opens. A failed load clears the
+  // cache so a later attempt can retry instead of being stuck on a rejection.
+  const preloadSdk = () => {
+    if (!sdkSetupPromise) {
+      sdkSetupPromise = setupFacebookSdk(
+        window.chatwootConfig?.fbAppId,
+        window.chatwootConfig?.fbApiVersion
+      ).catch(error => {
+        sdkSetupPromise = null;
+        throw error;
+      });
+    }
+    return sdkSetupPromise;
+  };
+
+  // FB.login never rejects; resolve the user access token on success and null
+  // for any other status (closed popup, not_authorized, unknown).
+  const login = () =>
+    new Promise(resolve => {
+      window.FB.login(
+        response => {
+          resolve(
+            response.status === 'connected'
+              ? response.authResponse?.accessToken || null
+              : null
+          );
+        },
+        { scope: FB_PAGE_SCOPES }
+      );
+    });
+
+  // Resolves { userAccessToken, pages } on success, null when the user cancels,
+  // and rejects on SDK-load or page-fetch failure (the caller maps it to UI).
+  const loginAndFetchPages = async () => {
+    if (isAuthenticating.value) return null;
+    isAuthenticating.value = true;
+    try {
+      await preloadSdk();
+      const token = await login();
+      if (!token) return null;
+
+      const response = await ChannelApi.fetchFacebookPages(
+        token,
+        accountId.value
+      );
+      const { page_details: pages, user_access_token: userAccessToken } =
+        response.data.data;
+      return { userAccessToken, pages };
+    } finally {
+      isAuthenticating.value = false;
+    }
+  };
+
+  return { isAuthenticating, preloadSdk, loginAndFetchPages };
+}

app/javascript/dashboard/composables/useWhatsappEmbeddedSignup.js

@@ -0,0 +1,96 @@
+import { ref } from 'vue';
+import {
+  setupFacebookSdk,
+  initWhatsAppEmbeddedSignup,
+  createMessageHandler,
+  isValidBusinessData,
+} from 'dashboard/routes/dashboard/settings/inbox/channels/whatsapp/utils';
+
+// Drives Meta's WhatsApp embedded-signup popup (Facebook JS SDK). FB.login()
+// resolves an auth `code` while the WABA identifiers (waba_id, phone_number_id)
+// arrive separately over a postMessage event — order isn't guaranteed, so we
+// hold both and resolve once both are present.
+//
+// `runEmbeddedSignup` returns the signup credentials; the caller exchanges them
+// for an inbox via `inboxes/createWhatsAppEmbeddedSignup` and owns its own UX
+// (alerts, navigation, etc). Resolves `null` when the user cancels the popup;
+// rejects on SDK load or signup errors. The window listener is scoped to a
+// single run, so this is safe to call from anywhere without lifecycle wiring.
+export function useWhatsappEmbeddedSignup() {
+  const isAuthenticating = ref(false);
+
+  const runEmbeddedSignup = () => {
+    if (isAuthenticating.value) return Promise.resolve(null);
+    isAuthenticating.value = true;
+
+    return new Promise((resolve, reject) => {
+      let authCode = null;
+      let businessData = null;
+      let settled = false;
+      let messageHandler;
+
+      const settle = (fn, value) => {
+        if (settled) return;
+        settled = true;
+        window.removeEventListener('message', messageHandler);
+        isAuthenticating.value = false;
+        fn(value);
+      };
+
+      // Both the auth code and the business data arrive asynchronously and in
+      // no fixed order; only resolve once we're holding both.
+      const resolveIfReady = () => {
+        if (!authCode || !businessData) return;
+        settle(resolve, {
+          code: authCode,
+          business_id: businessData.business_id,
+          waba_id: businessData.waba_id,
+          phone_number_id: businessData.phone_number_id || '',
+        });
+      };
+
+      messageHandler = createMessageHandler(data => {
+        if (
+          data.event === 'FINISH' ||
+          data.event === 'FINISH_WHATSAPP_BUSINESS_APP_ONBOARDING'
+        ) {
+          if (!isValidBusinessData(data.data)) {
+            settle(reject, new Error('Invalid business data'));
+            return;
+          }
+          businessData = data.data;
+          resolveIfReady();
+        } else if (data.event === 'CANCEL') {
+          settle(resolve, null);
+        } else if (data.event === 'error') {
+          settle(reject, new Error(data.error_message || 'Signup error'));
+        }
+      });
+
+      window.addEventListener('message', messageHandler);
+
+      (async () => {
+        try {
+          await setupFacebookSdk(
+            window.chatwootConfig?.whatsappAppId,
+            window.chatwootConfig?.whatsappApiVersion
+          );
+          authCode = await initWhatsAppEmbeddedSignup(
+            window.chatwootConfig?.whatsappConfigurationId
+          );
+          resolveIfReady();
+        } catch (error) {
+          // FB.login() rejects with 'Login cancelled' when the user dismisses
+          // the popup — treat it as a cancel rather than an error.
+          if (error.message === 'Login cancelled') {
+            settle(resolve, null);
+          } else {
+            settle(reject, error);
+          }
+        }
+      })();
+    });
+  };
+
+  return { isAuthenticating, runEmbeddedSignup };
+}

app/javascript/dashboard/constants/editor.js

@@ -14,6 +14,7 @@ export const FORMATTING = {
       'link',
       'bulletList',
       'orderedList',
+      'imageUpload',
       'undo',
       'redo',
     ],
@@ -30,6 +31,7 @@ export const FORMATTING = {
       'strike',
       'bulletList',
       'orderedList',
+      'imageUpload',
       'undo',
       'redo',
     ],
@@ -263,23 +265,3 @@ export const MARKDOWN_PATTERNS = [
     ],
   },
 ];
-
-// Editor image resize options for Message Editor
-export const MESSAGE_EDITOR_IMAGE_RESIZES = [
-  {
-    name: 'Small',
-    height: '24px',
-  },
-  {
-    name: 'Medium',
-    height: '48px',
-  },
-  {
-    name: 'Large',
-    height: '72px',
-  },
-  {
-    name: 'Original Size',
-    height: 'auto',
-  },
-];

app/javascript/dashboard/helper/customViewsHelper.js

@@ -37,6 +37,13 @@ export const getValuesName = (values, list, idKey, nameKey) => {
   };
 };
 
+const getValuesForContact = (values, contacts) => ({
+  id: values[0],
+  name:
+    contacts?.find(contact => contact.id === values[0])?.name ||
+    `Contact #${values[0]}`,
+});
+
 export const getValuesForStatus = values => {
   return values.map(value => ({ id: value, name: value }));
 };
@@ -84,6 +91,7 @@ export const getValuesForFilter = (filter, params) => {
     campaigns,
     labels,
     priority,
+    contacts,
   } = params;
   switch (attribute_key) {
     case 'status':
@@ -94,6 +102,8 @@ export const getValuesForFilter = (filter, params) => {
       return getValuesName(values, inboxes, 'id', 'name');
     case 'team_id':
       return getValuesName(values, teams, 'id', 'name');
+    case 'contact_id':
+      return getValuesForContact(values, contacts);
     case 'campaign_id':
       return getValuesName(values, campaigns, 'id', 'title');
     case 'labels':

app/javascript/dashboard/helper/editorHelper.js

@@ -379,31 +379,6 @@ export const findNodeToInsertImage = (editorState, fileUrl) => {
   };
 };
 
-/**
- * Set URL with query and size.
- *
- * @param {Object} selectedImageNode - The current selected node.
- * @param {Object} size - The size to set.
- * @param {Object} editorView - The editor view.
- */
-export function setURLWithQueryAndSize(selectedImageNode, size, editorView) {
-  if (selectedImageNode) {
-    // Create and apply the transaction
-    const tr = editorView.state.tr.setNodeMarkup(
-      editorView.state.selection.from,
-      null,
-      {
-        src: selectedImageNode.src,
-        height: size.height,
-      }
-    );
-
-    if (tr.docChanged) {
-      editorView.dispatch(tr);
-    }
-  }
-}
-
 /**
  * Strips unsupported markdown formatting from content based on the editor schema.
  * This ensures canned responses with rich formatting can be inserted into channels

app/javascript/dashboard/helper/portalHelper.js

@@ -159,6 +159,13 @@ export const LOCALE_MENU_ITEMS = {
     value: 'publish',
     icon: 'i-lucide-eye',
   },
+  customizeContent: {
+    label:
+      'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.CUSTOMIZE_CONTENT',
+    action: 'customize-content',
+    value: 'customize-content',
+    icon: 'i-lucide-pencil',
+  },
   delete: {
     label: 'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.DELETE',
     action: 'delete',
@@ -172,20 +179,28 @@ const disableLocaleMenuItems = menuItems =>
 
 export const buildLocaleMenuItems = ({ isDefault, isDraft }) => {
   if (isDefault) {
-    return disableLocaleMenuItems([
-      LOCALE_MENU_ITEMS.makeDefault,
-      LOCALE_MENU_ITEMS.moveToDraft,
-      LOCALE_MENU_ITEMS.delete,
-    ]);
+    return [
+      ...disableLocaleMenuItems([
+        LOCALE_MENU_ITEMS.makeDefault,
+        LOCALE_MENU_ITEMS.moveToDraft,
+      ]),
+      LOCALE_MENU_ITEMS.customizeContent,
+      ...disableLocaleMenuItems([LOCALE_MENU_ITEMS.delete]),
+    ];
   }
 
   if (isDraft) {
-    return [LOCALE_MENU_ITEMS.publishLocale, LOCALE_MENU_ITEMS.delete];
+    return [
+      LOCALE_MENU_ITEMS.publishLocale,
+      LOCALE_MENU_ITEMS.customizeContent,
+      LOCALE_MENU_ITEMS.delete,
+    ];
   }
 
   return [
     LOCALE_MENU_ITEMS.makeDefault,
     LOCALE_MENU_ITEMS.moveToDraft,
+    LOCALE_MENU_ITEMS.customizeContent,
     LOCALE_MENU_ITEMS.delete,
   ];
 };

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

@@ -273,6 +273,41 @@ describe('customViewsHelper', () => {
       };
       expect(generateValuesForEditCustomViews(filter, params)).toEqual('1');
     });
+
+    it('returns contact name for contact filters when contact is available', () => {
+      const filter = {
+        attribute_key: 'contact_id',
+        filter_operator: 'equal_to',
+        values: [123],
+      };
+      const params = {
+        contacts: [{ id: 123, name: 'John Doe' }],
+        filterTypes: advancedFilterTypes,
+        allCustomAttributes: [],
+      };
+
+      expect(generateValuesForEditCustomViews(filter, params)).toEqual({
+        id: 123,
+        name: 'John Doe',
+      });
+    });
+
+    it('returns fallback contact display value when contact is not available', () => {
+      const filter = {
+        attribute_key: 'contact_id',
+        filter_operator: 'equal_to',
+        values: [123],
+      };
+      const params = {
+        filterTypes: advancedFilterTypes,
+        allCustomAttributes: [],
+      };
+
+      expect(generateValuesForEditCustomViews(filter, params)).toEqual({
+        id: 123,
+        name: 'Contact #123',
+      });
+    });
   });
 
   describe('#generateCustomAttributesInputType', () => {

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

@@ -16,7 +16,6 @@ import {
   insertAtCursor,
   removeSignature,
   replaceSignature,
-  setURLWithQueryAndSize,
   stripInlineBase64Images,
   stripUnsupportedFormatting,
   stripUnsupportedMarkdown,
@@ -653,71 +652,6 @@ describe('findNodeToInsertImage', () => {
   });
 });
 
-describe('setURLWithQueryAndSize', () => {
-  let selectedNode;
-  let editorView;
-
-  beforeEach(() => {
-    selectedNode = {
-      setAttribute: vi.fn(),
-    };
-
-    const tr = {
-      setNodeMarkup: vi.fn().mockReturnValue({
-        docChanged: true,
-      }),
-    };
-
-    const state = {
-      selection: { from: 0 },
-      tr,
-    };
-
-    editorView = {
-      state,
-      dispatch: vi.fn(),
-    };
-  });
-
-  it('updates the URL with the given size and updates the editor view', () => {
-    const size = { height: '20px' };
-
-    setURLWithQueryAndSize(selectedNode, size, editorView);
-
-    // Check if the editor view is updated
-    expect(editorView.dispatch).toHaveBeenCalledTimes(1);
-  });
-
-  it('updates the URL with the given size and updates the editor view with original size', () => {
-    const size = { height: 'auto' };
-
-    setURLWithQueryAndSize(selectedNode, size, editorView);
-
-    // Check if the editor view is updated
-    expect(editorView.dispatch).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not update the editor view if the document has not changed', () => {
-    editorView.state.tr.setNodeMarkup = vi.fn().mockReturnValue({
-      docChanged: false,
-    });
-
-    const size = { height: '20px' };
-
-    setURLWithQueryAndSize(selectedNode, size, editorView);
-
-    // Check if the editor view dispatch was not called
-    expect(editorView.dispatch).not.toHaveBeenCalled();
-  });
-
-  it('does not perform any operations if selectedNode is not provided', () => {
-    setURLWithQueryAndSize(null, { height: '20px' }, editorView);
-
-    // Ensure the dispatch method wasn't called
-    expect(editorView.dispatch).not.toHaveBeenCalled();
-  });
-});
-
 describe('getContentNode', () => {
   let mockEditorView;
 

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

@@ -64,4 +64,25 @@ describe('#filterQueryGenerator', () => {
       filterQueryGenerator(testData).payload.every(i => Array.isArray(i.values))
     ).toBe(true);
   });
+
+  it('serializes a selected contact object to contact id', () => {
+    const result = filterQueryGenerator([
+      {
+        attribute_key: 'contact_id',
+        filter_operator: 'equal_to',
+        values: { id: 123, name: 'Jane Doe' },
+        query_operator: 'and',
+      },
+    ]);
+
+    expect(result).toMatchObject({
+      payload: [
+        {
+          attribute_key: 'contact_id',
+          filter_operator: 'equal_to',
+          values: [123],
+        },
+      ],
+    });
+  });
 });

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

@@ -74,37 +74,40 @@ describe('PortalHelper', () => {
   });
 
   describe('buildLocaleMenuItems', () => {
-    it('returns disabled actions for the default locale', () => {
+    it('disables other actions but keeps customize enabled for the default locale', () => {
+      const items = buildLocaleMenuItems({ isDefault: true, isDraft: false });
+      const customize = items.find(item => item.action === 'customize-content');
+
+      expect(customize).toBeTruthy();
+      expect(customize.disabled).toBeFalsy();
       expect(
-        buildLocaleMenuItems({
-          isDefault: true,
-          isDraft: false,
-        })
-      ).toEqual(
-        expect.arrayContaining([
-          expect.objectContaining({ action: 'change-default', disabled: true }),
-          expect.objectContaining({ action: 'move-to-draft', disabled: true }),
-          expect.objectContaining({ action: 'delete', disabled: true }),
-        ])
-      );
+        items
+          .filter(item => item.action !== 'customize-content')
+          .every(item => item.disabled)
+      ).toBe(true);
     });
 
-    it('returns publish and delete actions for draft locales', () => {
+    it('returns publish, customize, and delete actions for draft locales', () => {
       expect(
         buildLocaleMenuItems({
           isDefault: false,
           isDraft: true,
         }).map(({ action }) => action)
-      ).toEqual(['publish-locale', 'delete']);
+      ).toEqual(['publish-locale', 'customize-content', 'delete']);
     });
 
-    it('returns default, draft, and delete actions for live locales', () => {
+    it('returns default, draft, customize, and delete actions for live locales', () => {
       expect(
         buildLocaleMenuItems({
           isDefault: false,
           isDraft: false,
         }).map(({ action }) => action)
-      ).toEqual(['change-default', 'move-to-draft', 'delete']);
+      ).toEqual([
+        'change-default',
+        'move-to-draft',
+        'customize-content',
+        'delete',
+      ]);
     });
   });
 });

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

@@ -19,6 +19,8 @@
       "OR": "OR"
     },
     "INPUT_PLACEHOLDER": "Enter value",
+    "CONTACT_SEARCH_PLACEHOLDER": "Search contacts",
+    "CONTACT_FALLBACK": "Contact #{id}",
     "OPERATOR_LABELS": {
       "equal_to": "Equal to",
       "not_equal_to": "Not equal to",
@@ -49,6 +51,7 @@
       "ASSIGNEE_NAME": "Assignee name",
       "INBOX_NAME": "Inbox name",
       "TEAM_NAME": "Team name",
+      "CONTACT": "Contact",
       "CONVERSATION_IDENTIFIER": "Conversation identifier",
       "CAMPAIGN_NAME": "Campaign name",
       "LABELS": "Labels",

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

@@ -233,6 +233,7 @@
       "TIP_AUDIORECORDER_ERROR": "Could not open the audio",
       "AUDIO_CONVERSION_FAILED": "Audio conversion failed. Please try again.",
       "DRAG_DROP": "Drag and drop here to attach",
+      "IMAGE_UPLOAD_SUCCESS": "Image uploaded successfully",
       "START_AUDIO_RECORDING": "Start audio recording",
       "STOP_AUDIO_RECORDING": "Stop audio recording",
       "COPILOT_THINKING": "Copilot is thinking",

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

@@ -700,9 +700,27 @@
           "MAKE_DEFAULT": "Make default",
           "MOVE_TO_DRAFT": "Move to draft",
           "PUBLISH_LOCALE": "Publish locale",
+          "CUSTOMIZE_CONTENT": "Localize content",
           "DELETE": "Delete"
         }
       },
+      "CONTENT_DIALOG": {
+        "TITLE": "Localize content",
+        "DESCRIPTION": "Set values specific to this locale. Anything left blank falls back to the default locale.",
+        "NAME": {
+          "LABEL": "Name"
+        },
+        "PAGE_TITLE": {
+          "LABEL": "Page title"
+        },
+        "HEADER_TEXT": {
+          "LABEL": "Header text"
+        },
+        "API": {
+          "SUCCESS_MESSAGE": "Locale content updated successfully",
+          "ERROR_MESSAGE": "Unable to update locale content. Try again."
+        }
+      },
       "ADD_LOCALE_DIALOG": {
         "TITLE": "Add a new locale",
         "DESCRIPTION": "Select the language in which this article will be written. This will be added to your list of translations, and you can add more later.",

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

@@ -188,7 +188,6 @@ export default {
           :status="contact.availability_status"
           :size="48"
           hide-offline-status
-          rounded-full
         />
       </div>
 

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue

@@ -1,20 +1,16 @@
 <script>
-/* eslint-env browser */
-/* global FB */
 import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
-import { useAccount } from 'dashboard/composables/useAccount';
+import { useFacebookPageConnect } from 'dashboard/composables/useFacebookPageConnect';
 import { required } from '@vuelidate/validators';
 import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
 
-import ChannelApi from '../../../../../api/channels';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 import router from '../../../../index';
 import { useBranding } from 'shared/composables/useBranding';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
 
-import { loadScript } from 'dashboard/helper/DOMHelpers';
 import * as Sentry from '@sentry/vue';
 
 export default {
@@ -25,11 +21,12 @@ export default {
     ComboBox,
   },
   setup() {
-    const { accountId } = useAccount();
     const { replaceInstallationName } = useBranding();
+    const { preloadSdk, loginAndFetchPages } = useFacebookPageConnect();
     return {
-      accountId,
       replaceInstallationName,
+      preloadSdk,
+      loginAndFetchPages,
       v$: useVuelidate(),
     };
   },
@@ -37,9 +34,7 @@ export default {
     return {
       isCreating: false,
       hasError: false,
-      omniauth_token: '',
       user_access_token: '',
-      channel: 'facebook',
       selectedPage: { name: null, id: null },
       pageName: '',
       pageList: [],
@@ -78,24 +73,29 @@ export default {
   },
 
   mounted() {
-    window.fbAsyncInit = this.runFBInit;
+    // Warm the SDK so the login click opens its popup within the gesture's
+    // activation window (see useFacebookPageConnect).
+    this.preloadSdk();
   },
 
   methods: {
     async startLogin() {
       this.hasLoginStarted = true;
       try {
-        // this will load the SDK in a promise, and resolve it when the sdk is loaded
-        // in case the SDK is already present, it will resolve immediately
-        await this.loadFBsdk();
-        this.runFBInit(); // run init anyway, `tryFBlogin` won't wait for `fbAsyncInit` otherwise.
-        this.tryFBlogin(); // make an attempt to login
+        const result = await this.loginAndFetchPages();
+        if (!result) {
+          // Cancelled popup / not authorized — surface a generic auth error.
+          this.hasError = true;
+          this.errorStateMessage = this.$t('INBOX_MGMT.DETAILS.ERROR_FB_AUTH');
+          this.errorStateDescription = '';
+          return;
+        }
+        this.pageList = result.pages;
+        this.user_access_token = result.userAccessToken;
       } catch (error) {
         if (error.name === 'ScriptLoaderError') {
-          // if the error was related to script loading, we show a toast
           useAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_LOADING'));
         } else {
-          // if the error was anything else, we capture it and show a toast
           Sentry.captureException(error);
           useAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_AUTH'));
         }
@@ -114,81 +114,6 @@ export default {
       this.v$.selectedPage.$touch();
     },
 
-    initChannelAuth(channel) {
-      if (channel === 'facebook') {
-        this.loadFBsdk();
-      }
-    },
-
-    runFBInit() {
-      FB.init({
-        appId: window.chatwootConfig.fbAppId,
-        xfbml: true,
-        version: window.chatwootConfig.fbApiVersion,
-        status: true,
-      });
-      window.fbSDKLoaded = true;
-      FB.AppEvents.logPageView();
-    },
-
-    async loadFBsdk() {
-      return loadScript('https://connect.facebook.net/en_US/sdk.js', {
-        id: 'facebook-jssdk',
-      });
-    },
-
-    tryFBlogin() {
-      FB.login(
-        response => {
-          this.hasError = false;
-          if (response.status === 'connected') {
-            this.fetchPages(response.authResponse.accessToken);
-          } else if (response.status === 'not_authorized') {
-            // eslint-disable-next-line no-console
-            console.error('FACEBOOK AUTH ERROR', response);
-            this.hasError = true;
-            // The person is logged into Facebook, but not your app.
-            this.errorStateMessage = this.$t(
-              'INBOX_MGMT.DETAILS.ERROR_FB_UNAUTHORIZED'
-            );
-            this.errorStateDescription = this.$t(
-              'INBOX_MGMT.DETAILS.ERROR_FB_UNAUTHORIZED_HELP'
-            );
-          } else {
-            // eslint-disable-next-line no-console
-            console.error('FACEBOOK AUTH ERROR', response);
-            this.hasError = true;
-            // The person is not logged into Facebook, so we're not sure if
-            // they are logged into this app or not.
-            this.errorStateMessage = this.$t(
-              'INBOX_MGMT.DETAILS.ERROR_FB_AUTH'
-            );
-            this.errorStateDescription = '';
-          }
-        },
-        {
-          scope:
-            'pages_manage_metadata,business_management,pages_messaging,instagram_basic,pages_show_list,pages_read_engagement,instagram_manage_messages',
-        }
-      );
-    },
-
-    async fetchPages(_token) {
-      try {
-        const response = await ChannelApi.fetchFacebookPages(
-          _token,
-          this.accountId
-        );
-        const {
-          data: { data },
-        } = response;
-        this.pageList = data.page_details;
-        this.user_access_token = data.user_access_token;
-      } catch (error) {
-        // Ignore error
-      }
-    },
-
     channelParams() {
       return {
         user_access_token: this.user_access_token,

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/WhatsappEmbeddedSignup.vue

@@ -1,21 +1,16 @@
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { ref, computed } from 'vue';
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import { useI18n, I18nT } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
+import { useWhatsappEmbeddedSignup } from 'dashboard/composables/useWhatsappEmbeddedSignup';
 import Icon from 'next/icon/Icon.vue';
 import NextButton from 'next/button/Button.vue';
 import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
 import InboxesAPI from 'dashboard/api/inboxes';
 import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
 import globalConstants from 'dashboard/constants/globals.js';
-import {
-  setupFacebookSdk,
-  initWhatsAppEmbeddedSignup,
-  createMessageHandler,
-  isValidBusinessData,
-} from './whatsapp/utils';
 
 const props = defineProps({
   enableCallingOnComplete: {
@@ -27,15 +22,10 @@ const props = defineProps({
 const store = useStore();
 const router = useRouter();
 const { t } = useI18n();
+const { isAuthenticating, runEmbeddedSignup } = useWhatsappEmbeddedSignup();
 
-// State
-const fbSdkLoaded = ref(false);
 const isProcessing = ref(false);
 const processingMessage = ref('');
-const authCodeReceived = ref(false);
-const authCode = ref(null);
-const businessData = ref(null);
-const isAuthenticating = ref(false);
 
 const benefits = computed(() => [
   {
@@ -54,25 +44,6 @@ const benefits = computed(() => [
 
 const showLoader = computed(() => isAuthenticating.value || isProcessing.value);
 
-// Error handling
-const handleSignupError = data => {
-  isProcessing.value = false;
-  authCodeReceived.value = false;
-  isAuthenticating.value = false;
-
-  const errorMessage =
-    data.error ||
-    data.message ||
-    t('INBOX_MGMT.ADD.WHATSAPP.API.ERROR_MESSAGE');
-  useAlert(errorMessage);
-};
-
-const handleSignupCancellation = () => {
-  isProcessing.value = false;
-  authCodeReceived.value = false;
-  isAuthenticating.value = false;
-};
-
 const enableCallingForInbox = async inboxId => {
   try {
     await InboxesAPI.enableWhatsappCalling(inboxId);
@@ -86,14 +57,12 @@ const enableCallingForInbox = async inboxId => {
 const handleSignupSuccess = async inboxData => {
   if (inboxData && inboxData.id) {
     if (props.enableCallingOnComplete) {
-      isProcessing.value = true;
       processingMessage.value = t(
         'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.ENABLING_CALLING'
       );
       await enableCallingForInbox(inboxData.id);
     }
     isProcessing.value = false;
-    isAuthenticating.value = false;
     useAlert(t('INBOX_MGMT.FINISH.MESSAGE'));
     router.replace({
       name: 'settings_inboxes_add_agents',
@@ -104,7 +73,6 @@ const handleSignupSuccess = async inboxData => {
     });
   } else {
     isProcessing.value = false;
-    isAuthenticating.value = false;
     useAlert(t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.SUCCESS_FALLBACK'));
     router.replace({
       name: 'settings_inbox_list',
@@ -112,12 +80,21 @@ const handleSignupSuccess = async inboxData => {
   }
 };
 
-// Signup flow
-const completeSignupFlow = async businessDataParam => {
-  if (!authCodeReceived.value || !authCode.value) {
-    handleSignupError({
-      error: t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.AUTH_NOT_COMPLETED'),
-    });
+const launchEmbeddedSignup = async () => {
+  let credentials;
+  try {
+    credentials = await runEmbeddedSignup();
+  } catch (error) {
+    useAlert(
+      error.message ||
+        t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.SDK_LOAD_ERROR')
+    );
+    return;
+  }
+
+  // Resolves null when the user dismisses the Meta popup.
+  if (!credentials) {
+    useAlert(t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.CANCELLED'));
     return;
   }
 
@@ -125,130 +102,20 @@ const completeSignupFlow = async businessDataParam => {
   processingMessage.value = t(
     'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.PROCESSING'
   );
-
   try {
-    const params = {
-      code: authCode.value,
-      business_id: businessDataParam.business_id,
-      waba_id: businessDataParam.waba_id,
-      phone_number_id: businessDataParam?.phone_number_id || '',
-    };
-
-    const responseData = await store.dispatch(
+    const inboxData = await store.dispatch(
       'inboxes/createWhatsAppEmbeddedSignup',
-      params
+      credentials
     );
-
-    authCode.value = null;
-    handleSignupSuccess(responseData);
+    await handleSignupSuccess(inboxData);
   } catch (error) {
-    const errorMessage =
+    isProcessing.value = false;
+    useAlert(
       parseAPIErrorResponse(error) ||
-      t('INBOX_MGMT.ADD.WHATSAPP.API.ERROR_MESSAGE');
-    handleSignupError({ error: errorMessage });
+        t('INBOX_MGMT.ADD.WHATSAPP.API.ERROR_MESSAGE')
+    );
   }
 };
-
-// Message handling
-const handleEmbeddedSignupData = async data => {
-  if (
-    data.event === 'FINISH' ||
-    data.event === 'FINISH_WHATSAPP_BUSINESS_APP_ONBOARDING'
-  ) {
-    const businessDataLocal = data.data;
-
-    if (isValidBusinessData(businessDataLocal)) {
-      businessData.value = businessDataLocal;
-      if (authCodeReceived.value && authCode.value) {
-        await completeSignupFlow(businessDataLocal);
-      } else {
-        processingMessage.value = t(
-          'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.WAITING_FOR_AUTH'
-        );
-      }
-    } else {
-      handleSignupError({
-        error: t(
-          'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.INVALID_BUSINESS_DATA'
-        ),
-      });
-    }
-  } else if (data.event === 'CANCEL') {
-    handleSignupCancellation();
-  } else if (data.event === 'error') {
-    handleSignupError({
-      error:
-        data.error_message ||
-        t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.SIGNUP_ERROR'),
-      error_id: data.error_id,
-      session_id: data.session_id,
-    });
-  }
-};
-
-const handleSignupMessage = createMessageHandler(handleEmbeddedSignupData);
-
-const launchEmbeddedSignup = async () => {
-  try {
-    isAuthenticating.value = true;
-    processingMessage.value = t(
-      'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.AUTH_PROCESSING'
-    );
-
-    await setupFacebookSdk(
-      window.chatwootConfig?.whatsappAppId,
-      window.chatwootConfig?.whatsappApiVersion
-    );
-    fbSdkLoaded.value = true;
-
-    const code = await initWhatsAppEmbeddedSignup(
-      window.chatwootConfig?.whatsappConfigurationId
-    );
-
-    authCode.value = code;
-    authCodeReceived.value = true;
-    processingMessage.value = t(
-      'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.WAITING_FOR_BUSINESS_INFO'
-    );
-
-    if (businessData.value) {
-      completeSignupFlow(businessData.value);
-    }
-  } catch (error) {
-    if (error.message === 'Login cancelled') {
-      isProcessing.value = false;
-      isAuthenticating.value = false;
-      useAlert(t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.CANCELLED'));
-    } else {
-      handleSignupError({
-        error:
-          error.message ||
-          t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.SDK_LOAD_ERROR'),
-      });
-    }
-  }
-};
-
-// Lifecycle
-const setupMessageListener = () => {
-  window.addEventListener('message', handleSignupMessage);
-};
-
-const cleanupMessageListener = () => {
-  window.removeEventListener('message', handleSignupMessage);
-};
-
-const initialize = () => {
-  setupMessageListener();
-};
-
-onMounted(() => {
-  initialize();
-});
-
-onBeforeUnmount(() => {
-  cleanupMessageListener();
-});
 </script>
 
 <template>

app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue

@@ -48,7 +48,6 @@ const updateSignature = () => {
       :placeholder="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE.PLACEHOLDER')"
       channel-type="Context::MessageSignature"
       :enable-suggestions="false"
-      show-image-resize-toolbar
     />
     <div>
       <NextButton

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

@@ -73,6 +73,12 @@ const getValueFromConversation = (conversation, attributeKey) => {
       return conversation.display_id || conversation.id;
     case 'assignee_id':
       return conversation.meta?.assignee?.id;
+    case 'contact_id':
+      return (
+        conversation.meta?.sender?.id ||
+        conversation.contact?.id ||
+        conversation.contact_id
+      );
     case 'inbox_id':
       return conversation.inbox_id;
     case 'team_id':

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

@@ -244,6 +244,32 @@ describe('filterHelpers', () => {
       expect(matchesFilters(conversation, filters)).toBe(false);
     });
 
+    it('should match conversation with equal_to operator for contact_id', () => {
+      const conversation = { meta: { sender: { id: 42 } } };
+      const filters = [
+        {
+          attribute_key: 'contact_id',
+          filter_operator: 'equal_to',
+          values: { id: 42, name: 'Jane Doe' },
+          query_operator: 'and',
+        },
+      ];
+      expect(matchesFilters(conversation, filters)).toBe(true);
+    });
+
+    it('should match conversation with saved contact_id filter values', () => {
+      const conversation = { meta: { sender: { id: 42 } } };
+      const filters = [
+        {
+          attribute_key: 'contact_id',
+          filter_operator: 'equal_to',
+          values: [42],
+          query_operator: 'and',
+        },
+      ];
+      expect(matchesFilters(conversation, filters)).toBe(true);
+    });
+
     // Standard attribute tests - priority
     it('should match conversation with equal_to operator for priority', () => {
       const conversation = { priority: 'urgent' };

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

@@ -15,6 +15,12 @@ const FILTER_KEYS = {
   [VIEW_TYPES.CONTACT]: VIEW_TYPES.CONTACT,
 };
 
+// a folder's contact_id filter stores only the id, extract it so the
+// contact can be fetched and its name shown in the edit folder modal
+const getFolderContactId = folder =>
+  folder?.query?.payload?.find(filter => filter.attribute_key === 'contact_id')
+    ?.values?.[0];
+
 export const state = {
   [VIEW_TYPES.CONVERSATION]: {
     records: [],
@@ -47,6 +53,9 @@ export const getters = {
   getActiveConversationFolder(_state) {
     return _state.activeConversationFolder;
   },
+  getActiveFolderContactId(_state) {
+    return getFolderContactId(_state.activeConversationFolder);
+  },
 };
 
 export const actions = {
@@ -104,8 +113,11 @@ export const actions = {
       commit(types.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: false });
     }
   },
-  setActiveConversationFolder({ commit }, data) {
+  setActiveConversationFolder({ commit, dispatch }, data) {
     commit(types.SET_ACTIVE_CONVERSATION_FOLDER, data);
+    // prefetch the contact of a contact filter so the UI can show its name
+    const contactId = getFolderContactId(data);
+    if (contactId) dispatch('contacts/show', { id: contactId }, { root: true });
   },
 };
 

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

@@ -1,7 +1,11 @@
 import axios from 'axios';
-import { actions } from '../../customViews';
 import * as types from '../../../mutation-types';
-import { customViewList, updateCustomViewList } from './fixtures';
+import { actions } from '../../customViews';
+import {
+  contactFilterView,
+  customViewList,
+  updateCustomViewList,
+} from './fixtures';
 
 const commit = vi.fn();
 global.axios = axios;
@@ -106,5 +110,27 @@ describe('#actions', () => {
         [types.default.SET_ACTIVE_CONVERSATION_FOLDER, customViewList[0]],
       ]);
     });
+
+    it('prefetches the contact of a contact filter', async () => {
+      const dispatch = vi.fn();
+      await actions.setActiveConversationFolder(
+        { commit, dispatch },
+        contactFilterView
+      );
+      expect(dispatch).toHaveBeenCalledWith(
+        'contacts/show',
+        { id: 42 },
+        { root: true }
+      );
+    });
+
+    it('does not prefetch without a contact filter', async () => {
+      const dispatch = vi.fn();
+      await actions.setActiveConversationFolder(
+        { commit, dispatch },
+        customViewList[0]
+      );
+      expect(dispatch).not.toHaveBeenCalled();
+    });
   });
 });

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

@@ -15,6 +15,21 @@ export const contactViewList = [
   },
 ];
 
+export const contactFilterView = {
+  name: 'Contact view',
+  filter_type: 0,
+  query: {
+    payload: [
+      {
+        attribute_key: 'contact_id',
+        filter_operator: 'equal_to',
+        values: [42],
+        query_operator: null,
+      },
+    ],
+  },
+};
+
 export const customViewList = [
   {
     name: 'Custom view',

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

@@ -1,5 +1,5 @@
 import { getters } from '../../customViews';
-import { contactViewList, customViewList } from './fixtures';
+import { contactFilterView, contactViewList, customViewList } from './fixtures';
 
 describe('#getters', () => {
   it('getCustomViewsByFilterType', () => {
@@ -43,4 +43,20 @@ describe('#getters', () => {
       customViewList[0]
     );
   });
+
+  it('getActiveFolderContactId', () => {
+    expect(
+      getters.getActiveFolderContactId({
+        activeConversationFolder: contactFilterView,
+      })
+    ).toEqual(42);
+  });
+
+  it('getActiveFolderContactId returns undefined without a contact filter', () => {
+    expect(
+      getters.getActiveFolderContactId({
+        activeConversationFolder: customViewList[0],
+      })
+    ).toBeUndefined();
+  });
 });

app/javascript/shared/helpers/MessageFormatter.js

@@ -1,28 +1,37 @@
+import MarkdownIt from 'markdown-it';
 import mila from 'markdown-it-link-attributes';
 import mentionPlugin from './markdownIt/link';
-import MarkdownIt from 'markdown-it';
 
-const setImageHeight = inlineToken => {
+const setImageSizing = inlineToken => {
   const imgSrc = inlineToken.attrGet('src');
   if (!imgSrc) return;
   const url = new URL(imgSrc);
+  const width = url.searchParams.get('cw_image_width');
+  if (width) {
+    inlineToken.attrSet(
+      'style',
+      `width: ${width}; max-width: 100%; height: auto;`
+    );
+    return;
+  }
   const height = url.searchParams.get('cw_image_height');
-  if (!height) return;
-  inlineToken.attrSet('style', `height: ${height};`);
+  if (height) inlineToken.attrSet('style', `height: ${height};`);
 };
 
 const processInlineToken = blockToken => {
   blockToken.children.forEach(inlineToken => {
     if (inlineToken.type === 'image') {
-      setImageHeight(inlineToken);
+      setImageSizing(inlineToken);
     }
   });
 };
 
 const imgResizeManager = md => {
-  // Custom rule for image resize in markdown
-  // If the image url has a query param cw_image_height, then add a style attribute to the image
-  md.core.ruler.after('inline', 'add-image-height', state => {
+  // If the image URL carries a cw_image_width or cw_image_height query param,
+  // add an inline style attribute so the rendered <img> respects the agent's
+  // resize choice. Width takes precedence (HC drag-resize); height is kept for
+  // legacy messages and the message-signature use case.
+  md.core.ruler.after('inline', 'add-image-sizing', state => {
     state.tokens.forEach(blockToken => {
       if (blockToken.type === 'inline') {
         processInlineToken(blockToken);

app/javascript/widget/assets/scss/woot.scss

@@ -34,13 +34,24 @@ body {
 
 .message-content {
   ul {
-    list-style: disc;
-    @apply ltr:pl-3 rtl:pr-3;
+    @apply list-disc list-inside;
   }
 
   ol {
-    list-style: decimal;
-    @apply ltr:pl-4 rtl:pr-4;
+    @apply list-decimal list-inside;
+  }
+
+  li {
+    padding-inline-start: 1.5em;
+    text-indent: -1.5em;
+
+    > p:first-child {
+      @apply inline;
+    }
+
+    > * {
+      text-indent: 0;
+    }
   }
 }
 

app/jobs/mutex_application_job.rb

@@ -14,6 +14,19 @@
 class MutexApplicationJob < ApplicationJob
   class LockAcquisitionError < StandardError; end
 
+  def self.retry_on_lock_conflict(wait:, attempts:, on_exhaustion: :raise)
+    retry_on LockAcquisitionError, wait: wait, attempts: attempts do |job, error|
+      raise error if on_exhaustion == :raise
+
+      job.public_send(on_exhaustion, *job.arguments)
+    end
+  end
+
+  # Redis::LockManager#unlock is not owner-checked. If a job runs past the TTL,
+  # Redis can expire the key, a newer job can acquire it, and the older job can
+  # then delete the newer job's lock on unlock. Current mutex users treat locks as
+  # short race dampeners, so this is acceptable for now. Future iterations should
+  # move Redis::LockManager to token-checked unlocks.
   def with_lock(lock_key, timeout = Redis::LockManager::LOCK_TIMEOUT)
     lock_manager = Redis::LockManager.new
 

app/jobs/webhooks/instagram_events_job.rb

@@ -1,6 +1,14 @@
 class Webhooks::InstagramEventsJob < MutexApplicationJob
   queue_as :default
-  retry_on LockAcquisitionError, wait: 1.second, attempts: 8
+  # This lock is only a short race dampener for first-message conversation creation.
+  # ContactInbox creation is already protected by a unique index, but conversation
+  # lookup is `find active conversation || create`, so concurrent first messages from
+  # the same IG contact can create duplicate conversations.
+  #
+  # ActiveJob retries are not FIFO, so a longer retry window does not preserve message
+  # order. Use deterministic backoff so the final attempt happens after the 3s lock TTL,
+  # then process without the lock instead of dropping the webhook.
+  retry_on_lock_conflict wait: ->(executions) { executions.seconds }, attempts: 3, on_exhaustion: :process_without_lock
 
   # @return [Array] We will support further events like reaction or seen in future
   SUPPORTED_EVENTS = [:message, :read].freeze
@@ -9,11 +17,19 @@ class Webhooks::InstagramEventsJob < MutexApplicationJob
     @entries = entries
 
     key = format(::Redis::Alfred::IG_MESSAGE_MUTEX, sender_id: contact_instagram_id, ig_account_id: ig_account_id)
-    with_lock(key) do
+    # Keep the lock TTL just long enough for the first job to fetch profile data and
+    # create the contact/conversation. A longer TTL would add user-visible latency for
+    # hot contacts without giving us ordering guarantees.
+    with_lock(key, 3.seconds) do
       process_entries(entries)
     end
   end
 
+  def process_without_lock(entries)
+    Rails.logger.warn("[#{self.class.name}] Processing without lock after lock retry exhaustion")
+    process_entries(entries)
+  end
+
   # https://developers.facebook.com/docs/messenger-platform/instagram/features/webhook
   def process_entries(entries)
     entries.each do |entry|

app/listeners/webhook_listener.rb

@@ -68,7 +68,7 @@ class WebhookListener < BaseListener
 
   def inbox_created(event)
     inbox, account = extract_inbox_and_account(event)
-    inbox_webhook_data = Inbox::EventDataPresenter.new(inbox).push_data
+    inbox_webhook_data = Inbox::EventDataPresenter.new(inbox).webhook_data
     payload = inbox_webhook_data.merge(event: __method__.to_s)
     deliver_account_webhooks(payload, account)
   end
@@ -78,7 +78,7 @@ class WebhookListener < BaseListener
     changed_attributes = extract_changed_attributes(event)
     return if changed_attributes.blank?
 
-    inbox_webhook_data = Inbox::EventDataPresenter.new(inbox).push_data
+    inbox_webhook_data = Inbox::EventDataPresenter.new(inbox).webhook_data
     payload = inbox_webhook_data.merge(event: __method__.to_s, changed_attributes: changed_attributes)
     deliver_account_webhooks(payload, account)
   end

app/mailboxes/imap/imap_mailbox.rb

@@ -65,11 +65,10 @@ class Imap::ImapMailbox
   end
 
   def in_reply_to
-    @processed_mail.in_reply_to
+    sanitize_mailbox_value(@processed_mail.in_reply_to)
   end
 
   def find_conversation_by_references
-    references = Array.wrap(@inbound_mail.references)
     references.each do |message_id|
       match = FALLBACK_CONVERSATION_PATTERN.match(message_id)
 
@@ -80,8 +79,6 @@ class Imap::ImapMailbox
   def find_message_by_references
     message_to_return = nil
 
-    references = Array.wrap(@inbound_mail.references)
-
     references.each do |message_id|
       message = @inbox.messages.find_by(source_id: message_id)
       message_to_return = message if message.present?
@@ -100,7 +97,7 @@ class Imap::ImapMailbox
           source: 'email',
           in_reply_to: in_reply_to,
           auto_reply: @processed_mail.auto_reply?,
-          mail_subject: @processed_mail.subject,
+          mail_subject: sanitize_mailbox_value(@processed_mail.subject),
           initiated_at: {
             timestamp: Time.now.utc
           }
@@ -110,7 +107,7 @@ class Imap::ImapMailbox
   end
 
   def find_or_create_contact
-    @contact = @inbox.contacts.from_email(@processed_mail.original_sender)
+    @contact = @inbox.contacts.from_email(original_sender_email)
     if @contact.present?
       @contact_inbox = ContactInbox.find_by(inbox: @inbox, contact: @contact)
     else
@@ -119,6 +116,14 @@ class Imap::ImapMailbox
   end
 
   def identify_contact_name
-    processed_mail.sender_name || processed_mail.from.first.split('@').first
+    sanitize_mailbox_value(processed_mail.sender_name || processed_mail.from.first.split('@').first)
+  end
+
+  def original_sender_email
+    sanitize_mailbox_value(@processed_mail.original_sender)
+  end
+
+  def references
+    sanitize_mailbox_value(Array.wrap(@inbound_mail.references))
   end
 end

app/mailboxes/mailbox_helper.rb

@@ -1,27 +1,16 @@
 module MailboxHelper
   include MailboxInlineAttachmentHelper
+  include MailboxSanitizer
   include ::FileTypeHelper
 
   private
 
   def create_message
     Rails.logger.info "[MailboxHelper] Creating message #{processed_mail.message_id}"
-    return if @conversation.messages.find_by(source_id: processed_mail.message_id).present?
+    source_id = sanitize_mailbox_value(processed_mail.message_id)
+    return if @conversation.messages.find_by(source_id: source_id).present?
 
-    @message = @conversation.messages.create!(
-      account_id: @conversation.account_id,
-      sender: @conversation.contact,
-      content: mail_content&.truncate(150_000),
-      inbox_id: @conversation.inbox_id,
-      message_type: 'incoming',
-      content_type: 'incoming_email',
-      source_id: processed_mail.message_id,
-      content_attributes: {
-        email: processed_mail.serialized_data,
-        cc_email: processed_mail.cc,
-        bcc_email: processed_mail.bcc
-      }
-    )
+    @message = @conversation.messages.create!(sanitized_message_attributes(source_id))
   end
 
   def add_attachments_to_message
@@ -101,13 +90,16 @@ module MailboxHelper
   end
 
   def create_contact
+    sender_email = sanitize_mailbox_value(processed_mail.original_sender)
+    message_id = sanitize_mailbox_value(processed_mail.message_id)
+
     @contact_inbox = ::ContactInboxWithContactBuilder.new(
-      source_id: processed_mail.original_sender,
+      source_id: sender_email,
       inbox: @inbox,
       contact_attributes: {
-        name: identify_contact_name,
-        email: processed_mail.original_sender,
-        additional_attributes: { source_id: "email:#{processed_mail.message_id}" }
+        name: sanitize_mailbox_value(identify_contact_name),
+        email: sender_email,
+        additional_attributes: { source_id: "email:#{message_id}" }
       }
     ).perform
 

app/mailboxes/mailbox_sanitizer.rb

@@ -0,0 +1,34 @@
+module MailboxSanitizer
+  NULL_BYTE = "\u0000".freeze
+
+  private
+
+  def sanitized_message_attributes(source_id)
+    {
+      account_id: @conversation.account_id,
+      sender: @conversation.contact,
+      content: sanitize_mailbox_value(mail_content)&.truncate(150_000),
+      inbox_id: @conversation.inbox_id,
+      message_type: 'incoming',
+      content_type: 'incoming_email',
+      source_id: source_id,
+      content_attributes: sanitized_content_attributes
+    }
+  end
+
+  def sanitized_content_attributes
+    sanitize_mailbox_value(
+      email: processed_mail.serialized_data,
+      cc_email: processed_mail.cc,
+      bcc_email: processed_mail.bcc
+    )
+  end
+
+  def sanitize_mailbox_value(value)
+    return value.delete(NULL_BYTE) if value.is_a?(String)
+    return value.map { |item| sanitize_mailbox_value(item) } if value.is_a?(Array)
+    return value.transform_values { |item| sanitize_mailbox_value(item) } if value.is_a?(Hash)
+
+    value
+  end
+end

app/mailers/conversation_reply_mailer_helper.rb

@@ -54,8 +54,7 @@ module ConversationReplyMailerHelper
       tls: false,
       enable_starttls_auto: true,
       openssl_verify_mode: 'none',
-      open_timeout: 15,
-      read_timeout: 15,
+      **smtp_timeout_settings,
       authentication: 'xoauth2'
     }
   end
@@ -72,6 +71,7 @@ module ConversationReplyMailerHelper
       tls: @channel.smtp_enable_ssl_tls,
       enable_starttls_auto: @channel.smtp_enable_starttls_auto,
       openssl_verify_mode: @channel.smtp_openssl_verify_mode,
+      **smtp_timeout_settings,
       authentication: @channel.smtp_authentication
     }
 
@@ -79,6 +79,13 @@ module ConversationReplyMailerHelper
     @options[:delivery_method_options] = smtp_settings
   end
 
+  def smtp_timeout_settings
+    {
+      open_timeout: ENV['SMTP_OPEN_TIMEOUT'].presence || 15,
+      read_timeout: ENV['SMTP_READ_TIMEOUT'].presence || 30
+    }.transform_values(&:to_i)
+  end
+
   def email_smtp_enabled?
     @inbox.inbox_type == 'Email' && @channel.smtp_enabled
   end

app/models/concerns/portal_config_schema.rb

@@ -0,0 +1,35 @@
+module PortalConfigSchema
+  extend ActiveSupport::Concern
+
+  # Per-locale overrides for portal level fields. Any locale present in
+  # `allowed_locales` may carry its own `name`, `page_title` and `header_text`.
+  # Missing values fall back to the default locale and finally to the base column.
+  LOCALE_TRANSLATION_SCHEMA = {
+    'type' => 'object',
+    'properties' => {
+      'name' => { 'type' => %w[string null] },
+      'page_title' => { 'type' => %w[string null] },
+      'header_text' => { 'type' => %w[string null] }
+    },
+    'additionalProperties' => false
+  }.freeze
+
+  CONFIG_PARAMS_SCHEMA = {
+    'type' => 'object',
+    'properties' => {
+      'allowed_locales' => { 'type' => %w[array null], 'items' => { 'type' => 'string' } },
+      'default_locale' => { 'type' => %w[string null] },
+      'draft_locales' => { 'type' => %w[array null], 'items' => { 'type' => 'string' } },
+      'layout' => { 'type' => %w[string null], 'enum' => ['classic', 'documentation', nil] },
+      # TODO: unused reserved key; remove with a migration that scrubs it from existing portals' config
+      'website_token' => { 'type' => %w[string null] },
+      'social_profiles' => { 'type' => %w[object null] },
+      'locale_translations' => {
+        'type' => %w[object null],
+        'additionalProperties' => LOCALE_TRANSLATION_SCHEMA
+      }
+    },
+    'required' => [],
+    'additionalProperties' => true
+  }.to_json.freeze
+end

app/models/portal.rb

@@ -26,6 +26,7 @@
 #
 class Portal < ApplicationRecord
   include Rails.application.routes.url_helpers
+  include PortalConfigSchema
 
   DEFAULT_COLOR = '#1f93ff'.freeze
 
@@ -42,11 +43,17 @@ class Portal < ApplicationRecord
   validates :name, presence: true
   validates :slug, presence: true, uniqueness: true
   validates :custom_domain, uniqueness: true, allow_nil: true
-  validate :config_json_format
+  validates :color, format: { with: /\A#(?:\h{3}|\h{6})\z/ }, allow_blank: true
+  before_validation :normalize_config
+  validate :validate_config
+  validates_with JsonSchemaValidator,
+                 schema: PortalConfigSchema::CONFIG_PARAMS_SCHEMA,
+                 attribute_resolver: ->(record) { record.config }
 
   scope :active, -> { where(archived: false) }
 
-  CONFIG_JSON_KEYS = %w[allowed_locales default_locale draft_locales website_token social_profiles layout].freeze
+  # TODO: 'website_token' is an unused reserved key; remove with a migration that scrubs it from existing portals' config
+  CONFIG_JSON_KEYS = %w[allowed_locales default_locale draft_locales website_token social_profiles layout locale_translations].freeze
 
   def file_base_data
     {
@@ -90,8 +97,18 @@ class Portal < ApplicationRecord
     self[:color].presence || DEFAULT_COLOR
   end
 
-  def display_title
-    page_title.presence || name
+  def display_title(locale = default_locale)
+    localized_value('page_title', locale).presence || localized_value('name', locale)
+  end
+
+  # Resolves a portal level field for a locale, falling back to the default
+  # locale's value (its override or the base column) when the locale has no
+  # override of its own.
+  def localized_value(field, locale = default_locale)
+    translations = config_value('locale_translations') || {}
+    translations.dig(locale.to_s, field).presence ||
+      translations.dig(default_locale, field).presence ||
+      self[field]
   end
 
   def layout
@@ -104,11 +121,14 @@ class Portal < ApplicationRecord
 
   private
 
-  def config_json_format
+  def normalize_config
     self.config = persisted_config.merge((config || {}).deep_stringify_keys)
     config['allowed_locales'] = allowed_locale_codes
     config['default_locale'] = default_locale
     config['draft_locales'] = draft_locale_codes
+  end
+
+  def validate_config
     denied_keys = config.keys - CONFIG_JSON_KEYS
     errors.add(:config, "in portal on #{denied_keys.join(',')} is not supported.") if denied_keys.any?
     errors.add(:config, 'default locale cannot be drafted.') if draft_locale?(default_locale)

app/presenters/conversations/event_data_presenter.rb

@@ -23,7 +23,10 @@ class Conversations::EventDataPresenter < SimpleDelegator
 
   # Like #push_data but with message text normalized for external integrations (webhooks).
   def webhook_data
-    push_data.merge(messages: webhook_push_messages)
+    push_data.merge(
+      account: account.webhook_data,
+      messages: webhook_push_messages
+    )
   end
 
   private

app/presenters/inbox/event_data_presenter.rb

@@ -32,4 +32,8 @@ class Inbox::EventDataPresenter < SimpleDelegator
       channel: channel
     }
   end
+
+  def webhook_data
+    push_data.merge(account: account.webhook_data)
+  end
 end

app/services/facebook/send_on_facebook_service.rb

@@ -45,12 +45,12 @@ class Facebook::SendOnFacebookService < Base::SendOnChannelService
   end
 
   def fb_text_message_params
-    {
+    params = {
       recipient: { id: contact.get_source_id(inbox.id) },
-      message: fb_text_message_payload,
-      messaging_type: 'MESSAGE_TAG',
-      tag: message_tag
+      message: fb_text_message_payload
     }
+
+    merge_human_agent_tag(params)
   end
 
   def fb_text_message_payload
@@ -79,7 +79,7 @@ class Facebook::SendOnFacebookService < Base::SendOnChannelService
   end
 
   def fb_attachment_message_params(attachment)
-    {
+    params = {
       recipient: { id: contact.get_source_id(inbox.id) },
       message: {
         attachment: {
@@ -88,14 +88,21 @@ class Facebook::SendOnFacebookService < Base::SendOnChannelService
             url: attachment.download_url
           }
         }
-      },
-      messaging_type: 'MESSAGE_TAG',
-      tag: message_tag
+      }
     }
+
+    merge_human_agent_tag(params)
   end
 
-  def message_tag
-    @message_tag ||= GlobalConfigService.load('ENABLE_MESSENGER_CHANNEL_HUMAN_AGENT', nil) ? 'HUMAN_AGENT' : 'ACCOUNT_UPDATE'
+  def merge_human_agent_tag(params)
+    unless GlobalConfigService.load('ENABLE_MESSENGER_CHANNEL_HUMAN_AGENT', nil)
+      params[:messaging_type] = 'RESPONSE'
+      return params
+    end
+
+    params[:messaging_type] = 'MESSAGE_TAG'
+    params[:tag] = 'HUMAN_AGENT'
+    params
   end
 
   def attachment_type(attachment)
@@ -104,11 +111,6 @@ class Facebook::SendOnFacebookService < Base::SendOnChannelService
     'file'
   end
 
-  def sent_first_outgoing_message_after_24_hours?
-    # we can send max 1 message after 24 hour window
-    conversation.messages.outgoing.where('id > ?', conversation.last_incoming_message.id).count == 1
-  end
-
   def handle_facebook_error(exception)
     # Refer: https://github.com/jgorset/facebook-messenger/blob/64fe1f5cef4c1e3fca295b205037f64dfebdbcab/lib/facebook/messenger/error.rb
     return unless exception.to_s.include?('The session has been invalidated') || exception.to_s.include?('Error validating access token')

app/services/imap/base_fetch_email_service.rb

@@ -58,8 +58,9 @@ class Imap::BaseFetchEmailService
 
     return if email_already_present?(channel, message_id)
 
-    # Fetch the original mail content using the sequence no
-    mail_str = imap_client.fetch(seq_no, 'RFC822')[0].attr['RFC822']
+    # Fetch the original mail content using the sequence no.
+    # BODY.PEEK[] avoids RFC822 parser failures seen with some IMAP servers.
+    mail_str = imap_client.fetch(seq_no, 'BODY.PEEK[]')[0].attr['BODY[]']
 
     if mail_str.blank?
       Rails.logger.info "[IMAP::FETCH_EMAIL_SERVICE] Fetch failed for #{channel.email} with message-id <#{message_id}>."

app/services/mailbox/conversation_finder_strategies/base_strategy.rb

@@ -1,4 +1,6 @@
 class Mailbox::ConversationFinderStrategies::BaseStrategy
+  include MailboxSanitizer
+
   attr_reader :mail
 
   def initialize(mail)

app/services/mailbox/conversation_finder_strategies/in_reply_to_strategy.rb

@@ -14,7 +14,7 @@ class Mailbox::ConversationFinderStrategies::InReplyToStrategy < Mailbox::Conver
   def find
     return nil if mail.in_reply_to.blank?
 
-    in_reply_to_addresses = Array.wrap(mail.in_reply_to)
+    in_reply_to_addresses = sanitize_mailbox_value(Array.wrap(mail.in_reply_to))
 
     in_reply_to_addresses.each do |in_reply_to|
       # Try extracting UUID from patterns

app/services/mailbox/conversation_finder_strategies/new_conversation_strategy.rb

@@ -45,11 +45,11 @@ class Mailbox::ConversationFinderStrategies::NewConversationStrategy < Mailbox::
   end
 
   def original_sender_email
-    @processed_mail.original_sender&.downcase
+    sanitize_mailbox_value(@processed_mail.original_sender)&.downcase
   end
 
   def identify_contact_name
-    @processed_mail.sender_name || @processed_mail.from.first.split('@').first
+    sanitize_mailbox_value(@processed_mail.sender_name || @processed_mail.from.first.split('@').first)
   end
 
   def build_conversation
@@ -63,7 +63,7 @@ class Mailbox::ConversationFinderStrategies::NewConversationStrategy < Mailbox::
         in_reply_to: in_reply_to,
         source: 'email',
         auto_reply: @processed_mail.auto_reply?,
-        mail_subject: @processed_mail.subject,
+        mail_subject: sanitize_mailbox_value(@processed_mail.subject),
         initiated_at: {
           timestamp: Time.now.utc
         }
@@ -72,7 +72,7 @@ class Mailbox::ConversationFinderStrategies::NewConversationStrategy < Mailbox::
   end
 
   def in_reply_to
-    mail['In-Reply-To'].try(:value)
+    sanitize_mailbox_value(mail['In-Reply-To'].try(:value))
   end
 
   def find_conversation_by_in_reply_to

app/services/mailbox/conversation_finder_strategies/references_strategy.rb

@@ -21,7 +21,7 @@ class Mailbox::ConversationFinderStrategies::ReferencesStrategy < Mailbox::Conve
     return nil if mail.references.blank?
     return nil unless @channel # No valid channel found
 
-    references = Array.wrap(mail.references)
+    references = sanitize_mailbox_value(Array.wrap(mail.references))
 
     references.each do |reference|
       conversation = find_conversation_from_reference(reference)

app/services/whatsapp/incoming_message_base_service.rb

@@ -147,7 +147,7 @@ class Whatsapp::IncomingMessageBaseService
 
   def attach_location
     location = messages_data.first['location']
-    location_name = location['name'] ? "#{location['name']}, #{location['address']}" : ''
+    location_name = (location['name'] ? "#{location['name']}, #{location['address']}" : '').first(255)
     @message.attachments.new(
       account_id: @message.account_id,
       file_type: file_content_type(message_type),

app/views/api/v1/accounts/portals/_portal.json.jbuilder

@@ -18,6 +18,7 @@ json.config do
   json.default_locale portal.default_locale
   json.layout portal.layout
   json.social_profiles portal.social_profiles
+  json.locale_translations portal.config['locale_translations'] || {}
 end
 
 if portal.channel_web_widget

app/views/layouts/_portal_head.html.erb

@@ -16,7 +16,7 @@
 <% if content_for?(:head) %>
   <%= yield(:head) %>
 <% else %>
-  <title><%= @portal.display_title %></title>
+  <title><%= @portal.display_title(@locale) %></title>
 <% end %>
 
 <% if @portal.logo.present? %>

app/views/layouts/_portal_scripts.html.erb

@@ -89,5 +89,9 @@ html.light {
   };
 </script>
 <% if @portal.channel_web_widget.present? && !@is_plain_layout_enabled %>
+<script>
+  window.chatwootSettings = window.chatwootSettings || {};
+  window.chatwootSettings.locale = '<%= @locale %>';
+</script>
 <%= @portal.channel_web_widget.web_widget_script.html_safe %>
 <% end %>

app/views/public/api/v1/portals/_header.html.erb

@@ -5,7 +5,7 @@
         <% if @portal.logo.present? %>
           <img src="<%= url_for(@portal.logo) %>" class="w-auto h-10 ltr:mr-2 rtl:ml-2" draggable="false" />
         <% end %>
-        <span class="text-lg font-semibold text-slate-900 truncate dark:text-white <%= @portal.logo.present? ? 'hidden lg:block' : 'hidden sm:block' %>"><%= @portal.name %></span>
+        <span class="text-lg font-semibold text-slate-900 truncate dark:text-white <%= @portal.logo.present? ? 'hidden lg:block' : 'hidden sm:block' %>"><%= @portal.localized_value('name', @locale) %></span>
       </a>
     </div>
 
@@ -106,7 +106,7 @@
         <% if @portal.logo.present? %>
           <img src="<%= url_for(@portal.logo) %>" class="w-auto h-10 ltr:mr-2 rtl:ml-2" draggable="false" />
         <% end %>
-         <span class="text-lg font-semibold text-slate-900 truncate dark:text-white <%= @portal.logo.present? ? 'hidden' : 'sm:hidden block' %>"><%= @portal.name %></span>
+         <span class="text-lg font-semibold text-slate-900 truncate dark:text-white <%= @portal.logo.present? ? 'hidden' : 'sm:hidden block' %>"><%= @portal.localized_value('name', @locale) %></span>
       </a>
 
       <!-- Mobile Menu Component -->

app/views/public/api/v1/portals/_hero.html.erb

@@ -1,7 +1,7 @@
 <% if !@is_plain_layout_enabled %>
 <% content_for :head do %>
-  <title><%= @portal.display_title %></title>
-  <meta name="title" content="<%= @portal.display_title %>">
+  <title><%= @portal.display_title(@locale) %></title>
+  <meta name="title" content="<%= @portal.display_title(@locale) %>">
 
   <% if @og_image_url.present? %>
     <meta name="twitter:card" content="summary_large_image">
@@ -13,9 +13,9 @@
 <section id="portal-bg" class="w-full bg-white dark:bg-slate-900 shadow-inner">
   <div id="portal-bg-gradient" class="pt-8 pb-8 md:pt-14 md:pb-6 min-h-[240px] md:min-h-[260px]">
     <div class="mx-auto max-w-5xl px-4 md:px-8 flex flex-col items-start">
-       <span class="text-sm leading-[24px] font-semibold text-slate-600 dark:text-slate-300 mb-1 <%= @portal.logo.present? ? 'block lg:hidden' : 'hidden' %>"><%= @portal.name %></span>
+       <span class="text-sm leading-[24px] font-semibold text-slate-600 dark:text-slate-300 mb-1 <%= @portal.logo.present? ? 'block lg:hidden' : 'hidden' %>"><%= @portal.localized_value('name', @locale) %></span>
       <h1 class="text-2xl md:text-4xl text-slate-900 dark:text-white font-semibold leading-normal">
-        <%= portal.header_text %>
+        <%= portal.localized_value('header_text', @locale) %>
       </h1>
       <p class="text-slate-600 dark:text-slate-200 text-start text-lg leading-normal pt-2 pb-4"><%= I18n.t('public_portal.hero.sub_title') %></p>
       <div id="search-wrap" class="w-full relative z-30"></div>

app/views/public/api/v1/portals/articles/index.html.erb

@@ -6,7 +6,7 @@
 			  class="leading-8 text-slate-800 hover:underline"
 		      href="<%= generate_home_link(@portal.slug, @category.present? ? @category.slug : '', @theme_from_params, @is_plain_layout_enabled) %>"
 			>
-				<%= @portal.name %> <%= I18n.t('public_portal.common.home') %>
+				<%= @portal.localized_value('name', @locale) %> <%= I18n.t('public_portal.common.home') %>
 			</a>
 		<span>/</span>
 		<span>/</span>

app/views/public/api/v1/portals/articles/show.html.erb

@@ -1,5 +1,5 @@
 <% content_for :head do %>
-  <title><%= @article.title %> | <%= @portal.display_title %></title>
+  <title><%= @article.title %> | <%= @portal.display_title(@locale) %></title>
   <% if @article.meta["title"].present? %>
     <meta name="title" content="<%= @article.meta["title"] %>">
     <meta property="og:title" content="<%= @article.meta["title"] %>">

app/views/public/api/v1/portals/categories/_hero.html.erb

@@ -1,7 +1,7 @@
 
 <section class="bg-slate-50 dark:bg-slate-800 py-16 flex flex-col items-center justify-center">
   <div class="mx-auto max-w-2xl">
-    <h1 class="text-4xl text-slate-900 dark:text-white font-semibold leading-relaxed text-center"><%= portal.header_text %></h1>
+    <h1 class="text-4xl text-slate-900 dark:text-white font-semibold leading-relaxed text-center"><%= portal.localized_value('header_text', @locale) %></h1>
     <p class="text-slate-700 dark:text-slate-100 py-2 text-center"><%= I18n.t('public_portal.hero.sub_title') %></p>
   </div>
 </section>

app/views/public/api/v1/portals/categories/show.html.erb

@@ -1,6 +1,6 @@
 <% content_for :head do %>
-  <title><%= @category.name %> | <%= @portal.display_title %></title>
-  <meta name="title" content="<%= @category.name %> | <%= @portal.display_title %>">
+  <title><%= @category.name %> | <%= @portal.display_title(@locale) %></title>
+  <meta name="title" content="<%= @category.name %> | <%= @portal.display_title(@locale) %>">
   <% if @category.description.present? %>
     <meta name="description" content="<%= @category.description %>">
     <meta property="og:description" content="<%= @category.description %>">

app/views/public/api/v1/portals/documentation_layout/_hero.html.erb

@@ -5,7 +5,7 @@
   <div class="relative w-full px-6 md:px-10 py-12 md:py-16">
     <div class="max-w-2xl">
       <h1 class="text-4xl md:text-5xl leading-tight font-620 tracking-tight text-n-slate-12 text-balance">
-        <%= portal.header_text.presence || 'How can we help?' %>
+        <%= portal.localized_value('header_text', @locale).presence || 'How can we help?' %>
       </h1>
       <p class="mt-4 text-lg leading-normal text-n-slate-11 text-pretty">
         <%= I18n.t('public_portal.hero.sub_title') %>

app/views/public/api/v1/portals/documentation_layout/_topbar.html.erb

@@ -11,7 +11,7 @@
       <% if portal.logo.present? %>
         <img src="<%= url_for(portal.logo) %>" class="w-8 h-8 rounded-full" draggable="false" />
       <% end %>
-      <span class="text-base font-semibold tracking-tight text-n-slate-12 truncate"><%= portal.name %></span>
+      <span class="text-base font-semibold tracking-tight text-n-slate-12 truncate"><%= portal.localized_value('name', locale) %></span>
       <span class="hidden sm:inline-block w-px h-5 bg-n-weak mx-1"></span>
       <span class="hidden sm:inline-block text-sm font-medium text-n-slate-11 truncate"><%= I18n.t('public_portal.sidebar.help_center') %></span>
     </a>

app/views/public/api/v1/portals/documentation_layout/articles/_meta_head.html.erb

@@ -1,4 +1,4 @@
-<title><%= article.title %> | <%= portal.display_title %></title>
+<title><%= article.title %> | <%= portal.display_title(article.locale) %></title>
 <% if article.meta["title"].present? %>
   <meta name="title" content="<%= article.meta["title"] %>">
   <meta property="og:title" content="<%= article.meta["title"] %>">

app/views/public/api/v1/portals/documentation_layout/categories/_meta_head.html.erb

@@ -1,5 +1,5 @@
-<title><%= category.name %> | <%= portal.display_title %></title>
-<meta name="title" content="<%= category.name %> | <%= portal.display_title %>">
+<title><%= category.name %> | <%= portal.display_title(category.locale) %></title>
+<meta name="title" content="<%= category.name %> | <%= portal.display_title(category.locale) %>">
 <% if category.description.present? %>
   <meta name="description" content="<%= category.description %>">
   <meta property="og:description" content="<%= category.description %>">

app/views/public/api/v1/portals/search/index.html+documentation.erb

@@ -1,5 +1,5 @@
 <% content_for :head do %>
-  <title><%= I18n.t('public_portal.search.results_for', query: @query) %> | <%= @portal.name %></title>
+  <title><%= I18n.t('public_portal.search.results_for', query: @query) %> | <%= @portal.localized_value('name', @locale) %></title>
 <% end %>
 
 <div class="px-6 md:px-10 py-8 md:py-10">

app/views/public/api/v1/portals/search/index.html.erb

@@ -1,5 +1,5 @@
 <% content_for :head do %>
-  <title><%= I18n.t('public_portal.search.results_for', query: @query) %> | <%= @portal.name %></title>
+  <title><%= I18n.t('public_portal.search.results_for', query: @query) %> | <%= @portal.localized_value('name', @locale) %></title>
 <% end %>
 
 <% search_input_class = 'w-full px-4 py-3 border border-slate-200 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent' %>

app/views/super_admin/application/_icons.html.erb

@@ -128,6 +128,10 @@
     <path d="M18.3 10.2H19.2C19.4387 10.2 19.6676 10.2948 19.8364 10.4636C20.0052 10.6324 20.1 10.8613 20.1 11.1V20.1C20.1 20.3387 20.0052 20.5676 19.8364 20.7364C19.6676 20.9052 19.4387 21 19.2 21H4.80002C4.56133 21 4.33241 20.9052 4.16363 20.7364C3.99485 20.5676 3.90002 20.3387 3.90002 20.1V11.1C3.90002 10.8613 3.99485 10.6324 4.16363 10.4636C4.33241 10.2948 4.56133 10.2 4.80002 10.2H5.70002V9.3C5.70002 8.47267 5.86298 7.65345 6.17958 6.88909C6.49619 6.12474 6.96024 5.43024 7.54525 4.84523C8.13026 4.26022 8.82477 3.79616 9.58912 3.47956C10.3535 3.16295 11.1727 3 12 3C12.8274 3 13.6466 3.16295 14.4109 3.47956C15.1753 3.79616 15.8698 4.26022 16.4548 4.84523C17.0398 5.43024 17.5039 6.12474 17.8205 6.88909C18.1371 7.65345 18.3 8.47267 18.3 9.3V10.2ZM5.70002 12V19.2H18.3V12H5.70002ZM11.1 13.8H12.9V17.4H11.1V13.8ZM16.5 10.2V9.3C16.5 8.10653 16.0259 6.96193 15.182 6.11802C14.3381 5.27411 13.1935 4.8 12 4.8C10.8066 4.8 9.66196 5.27411 8.81804 6.11802C7.97413 6.96193 7.50002 8.10653 7.50002 9.3V10.2H16.5Z" fill="currentColor"/>
   </symbol>
 
+  <symbol id="icon-voice-line" viewBox="0 0 24 24">
+    <g fill="none" stroke="currentColor"><path d="M12.75 4.50031C14.5402 4.50031 16.2571 5.21146 17.523 6.47733C18.7888 7.7432 19.5 9.46009 19.5 11.2503" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.75 7.5C13.7446 7.5 14.6984 7.89509 15.4017 8.59835C16.1049 9.30161 16.5 10.2554 16.5 11.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.374 15.4263C13.5289 15.4974 13.7034 15.5137 13.8688 15.4724C14.0341 15.4311 14.1805 15.3347 14.2837 15.1991L14.55 14.8503C14.6897 14.664 14.8709 14.5128 15.0792 14.4087C15.2875 14.3045 15.5171 14.2503 15.75 14.2503H18C18.3978 14.2503 18.7794 14.4083 19.0607 14.6896C19.342 14.9709 19.5 15.3525 19.5 15.7503V18.0003C19.5 18.3981 19.342 18.7797 19.0607 19.061C18.7794 19.3423 18.3978 19.5003 18 19.5003C14.4196 19.5003 10.9858 18.078 8.45406 15.5462C5.92232 13.0145 4.5 9.58073 4.5 6.00031C4.5 5.60248 4.65804 5.22095 4.93934 4.93964C5.22064 4.65834 5.60218 4.50031 6 4.50031H8.25C8.64782 4.50031 9.02935 4.65834 9.31066 4.93964C9.59196 5.22095 9.75 5.60248 9.75 6.00031V8.2503C9.75 8.48317 9.69578 8.71284 9.59164 8.92113C9.4875 9.12941 9.33629 9.31058 9.15 9.45031L8.799 9.71355C8.66131 9.81869 8.56426 9.96824 8.52434 10.1368C8.48442 10.3054 8.50409 10.4826 8.58 10.6383C9.60501 12.7202 11.2908 14.4039 13.374 15.4263Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g>
+  </symbol>
+
   <symbol id="icon-captain" viewBox="0 0 24 24">
     <path d="M7.02051 9.50216C7.02051 9.01881 7.41237 8.62695 7.89571 8.62695C8.37909 8.62695 8.77091 9.01881 8.77091 9.50216V11.5248C8.77091 12.0082 8.37909 12.4 7.89571 12.4C7.41237 12.4 7.02051 12.0082 7.02051 11.5248V9.50216Z" fill="currentColor"/>
     <path d="M9.82117 9.50216C9.82117 9.01881 10.213 8.62695 10.6964 8.62695C11.1798 8.62695 11.5716 9.01881 11.5716 9.50216V11.5248C11.5716 12.0082 11.1798 12.4 10.6964 12.4C10.213 12.4 9.82117 12.0082 9.82117 11.5248V9.50216Z" fill="currentColor"/>

enterprise/app/helpers/captain/chat_generation_recorder.rb

@@ -10,6 +10,7 @@ module Captain::ChatGenerationRecorder
     # Create a generation span with model and token info for Langfuse cost calculation.
     # Note: span duration will be near-zero since we create and end it immediately, but token counts are what Langfuse uses for cost calculation.
     tracer.in_span("llm.captain.#{feature_name}.generation") do |span|
+      apply_current_langfuse_attributes(span)
       set_generation_span_attributes(span, chat, message)
     end
   rescue StandardError => e
@@ -37,11 +38,23 @@ module Captain::ChatGenerationRecorder
       ATTR_GEN_AI_USAGE_INPUT_TOKENS => message.input_tokens,
       ATTR_GEN_AI_USAGE_OUTPUT_TOKENS => message.respond_to?(:output_tokens) ? message.output_tokens : nil,
       ATTR_LANGFUSE_OBSERVATION_INPUT => format_input_messages(chat),
-      ATTR_LANGFUSE_OBSERVATION_OUTPUT => message.respond_to?(:content) ? message.content.to_s : nil
+      ATTR_LANGFUSE_OBSERVATION_OUTPUT => message.respond_to?(:content) ? message.content.to_s : nil,
+      format(ATTR_LANGFUSE_OBSERVATION_METADATA, 'generation_stage') => generation_stage(message)
     }
   end
 
   def format_input_messages(chat)
     chat.messages[0...-1].map { |m| { role: m.role.to_s, content: m.content.to_s } }.to_json
   end
+
+  def generation_stage(message)
+    message_has_tool_calls?(message) ? 'tool_call' : 'final_response'
+  end
+
+  def message_has_tool_calls?(message)
+    return false unless message.respond_to?(:tool_calls)
+
+    tool_calls = message.tool_calls
+    tool_calls.respond_to?(:any?) && tool_calls.any?
+  end
 end

enterprise/app/services/captain/llm/translate_query_service.rb

@@ -32,6 +32,10 @@ class Captain::Llm::TranslateQueryService < Captain::BaseTaskService
     @llm_credential ||= system_llm_credential
   end
 
+  def counts_toward_usage?
+    false
+  end
+
   def query_in_target_language?(query)
     detector = CLD3::NNetLanguageIdentifier.new(0, 1000)
     result = detector.find_language(query)

enterprise/app/services/captain/tools/firecrawl_service.rb

@@ -1,5 +1,5 @@
 class Captain::Tools::FirecrawlService
-  BASE_URL = 'https://api.firecrawl.dev/v1'.freeze
+  BASE_URL = 'https://api.firecrawl.dev/v2'.freeze
   FIRECRAWL_EXCLUDE_TAGS = %w[iframe .sidebar .cookie-banner [role=navigation] [role=banner] [role=contentinfo]].freeze
 
   def self.configured?
@@ -35,10 +35,10 @@ class Captain::Tools::FirecrawlService
   def crawl_payload(url, webhook_url, crawl_limit)
     {
       url: url,
-      maxDepth: 50,
-      ignoreSitemap: false,
+      maxDiscoveryDepth: 50,
+      sitemap: 'include',
       limit: crawl_limit,
-      webhook: webhook_url,
+      webhook: { url: webhook_url },
       scrapeOptions: scrape_options
     }.to_json
   end
@@ -51,7 +51,8 @@ class Captain::Tools::FirecrawlService
     {
       onlyMainContent: true,
       formats: ['markdown'],
-      excludeTags: FIRECRAWL_EXCLUDE_TAGS
+      excludeTags: FIRECRAWL_EXCLUDE_TAGS,
+      maxAge: 0
     }
   end
 

enterprise/lib/captain/conversation_completion_service.rb

@@ -62,6 +62,10 @@ class Captain::ConversationCompletionService < Captain::BaseTaskService
     @llm_credential ||= system_llm_credential
   end
 
+  def counts_toward_usage?
+    false
+  end
+
   def event_name
     'captain.conversation_completion'
   end

lib/base_markdown_renderer.rb

@@ -1,9 +1,9 @@
 class BaseMarkdownRenderer < CommonMarker::HtmlRenderer
   def image(node)
     src, title = extract_img_attributes(node)
-    height = extract_image_height(src)
+    sizing_style = extract_image_sizing_style(src)
 
-    render_img_tag(src, title, height)
+    render_img_tag(src, title, sizing_style)
   end
 
   private
@@ -15,9 +15,25 @@ class BaseMarkdownRenderer < CommonMarker::HtmlRenderer
     ]
   end
 
-  def extract_image_height(src)
+  # Drag-resize from the reply editor encodes the chosen width as cw_image_width
+  # on the URL; the older message-signature picker uses cw_image_height. Width
+  # wins when both are set so the agent's most recent intent is honored.
+  def extract_image_sizing_style(src)
     query_params = parse_query_params(src)
-    query_params['cw_image_height']&.first
+    width = sanitize_pixel_value(query_params['cw_image_width']&.first)
+    return "width: #{width}; max-width: 100%; height: auto;" if width
+
+    height = sanitize_pixel_value(query_params['cw_image_height']&.first)
+    height ? "height: #{height};" : nil
+  end
+
+  # Only allow a bounded `<digits>px` value so the decoded query param can't
+  # break out of the inline style attribute (HTML attribute injection).
+  def sanitize_pixel_value(raw)
+    return unless raw =~ /\A(\d+)px\z/
+
+    px = Regexp.last_match(1).to_i
+    "#{px}px" if px.between?(1, 2000)
   end
 
   def parse_query_params(url)
@@ -27,13 +43,13 @@ class BaseMarkdownRenderer < CommonMarker::HtmlRenderer
     {}
   end
 
-  def render_img_tag(src, title, height = nil)
+  def render_img_tag(src, title, sizing_style = nil)
     title_attribute = title.present? ? " title=\"#{title}\"" : ''
-    # Use inline style instead of the HTML height attribute: email clients and
-    # the in-app Letter view both run images through CSS (e.g. prose /
+    # Use inline style instead of HTML width/height attributes: email clients
+    # and the in-app Letter view both run images through CSS (e.g. prose /
     # lettersanitizer's `img { height: auto }`) which overrides presentational
     # attributes. Inline style has higher specificity and survives.
-    style_attribute = height ? " style=\"height: #{height};\"" : ''
+    style_attribute = sizing_style ? " style=\"#{sizing_style}\"" : ''
 
     plain do
       # plain ensures that the content is not wrapped in a paragraph tag

lib/captain/base_task_service.rb

@@ -150,13 +150,12 @@ class Captain::BaseTaskService
   end
 
   # Extension point consulted by the Enterprise quota wrapper. Subclasses
-  # whose calls run on the operator's key (e.g. internal/onboarding tasks)
-  # should override this to return false. When false, the wrapper neither
-  # blocks the call on an exhausted captain_responses quota nor decrements
-  # it on success — the call participates in the quota system in neither
-  # direction.
+  # whose calls should not consume captain_responses should override this to
+  # return false. When false, the wrapper neither blocks the call on an
+  # exhausted captain_responses quota nor decrements it on success — the call
+  # participates in the quota system in neither direction.
   def counts_toward_usage?
-    true
+    llm_credential&.dig(:source) != :hook
   end
 
   def api_key_configured?
@@ -168,7 +167,15 @@ class Captain::BaseTaskService
   end
 
   def llm_credential
-    @llm_credential ||= hook_llm_credential || system_llm_credential
+    @llm_credential ||= if use_account_openai_hook?
+                          hook_llm_credential || system_llm_credential
+                        else
+                          system_llm_credential
+                        end
+  end
+
+  def use_account_openai_hook?
+    false
   end
 
   def hook_llm_credential

lib/captain/csat_utility_analysis_service.rb

@@ -63,4 +63,8 @@ class Captain::CsatUtilityAnalysisService < Captain::BaseTaskService
   def event_name
     'csat_utility_analysis'
   end
+
+  def use_account_openai_hook?
+    true
+  end
 end

lib/captain/follow_up_service.rb

@@ -103,4 +103,8 @@ class Captain::FollowUpService < Captain::BaseTaskService
   def event_name
     'follow_up'
   end
+
+  def use_account_openai_hook?
+    true
+  end
 end

lib/captain/label_suggestion_service.rb

@@ -87,6 +87,10 @@ class Captain::LabelSuggestionService < Captain::BaseTaskService
     'label_suggestion'
   end
 
+  def use_account_openai_hook?
+    true
+  end
+
   def build_follow_up_context?
     false
   end

lib/captain/reply_suggestion_service.rb

@@ -37,6 +37,10 @@ class Captain::ReplySuggestionService < Captain::BaseTaskService
   def event_name
     'reply_suggestion'
   end
+
+  def use_account_openai_hook?
+    true
+  end
 end
 
 Captain::ReplySuggestionService.prepend_mod_with('Captain::ReplySuggestionService')