Merge develop into feat/voice-channel

Resolved conflicts: - Voice.vue: Keep modern composition API version from develop - ChannelItem.vue: Add voice channel feature flag check - inboxes_controller.rb: Use allowed_channel_types method - schema.rb: Add account_id index for voice channels - inboxMgmt.json: Fix voice channel translations - Note: Voice channel logic in base files removed in develop (moved to enterprise) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-06 12:55:26 +00:00 · 2025-06-25 16:04:27 -07:00
parent bca048fc69 b7f2c151bf
commit bd84d1b17e
49 changed files with 858 additions and 438 deletions
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -172,6 +172,8 @@ GEM
      bundler (>= 1.2.0, < 3)
      thor (~> 1.0)
    byebug (11.1.3)
+    childprocess (5.1.0)
+      logger (~> 1.5)
    climate_control (1.2.0)
    coderay (1.1.3)
    commonmarker (0.23.10)
@@ -435,10 +437,12 @@ GEM
      json (>= 1.8)
      rexml
    language_server-protocol (3.17.0.5)
-    launchy (2.5.2)
+    launchy (3.1.1)
      addressable (~> 2.8)
-    letter_opener (1.8.1)
-      launchy (>= 2.2, < 3)
+      childprocess (~> 5.0)
+      logger (~> 1.6)
+    letter_opener (1.10.0)
+      launchy (>= 2.2, < 4)
    line-bot-api (1.28.0)
    lint_roller (1.1.0)
    liquid (5.4.0)
@@ -565,7 +569,7 @@ GEM
      method_source (~> 1.0)
    pry-rails (0.3.9)
      pry (>= 0.10.4)
-    public_suffix (6.0.0)
+    public_suffix (6.0.2)
    puma (6.4.3)
      nio4r (~> 2.0)
    pundit (2.3.0)
--- a/app/controllers/api/v1/accounts/inboxes_controller.rb
+++ b/app/controllers/api/v1/accounts/inboxes_controller.rb
@@ -81,11 +81,15 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
  end

  def create_channel
-    return unless %w[web_widget api email line telegram whatsapp sms voice].include?(permitted_params[:channel][:type])
+    return unless allowed_channel_types.include?(permitted_params[:channel][:type])

    account_channels_method.create!(permitted_params(channel_type_from_params::EDITABLE_ATTRS)[:channel].except(:type))
  end

+  def allowed_channel_types
+    %w[web_widget api email line telegram whatsapp sms]
+  end
+
  def update_inbox_working_hours
    @inbox.update_working_hours(params.permit(working_hours: Inbox::OFFISABLE_ATTRS)[:working_hours]) if params[:working_hours]
  end
--- a/app/controllers/public/api/v1/portals/articles_controller.rb
+++ b/app/controllers/public/api/v1/portals/articles_controller.rb
@@ -7,7 +7,11 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B

  def index
    @articles = @portal.articles.published.includes(:category, :author)
+
+    @articles = @articles.where(locale: permitted_params[:locale]) if permitted_params[:locale].present?
+
    @articles_count = @articles.count
+
    search_articles
    order_by_sort_param
    limit_results
--- a/app/javascript/dashboard/components-next/captain/assistant/ResponseCard.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/ResponseCard.vue
@@ -123,7 +123,7 @@ const handleDocumentableClick = () => {
    @mouseenter="emit('hover', true)"
    @mouseleave="emit('hover', false)"
  >
-    <div v-show="selectable" class="absolute top-7 ltr:left-4 rtl:right-4">
+    <div v-show="selectable" class="absolute top-7 ltr:left-3 rtl:right-3">
      <Checkbox v-model="modelValue" />
    </div>
    <div class="flex relative justify-between w-full gap-1">
--- a/app/javascript/dashboard/components-next/icon/provider.js
+++ b/app/javascript/dashboard/components-next/icon/provider.js
@@ -13,6 +13,7 @@ export function useChannelIcon(inbox) {
    'Channel::WebWidget': 'i-ri-global-fill',
    'Channel::Whatsapp': 'i-ri-whatsapp-fill',
    'Channel::Instagram': 'i-ri-instagram-fill',
+    'Channel::Voice': 'i-ri-phone-fill',
  };

  const providerIconMap = {
--- a/app/javascript/dashboard/components-next/icon/specs/provider.spec.js
+++ b/app/javascript/dashboard/components-next/icon/specs/provider.spec.js
@@ -19,6 +19,12 @@ describe('useChannelIcon', () => {
    expect(icon).toBe('i-ri-whatsapp-fill');
  });

+  it('returns correct icon for Voice channel', () => {
+    const inbox = { channel_type: 'Channel::Voice' };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-phone-fill');
+  });
+
  describe('Email channel', () => {
    it('returns mail icon for generic email channel', () => {
      const inbox = { channel_type: 'Channel::Email' };
--- a/app/javascript/dashboard/components-next/input/Input.vue
+++ b/app/javascript/dashboard/components-next/input/Input.vue
@@ -1,51 +1,21 @@
 <script setup>
-import { computed, ref, onMounted, nextTick } from 'vue';
+import { computed, ref, onMounted, nextTick, getCurrentInstance } from 'vue';
 const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: '',
-  },
-  type: {
-    type: String,
-    default: 'text',
-  },
-  customInputClass: {
-    type: [String, Object, Array],
-    default: '',
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  id: {
-    type: String,
-    default: '',
-  },
-  message: {
-    type: String,
-    default: '',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
+  modelValue: { type: [String, Number], default: '' },
+  type: { type: String, default: 'text' },
+  customInputClass: { type: [String, Object, Array], default: '' },
+  placeholder: { type: String, default: '' },
+  label: { type: String, default: '' },
+  id: { type: String, default: '' },
+  message: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
  messageType: {
    type: String,
    default: 'info',
    validator: value => ['info', 'error', 'success'].includes(value),
  },
-  min: {
-    type: String,
-    default: '',
-  },
-  autofocus: {
-    type: Boolean,
-    default: false,
-  },
+  min: { type: String, default: '' },
+  autofocus: { type: Boolean, default: false },
 });

 const emit = defineEmits([
@@ -56,6 +26,10 @@ const emit = defineEmits([
  'enter',
 ]);

+// Generate a unique ID per component instance when `id` prop is not provided.
+const { uid } = getCurrentInstance();
+const uniqueId = computed(() => props.id || `input-${uid}`);
+
 const isFocused = ref(false);
 const inputRef = ref(null);

@@ -111,7 +85,7 @@ onMounted(() => {
  <div class="relative flex flex-col min-w-0 gap-1">
    <label
      v-if="label"
-      :for="id"
+      :for="uniqueId"
      class="mb-0.5 text-sm font-medium text-n-slate-12"
    >
      {{ label }}
@@ -119,7 +93,7 @@ onMounted(() => {
    <!-- Added prefix slot to allow adding icons to the input -->
    <slot name="prefix" />
    <input
-      :id="id"
+      :id="uniqueId"
      ref="inputRef"
      :value="modelValue"
      :class="[
--- a/app/javascript/dashboard/components/ChannelSelector.vue
+++ b/app/javascript/dashboard/components/ChannelSelector.vue
@@ -17,7 +17,7 @@ export default {
  <button
    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
  >
-    <img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />
+    <img :src="src" :alt="title" draggable="false" class="w-1/2 my-4 mx-auto" />
    <h3
      class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
    >
--- a/app/javascript/dashboard/components/table/Table.vue
+++ b/app/javascript/dashboard/components/table/Table.vue
@@ -21,7 +21,7 @@ const props = defineProps({
 const isRelaxed = computed(() => props.type === 'relaxed');
 const headerClass = computed(() =>
  isRelaxed.value
-    ? 'first:rounded-bl-lg first:rounded-tl-lg last:rounded-br-lg last:rounded-tr-lg'
+    ? 'ltr:first:rounded-bl-lg ltr:first:rounded-tl-lg ltr:last:rounded-br-lg ltr:last:rounded-tr-lg rtl:first:rounded-br-lg rtl:first:rounded-tr-lg rtl:last:rounded-bl-lg rtl:last:rounded-tl-lg'
    : ''
 );
 </script>
--- a/app/javascript/dashboard/components/widgets/ChannelItem.vue
+++ b/app/javascript/dashboard/components/widgets/ChannelItem.vue
@@ -40,6 +40,11 @@ export default {
          this.enabledFeatures.channel_instagram && this.hasInstagramConfigured
        );
      }
+
+      if (key === 'voice') {
+        return this.enabledFeatures.channel_voice;
+      }
+
      return [
        'website',
        'twilio',
@@ -50,6 +55,7 @@ export default {
        'telegram',
        'line',
        'instagram',
+        'voice',
      ].includes(key);
    },
  },
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -299,6 +299,46 @@
          "ERROR_MESSAGE": "We were not able to save the WhatsApp channel"
        }
      },
+      "VOICE": {
+        "TITLE": "Voice Channel",
+        "DESC": "Integrate Twilio Voice and start supporting your customers via phone calls.",
+        "PHONE_NUMBER": {
+          "LABEL": "Phone Number",
+          "PLACEHOLDER": "Enter your phone number (e.g. +1234567890)",
+          "ERROR": "Please provide a valid phone number in E.164 format (e.g. +1234567890)"
+        },
+        "TWILIO": {
+          "ACCOUNT_SID": {
+            "LABEL": "Account SID",
+            "PLACEHOLDER": "Enter your Twilio Account SID",
+            "REQUIRED": "Account SID is required"
+          },
+          "AUTH_TOKEN": {
+            "LABEL": "Auth Token",
+            "PLACEHOLDER": "Enter your Twilio Auth Token",
+            "REQUIRED": "Auth Token is required"
+          },
+          "API_KEY_SID": {
+            "LABEL": "API Key SID",
+            "PLACEHOLDER": "Enter your Twilio API Key SID",
+            "REQUIRED": "API Key SID is required"
+          },
+          "API_KEY_SECRET": {
+            "LABEL": "API Key Secret",
+            "PLACEHOLDER": "Enter your Twilio API Key Secret",
+            "REQUIRED": "API Key Secret is required"
+          },
+          "TWIML_APP_SID": {
+            "LABEL": "TwiML App SID",
+            "PLACEHOLDER": "Enter your Twilio TwiML App SID (starts with AP)",
+            "REQUIRED": "TwiML App SID is required"
+          }
+        },
+        "SUBMIT_BUTTON": "Create Voice Channel",
+        "API": {
+          "ERROR_MESSAGE": "We were not able to create the voice channel"
+        }
+      },
      "API_CHANNEL": {
        "TITLE": "API Channel",
        "DESC": "Integrate with API channel and start supporting your customers.",
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -537,6 +537,8 @@
        "CONVERSATION": "Conversation #{id}"
      },
      "SELECTED": "{count} selected",
+      "SELECT_ALL": "Select all ({count})",
+      "UNSELECT_ALL": "Unselect all ({count})",
      "BULK_APPROVE_BUTTON": "Approve",
      "BULK_DELETE_BUTTON": "Delete",
      "BULK_APPROVE": {
--- a/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue
@@ -157,6 +157,13 @@ const bulkCheckbox = computed({
  },
 });

+const buildSelectedCountLabel = computed(() => {
+  const count = responses.value?.length || 0;
+  return bulkSelectionState.value.allSelected
+    ? t('CAPTAIN.RESPONSES.UNSELECT_ALL', { count })
+    : t('CAPTAIN.RESPONSES.SELECT_ALL', { count });
+});
+
 const handleCardHover = (isHovered, id) => {
  hoveredCard.value = isHovered ? id : null;
 };
@@ -270,7 +277,11 @@ onMounted(() => {
    <template #controls>
      <div
        v-if="shouldShowDropdown"
-        class="mb-4 -mt-3 flex justify-between items-center"
+        class="mb-4 -mt-3 flex justify-between items-center w-fit py-1"
+        :class="{
+          'ltr:pl-3 rtl:pr-3 ltr:pr-1 rtl:pl-1 rounded-lg outline outline-1 outline-n-weak bg-n-solid-3':
+            bulkSelectionState.hasSelected,
+        }"
      >
        <div v-if="!bulkSelectionState.hasSelected" class="flex gap-3">
          <OnClickOutside @trigger="isStatusFilterOpen = false">
@@ -306,13 +317,18 @@ onMounted(() => {
        >
          <div
            v-if="bulkSelectionState.hasSelected"
-            class="flex items-center gap-3 ltr:pl-4 rtl:pr-4"
+            class="flex items-center gap-3"
          >
-            <div class="flex items-center gap-1.5">
-              <Checkbox
-                v-model="bulkCheckbox"
-                :indeterminate="bulkSelectionState.isIndeterminate"
-              />
+            <div class="flex items-center gap-3">
+              <div class="flex items-center gap-1.5">
+                <Checkbox
+                  v-model="bulkCheckbox"
+                  :indeterminate="bulkSelectionState.isIndeterminate"
+                />
+                <span class="text-sm text-n-slate-12 font-medium tabular-nums">
+                  {{ buildSelectedCountLabel }}
+                </span>
+              </div>
              <span class="text-sm text-n-slate-10 tabular-nums">
                {{
                  $t('CAPTAIN.RESPONSES.SELECTED', {
@@ -322,17 +338,23 @@ onMounted(() => {
              </span>
            </div>
            <div class="h-4 w-px bg-n-strong" />
-            <div class="flex gap-2">
+            <div class="flex gap-3 items-center">
              <Button
                :label="$t('CAPTAIN.RESPONSES.BULK_APPROVE_BUTTON')"
                sm
-                slate
+                ghost
+                icon="i-lucide-check"
+                class="!px-1.5"
                @click="handleBulkApprove"
              />
+              <div class="h-4 w-px bg-n-strong" />
              <Button
                :label="$t('CAPTAIN.RESPONSES.BULK_DELETE_BUTTON')"
                sm
-                slate
+                ruby
+                ghost
+                class="!px-1.5"
+                icon="i-lucide-trash"
                @click="bulkDeleteDialog.dialogRef.open()"
              />
            </div>
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue
@@ -1,6 +1,7 @@
 <script setup>
 import IframeLoader from 'shared/components/IframeLoader.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import { useMapGetter } from 'dashboard/composables/store';

 defineProps({
  url: {
@@ -11,6 +12,8 @@ defineProps({

 const emit = defineEmits(['back', 'insert']);

+const isRTL = useMapGetter('accounts/isRTL');
+
 const onBack = e => {
  e.stopPropagation();
  emit('back');
@@ -35,7 +38,7 @@ const onInsert = e => {
    </div>
    <div class="-ml-4 h-full overflow-y-auto">
      <div class="w-full h-full min-h-0">
-        <IframeLoader :url="url" />
+        <IframeLoader :url="url" :is-rtl="isRTL" is-dir-applied />
      </div>
    </div>

--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
@@ -37,6 +37,7 @@ export default {
        { key: 'telegram', name: 'Telegram' },
        { key: 'line', name: 'Line' },
        { key: 'instagram', name: 'Instagram' },
+        { key: 'voice', name: 'Voice' },
      ];
    },
    ...mapGetters({
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Voice.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Voice.vue
@@ -1,278 +1,182 @@
-<script>
+<script setup>
+import { reactive, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
-import { mapGetters } from 'vuex';
-import router from '../../../../index';
+import { isPhoneE164 } from 'shared/helpers/Validators';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+
 import PageHeader from '../../SettingsSubPageHeader.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
-// Using a regex validator for phone numbers
-const validPhoneNumber = value => {
-  if (!value) return true;
-  return /^\+[1-9]\d{1,14}$/.test(value);
+
+const { t } = useI18n();
+const store = useStore();
+const router = useRouter();
+
+const state = reactive({
+  phoneNumber: '',
+  accountSid: '',
+  authToken: '',
+  apiKeySid: '',
+  apiKeySecret: '',
+  twimlAppSid: '',
+});
+
+const uiFlags = useMapGetter('inboxes/getUIFlags');
+
+const validationRules = {
+  phoneNumber: { required, isPhoneE164 },
+  accountSid: { required },
+  authToken: { required },
+  apiKeySid: { required },
+  apiKeySecret: { required },
+  twimlAppSid: { required },
 };

-export default {
-  components: {
-    PageHeader,
-    NextButton,
-  },
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      provider: 'twilio',
-      phoneNumber: '',
-      accountSid: '',
-      authToken: '',
-      apiKeySid: '',
-      apiKeySecret: '',
-      twimlAppSid: '',
-      providerOptions: [
-        { value: 'twilio', label: 'Twilio' },
-        // Add more providers as needed
-        // { value: 'other_provider', label: 'Other Provider' },
-      ],
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'inboxes/getUIFlags',
-    }),
-  },
-  validations() {
-    return {
-      phoneNumber: {
-        required,
-        validPhoneNumber,
-      },
-      accountSid: {
-        required: this.provider === 'twilio',
-      },
-      authToken: {
-        required: this.provider === 'twilio',
-      },
-      apiKeySid: {
-        required: this.provider === 'twilio',
-      },
-      apiKeySecret: {
-        required: this.provider === 'twilio',
-      },
-      // TwiML App SID is not required, but if provided it must follow Twilio's format
-      twimlAppSid: {
-        // Optional - will not be required
-      },
-    };
-  },
-  methods: {
-    onProviderChange() {
-      // Reset fields when provider changes
-      this.v$.$reset();
-    },
-    getProviderConfig() {
-      if (this.provider === 'twilio') {
-        const config = {
-          account_sid: this.accountSid,
-          auth_token: this.authToken,
-          api_key_sid: this.apiKeySid,
-          api_key_secret: this.apiKeySecret,
-        };
-        
-        // Add the TwiML App SID if provided
-        if (this.twimlAppSid) {
-          config.outgoing_application_sid = this.twimlAppSid;
-        }
-        
-        return config;
-      }
-      // Add handler for other providers here
-      return {};
-    },
-    async createChannel() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
+const v$ = useVuelidate(validationRules, state);
+const isSubmitDisabled = computed(() => v$.value.$invalid);

-      try {
-        const providerConfig = this.getProviderConfig();
+const formErrors = computed(() => ({
+  phoneNumber: v$.value.phoneNumber?.$error
+    ? t('INBOX_MGMT.ADD.VOICE.PHONE_NUMBER.ERROR')
+    : '',
+  accountSid: v$.value.accountSid?.$error
+    ? t('INBOX_MGMT.ADD.VOICE.TWILIO.ACCOUNT_SID.REQUIRED')
+    : '',
+  authToken: v$.value.authToken?.$error
+    ? t('INBOX_MGMT.ADD.VOICE.TWILIO.AUTH_TOKEN.REQUIRED')
+    : '',
+  apiKeySid: v$.value.apiKeySid?.$error
+    ? t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SID.REQUIRED')
+    : '',
+  apiKeySecret: v$.value.apiKeySecret?.$error
+    ? t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SECRET.REQUIRED')
+    : '',
+  twimlAppSid: v$.value.twimlAppSid?.$error
+    ? t('INBOX_MGMT.ADD.VOICE.TWILIO.TWIML_APP_SID.REQUIRED')
+    : '',
+}));

-        const channel = await this.$store.dispatch(
-          'inboxes/createVoiceChannel',
-          {
-            voice: {
-              name: `Voice (${this.phoneNumber})`,
-              phone_number: this.phoneNumber,
-              provider: this.provider,
-              provider_config: JSON.stringify(providerConfig),
-            },
-          }
-        );
+function getProviderConfig() {
+  const config = {
+    account_sid: state.accountSid,
+    auth_token: state.authToken,
+    api_key_sid: state.apiKeySid,
+    api_key_secret: state.apiKeySecret,
+  };
+  if (state.twimlAppSid) config.outgoing_application_sid = state.twimlAppSid;
+  return config;
+}

-        router.replace({
-          name: 'settings_inboxes_add_agents',
-          params: {
-            page: 'new',
-            inbox_id: channel.id,
-          },
-        });
-      } catch (error) {
-        useAlert(
-          error.response?.data?.message ||
-            this.$t('INBOX_MGMT.ADD.VOICE.API.ERROR_MESSAGE')
-        );
-      }
-    },
-  },
-};
+async function createChannel() {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) return;
+
+  try {
+    const channel = await store.dispatch('inboxes/createVoiceChannel', {
+      name: `Voice (${state.phoneNumber})`,
+      voice: {
+        phone_number: state.phoneNumber,
+        provider: 'twilio',
+        provider_config: getProviderConfig(),
+      },
+    });
+
+    router.replace({
+      name: 'settings_inboxes_add_agents',
+      params: { page: 'new', inbox_id: channel.id },
+    });
+  } catch (error) {
+    useAlert(
+      error.response?.data?.message ||
+        t('INBOX_MGMT.ADD.VOICE.API.ERROR_MESSAGE')
+    );
+  }
+}
 </script>

 <template>
-  <div>
+  <div
+    class="overflow-auto col-span-6 p-6 w-full h-full rounded-t-lg border border-b-0 border-n-weak bg-n-solid-1"
+  >
    <PageHeader
-      :header-title="$t('INBOX_MGMT.ADD.VOICE.TITLE')"
-      :header-content="$t('INBOX_MGMT.ADD.VOICE.DESC')"
+      :header-title="t('INBOX_MGMT.ADD.VOICE.TITLE')"
+      :header-content="t('INBOX_MGMT.ADD.VOICE.DESC')"
    />

    <form
-      class="flex flex-wrap flex-col gap-4 p-2"
+      class="flex flex-col gap-4 flex-wrap mx-0"
      @submit.prevent="createChannel"
    >
-      <div class="flex-shrink-0 flex-grow-0">
-        <label>
-          {{ $t('INBOX_MGMT.ADD.VOICE.PROVIDER.LABEL') }}
-          <select
-            v-model="provider"
-            class="p-2 bg-white border border-n-blue-100 rounded"
-            @change="onProviderChange"
-          >
-            <option
-              v-for="option in providerOptions"
-              :key="option.value"
-              :value="option.value"
-            >
-              {{ option.label }}
-            </option>
-          </select>
-        </label>
-      </div>
+      <Input
+        v-model="state.phoneNumber"
+        :label="t('INBOX_MGMT.ADD.VOICE.PHONE_NUMBER.LABEL')"
+        :placeholder="t('INBOX_MGMT.ADD.VOICE.PHONE_NUMBER.PLACEHOLDER')"
+        :message="formErrors.phoneNumber"
+        :message-type="formErrors.phoneNumber ? 'error' : 'info'"
+        @blur="v$.phoneNumber?.$touch"
+      />

-      <!-- Twilio Provider Config -->
-      <div v-if="provider === 'twilio'" class="flex-shrink-0 flex-grow-0">
-        <div class="flex-shrink-0 flex-grow-0">
-          <label :class="{ error: v$.phoneNumber.$error }">
-            {{ $t('INBOX_MGMT.ADD.VOICE.PHONE_NUMBER.LABEL') }}
-            <input
-              v-model.trim="phoneNumber"
-              type="text"
-              :placeholder="$t('INBOX_MGMT.ADD.VOICE.PHONE_NUMBER.PLACEHOLDER')"
-              @blur="v$.phoneNumber.$touch"
-            />
-            <span v-if="v$.phoneNumber.$error" class="message">
-              {{ $t('INBOX_MGMT.ADD.VOICE.PHONE_NUMBER.ERROR') }}
-            </span>
-          </label>
-        </div>
+      <Input
+        v-model="state.accountSid"
+        :label="t('INBOX_MGMT.ADD.VOICE.TWILIO.ACCOUNT_SID.LABEL')"
+        :placeholder="t('INBOX_MGMT.ADD.VOICE.TWILIO.ACCOUNT_SID.PLACEHOLDER')"
+        :message="formErrors.accountSid"
+        :message-type="formErrors.accountSid ? 'error' : 'info'"
+        @blur="v$.accountSid?.$touch"
+      />

-        <div class="flex-shrink-0 flex-grow-0">
-          <label :class="{ error: v$.accountSid.$error }">
-            {{ $t('INBOX_MGMT.ADD.VOICE.TWILIO.ACCOUNT_SID.LABEL') }}
-            <input
-              v-model.trim="accountSid"
-              type="text"
-              :placeholder="
-                $t('INBOX_MGMT.ADD.VOICE.TWILIO.ACCOUNT_SID.PLACEHOLDER')
-              "
-              @blur="v$.accountSid.$touch"
-            />
-            <span v-if="v$.accountSid.$error" class="message">
-              {{ $t('INBOX_MGMT.ADD.VOICE.TWILIO.ACCOUNT_SID.REQUIRED') }}
-            </span>
-          </label>
-        </div>
+      <Input
+        v-model="state.authToken"
+        type="password"
+        :label="t('INBOX_MGMT.ADD.VOICE.TWILIO.AUTH_TOKEN.LABEL')"
+        :placeholder="t('INBOX_MGMT.ADD.VOICE.TWILIO.AUTH_TOKEN.PLACEHOLDER')"
+        :message="formErrors.authToken"
+        :message-type="formErrors.authToken ? 'error' : 'info'"
+        @blur="v$.authToken?.$touch"
+      />

-        <div class="flex-shrink-0 flex-grow-0">
-          <label :class="{ error: v$.authToken.$error }">
-            {{ $t('INBOX_MGMT.ADD.VOICE.TWILIO.AUTH_TOKEN.LABEL') }}
-            <input
-              v-model.trim="authToken"
-              type="text"
-              :placeholder="
-                $t('INBOX_MGMT.ADD.VOICE.TWILIO.AUTH_TOKEN.PLACEHOLDER')
-              "
-              @blur="v$.authToken.$touch"
-            />
-            <span v-if="v$.authToken.$error" class="message">
-              {{ $t('INBOX_MGMT.ADD.VOICE.TWILIO.AUTH_TOKEN.REQUIRED') }}
-            </span>
-          </label>
-        </div>
+      <Input
+        v-model="state.apiKeySid"
+        :label="t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SID.LABEL')"
+        :placeholder="t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SID.PLACEHOLDER')"
+        :message="formErrors.apiKeySid"
+        :message-type="formErrors.apiKeySid ? 'error' : 'info'"
+        @blur="v$.apiKeySid?.$touch"
+      />

-        <div class="flex-shrink-0 flex-grow-0">
-          <label :class="{ error: v$.apiKeySid.$error }">
-            {{ $t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SID.LABEL', 'API Key SID') }}
-            <input
-              v-model.trim="apiKeySid"
-              type="text"
-              :placeholder="
-                $t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SID.PLACEHOLDER', 'Enter your Twilio API Key SID')
-              "
-              @blur="v$.apiKeySid.$touch"
-            />
-            <span v-if="v$.apiKeySid.$error" class="message">
-              {{ $t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SID.REQUIRED', 'API Key SID is required') }}
-            </span>
-            <span class="help-text">
-              {{ $t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SID.HELP', 'You can create API keys in the Twilio Console') }}
-            </span>
-          </label>
-        </div>
+      <Input
+        v-model="state.apiKeySecret"
+        type="password"
+        :label="t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SECRET.LABEL')"
+        :placeholder="
+          t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SECRET.PLACEHOLDER')
+        "
+        :message="formErrors.apiKeySecret"
+        :message-type="formErrors.apiKeySecret ? 'error' : 'info'"
+        @blur="v$.apiKeySecret?.$touch"
+      />

-        <div class="flex-shrink-0 flex-grow-0">
-          <label :class="{ error: v$.apiKeySecret.$error }">
-            {{ $t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SECRET.LABEL', 'API Key Secret') }}
-            <input
-              v-model.trim="apiKeySecret"
-              type="text"
-              :placeholder="
-                $t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SECRET.PLACEHOLDER', 'Enter your Twilio API Key Secret')
-              "
-              @blur="v$.apiKeySecret.$touch"
-            />
-            <span v-if="v$.apiKeySecret.$error" class="message">
-              {{ $t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SECRET.REQUIRED', 'API Key Secret is required') }}
-            </span>
-          </label>
-        </div>
-        
-        <div class="flex-shrink-0 flex-grow-0">
-          <label>
-            {{ $t('INBOX_MGMT.ADD.VOICE.TWILIO.TWIML_APP_SID.LABEL', 'TwiML App SID (Recommended)') }}
-            <input
-              v-model.trim="twimlAppSid"
-              type="text"
-              :placeholder="
-                $t('INBOX_MGMT.ADD.VOICE.TWILIO.TWIML_APP_SID.PLACEHOLDER', 'Enter your Twilio TwiML App SID (starts with AP)')
-              "
-            />
-            <span class="help-text">
-              {{ $t('INBOX_MGMT.ADD.VOICE.TWILIO.TWIML_APP_SID.HELP', 'Required for browser-based calling. Create a TwiML App in the Twilio Console with Voice URLs pointing to your Chatwoot instance.') }}
-            </span>
-          </label>
-        </div>
-      </div>
+      <Input
+        v-model="state.twimlAppSid"
+        :label="t('INBOX_MGMT.ADD.VOICE.TWILIO.TWIML_APP_SID.LABEL')"
+        :placeholder="
+          t('INBOX_MGMT.ADD.VOICE.TWILIO.TWIML_APP_SID.PLACEHOLDER')
+        "
+        :message="formErrors.twimlAppSid"
+        :message-type="formErrors.twimlAppSid ? 'error' : 'info'"
+        @blur="v$.twimlAppSid?.$touch"
+      />

-      <!-- Add other provider configs here -->
-
-      <div class="mt-4">
+      <div>
        <NextButton
          :is-loading="uiFlags.isCreating"
-          :is-disabled="v$.$invalid"
-          :label="$t('INBOX_MGMT.ADD.VOICE.SUBMIT_BUTTON')"
+          :disabled="isSubmitDisabled"
+          :label="t('INBOX_MGMT.ADD.VOICE.SUBMIT_BUTTON')"
          type="submit"
-          color="blue"
-          @click="createChannel"
        />
      </div>
    </form>
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
@@ -75,10 +75,34 @@ export default {
    onRegistrationSuccess() {
      this.hasEnabledPushPermissions = true;
    },
-    onRequestPermissions() {
-      requestPushPermissions({
-        onSuccess: this.onRegistrationSuccess,
-      });
+    onRequestPermissions(value) {
+      if (value) {
+        // Enable / re-enable push notifications
+        requestPushPermissions({
+          onSuccess: this.onRegistrationSuccess,
+        });
+      } else {
+        // Disable push notifications
+        this.disablePushPermissions();
+      }
+    },
+    disablePushPermissions() {
+      verifyServiceWorkerExistence(registration =>
+        registration.pushManager
+          .getSubscription()
+          .then(subscription => {
+            if (subscription) {
+              return subscription.unsubscribe();
+            }
+            return null;
+          })
+          .finally(() => {
+            this.hasEnabledPushPermissions = false;
+          })
+          .catch(() => {
+            // error
+          })
+      );
    },
    getPushSubscription() {
      verifyServiceWorkerExistence(registration =>
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SummaryReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SummaryReports.vue
@@ -59,7 +59,7 @@ const defaulSpanRender = cellProps =>
    cellProps.getValue()
  );

-const columns = [
+const columns = computed(() => [
  columnHelper.accessor('name', {
    header: t(`SUMMARY_REPORTS.${props.type.toUpperCase()}`),
    width: 300,
@@ -90,7 +90,7 @@ const columns = [
    width: 200,
    cell: defaulSpanRender,
  }),
-];
+]);

 const renderAvgTime = value => (value ? formatTime(value) : '--');

@@ -142,7 +142,9 @@ const table = useVueTable({
  get data() {
    return tableData.value;
  },
-  columns,
+  get columns() {
+    return columns.value;
+  },
  enableSorting: false,
  getCoreRowModel: getCoreRowModel(),
 });
--- a/app/javascript/dashboard/store/modules/inboxes.js
+++ b/app/javascript/dashboard/store/modules/inboxes.js
@@ -9,29 +9,7 @@ import { throwErrorMessage } from '../utils/api';
 import AnalyticsHelper from '../../helper/AnalyticsHelper';
 import camelcaseKeys from 'camelcase-keys';
 import { ACCOUNT_EVENTS } from '../../helper/AnalyticsHelper/events';
-
-const buildInboxData = inboxParams => {
-  const formData = new FormData();
-  const { channel = {}, ...inboxProperties } = inboxParams;
-  Object.keys(inboxProperties).forEach(key => {
-    formData.append(key, inboxProperties[key]);
-  });
-  const { selectedFeatureFlags, ...channelParams } = channel;
-  // selectedFeatureFlags needs to be empty when creating a website channel
-  if (selectedFeatureFlags) {
-    if (selectedFeatureFlags.length) {
-      selectedFeatureFlags.forEach(featureFlag => {
-        formData.append(`channel[selected_feature_flags][]`, featureFlag);
-      });
-    } else {
-      formData.append('channel[selected_feature_flags][]', '');
-    }
-  }
-  Object.keys(channelParams).forEach(key => {
-    formData.append(`channel[${key}]`, channel[key]);
-  });
-  return formData;
-};
+import { channelActions, buildInboxData } from './inboxes/channelActions';

 export const state = {
  records: [],
@@ -253,6 +231,12 @@ export const actions = {
      throw new Error(error);
    }
  },
+  ...channelActions,
+  // TODO: Extract other create channel methods to separate files to reduce file size
+  // - createChannel
+  // - createWebsiteChannel
+  // - createTwilioChannel
+  // - createFBChannel
  updateInbox: async ({ commit }, { id, formData = true, ...inboxParams }) => {
    commit(types.default.SET_INBOXES_UI_FLAG, { isUpdating: true });
    try {
--- a/app/javascript/dashboard/store/modules/inboxes/channelActions.js
+++ b/app/javascript/dashboard/store/modules/inboxes/channelActions.js
@@ -0,0 +1,52 @@
+import * as types from '../../mutation-types';
+import InboxesAPI from '../../../api/inboxes';
+import AnalyticsHelper from '../../../helper/AnalyticsHelper';
+import { ACCOUNT_EVENTS } from '../../../helper/AnalyticsHelper/events';
+
+export const buildInboxData = inboxParams => {
+  const formData = new FormData();
+  const { channel = {}, ...inboxProperties } = inboxParams;
+  Object.keys(inboxProperties).forEach(key => {
+    formData.append(key, inboxProperties[key]);
+  });
+  const { selectedFeatureFlags, ...channelParams } = channel;
+  // selectedFeatureFlags needs to be empty when creating a website channel
+  if (selectedFeatureFlags) {
+    if (selectedFeatureFlags.length) {
+      selectedFeatureFlags.forEach(featureFlag => {
+        formData.append(`channel[selected_feature_flags][]`, featureFlag);
+      });
+    } else {
+      formData.append('channel[selected_feature_flags][]', '');
+    }
+  }
+  Object.keys(channelParams).forEach(key => {
+    formData.append(`channel[${key}]`, channel[key]);
+  });
+  return formData;
+};
+
+const sendAnalyticsEvent = channelType => {
+  AnalyticsHelper.track(ACCOUNT_EVENTS.ADDED_AN_INBOX, {
+    channelType,
+  });
+};
+
+export const channelActions = {
+  createVoiceChannel: async ({ commit }, params) => {
+    try {
+      commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: true });
+      const response = await InboxesAPI.create({
+        name: params.name,
+        channel: { ...params.voice, type: 'voice' },
+      });
+      commit(types.default.ADD_INBOXES, response.data);
+      commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: false });
+      sendAnalyticsEvent('voice');
+      return response.data;
+    } catch (error) {
+      commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: false });
+      throw error;
+    }
+  },
+};
--- a/app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js
@@ -62,6 +62,28 @@ describe('#actions', () => {
    });
  });

+  describe('#createVoiceChannel', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({ data: inboxList[0] });
+      await actions.createVoiceChannel({ commit }, inboxList[0]);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isCreating: true }],
+        [types.default.ADD_INBOXES, inboxList[0]],
+        [types.default.SET_INBOXES_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.createVoiceChannel({ commit })).rejects.toThrow(
+        Error
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isCreating: true }],
+        [types.default.SET_INBOXES_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+  });
+
  describe('#createFBChannel', () => {
    it('sends correct actions if API is success', async () => {
      axios.post.mockResolvedValue({ data: inboxList[0] });
--- a/app/javascript/portal/portalHelpers.js
+++ b/app/javascript/portal/portalHelpers.js
@@ -112,11 +112,14 @@ export const InitializationHelpers = {
  },

  setDirectionAttribute: () => {
-    const portalElement = document.getElementById('portal');
-    if (!portalElement) return;
+    const htmlElement = document.querySelector('html');
+    // If direction is already applied through props, do not apply again (iframe case)
+    const hasDirApplied = htmlElement.getAttribute('data-dir-applied');
+    if (!htmlElement || hasDirApplied) return;

-    const locale = document.querySelector('.locale-switcher')?.value;
-    portalElement.dir = locale && getLanguageDirection(locale) ? 'rtl' : 'ltr';
+    const localeFromHtml = htmlElement.lang;
+    htmlElement.dir =
+      localeFromHtml && getLanguageDirection(localeFromHtml) ? 'rtl' : 'ltr';
  },

  initializeThemesInPortal: initializeTheme,
--- a/app/javascript/shared/components/IframeLoader.vue
+++ b/app/javascript/shared/components/IframeLoader.vue
@@ -1,64 +1,56 @@
-<script>
+<script setup>
+import { ref, useTemplateRef, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import ArticleSkeletonLoader from 'shared/components/ArticleSkeletonLoader.vue';

-export default {
-  name: 'IframeLoader',
-  components: {
-    ArticleSkeletonLoader,
+const props = defineProps({
+  url: {
+    type: String,
+    default: '',
  },
-  props: {
-    url: {
-      type: String,
-      default: '',
-    },
-    isRtl: {
-      type: Boolean,
-      default: false,
-    },
+  isRtl: {
+    type: Boolean,
+    default: false,
  },
-  data() {
-    return {
-      isLoading: true,
-      showEmptyState: !this.url,
-    };
+  isDirApplied: {
+    type: Boolean,
+    default: false,
  },
-  watch: {
-    isRtl: {
-      immediate: true,
-      handler(value) {
-        this.$nextTick(() => {
-          const iframeElement = this.$el.querySelector('iframe');
-          if (iframeElement) {
-            iframeElement.onload = () => {
-              try {
-                const iframeDocument =
-                  iframeElement.contentDocument ||
-                  (iframeElement.contentWindow &&
-                    iframeElement.contentWindow.document);
+});

-                if (iframeDocument) {
-                  iframeDocument.documentElement.dir = value ? 'rtl' : 'ltr';
-                }
-              } catch (e) {
-                // error
-              }
-            };
-          }
-        });
-      },
-    },
-  },
-  methods: {
-    handleIframeLoad() {
-      // Once loaded, the loading state is hidden
-      this.isLoading = false;
-    },
-    handleIframeError() {
-      // Hide the loading state and show the empty state when an error occurs
-      this.isLoading = false;
-      this.showEmptyState = true;
-    },
-  },
+const { t } = useI18n();
+
+const iframe = useTemplateRef('iframe');
+const isLoading = ref(true);
+const showEmptyState = ref(!props.url);
+
+const direction = computed(() => (props.isRtl ? 'rtl' : 'ltr'));
+
+const applyDirection = () => {
+  if (!iframe.value) return;
+  if (!props.isDirApplied) return; // If direction is already applied through props, do not apply again (iframe case)
+  try {
+    const doc =
+      iframe.value.contentDocument || iframe.value.contentWindow?.document;
+    if (doc?.documentElement) {
+      doc.documentElement.dir = direction.value;
+      doc.documentElement.setAttribute('data-dir-applied', 'true');
+    }
+  } catch (e) {
+    // error
+  }
+};
+
+watch(() => props.isRtl, applyDirection);
+
+const handleIframeLoad = () => {
+  isLoading.value = false;
+  applyDirection();
+};
+
+const handleIframeError = () => {
+  isLoading.value = false;
+  showEmptyState.value = true;
 };
 </script>

@@ -66,6 +58,7 @@ export default {
  <div class="relative overflow-hidden pb-1/2 h-full">
    <iframe
      v-if="url"
+      ref="iframe"
      :src="url"
      class="absolute w-full h-full top-0 left-0"
      @load="handleIframeLoad"
@@ -79,7 +72,7 @@ export default {
      v-if="showEmptyState"
      class="absolute w-full h-full top-0 left-0 flex justify-center items-center"
    >
-      <p>{{ $t('PORTAL.IFRAME_ERROR') }}</p>
+      <p>{{ t('PORTAL.IFRAME_ERROR') }}</p>
    </div>
  </div>
 </template>
--- a/app/javascript/shared/helpers/portalHelper.js
+++ b/app/javascript/shared/helpers/portalHelper.js
@@ -0,0 +1,40 @@
+/**
+ * Determine the best-matching locale from the list of locales allowed by the portal.
+ *
+ * The matching happens in the following order:
+ * 1. Exact match – the visitor-selected locale equals one in the `allowedLocales` list
+ *    (e.g., `fr` ➜ `fr`).
+ * 2. Base language match – the base part of a compound locale (before the underscore)
+ *    matches (e.g., `fr_CA` ➜ `fr`).
+ * 3. Variant match – when the base language is selected but a regional variant exists
+ *    in the portal list (e.g., `fr` ➜ `fr_BE`).
+ *
+ * If none of these rules find a match, the function returns `null`,
+ * Don't show popular articles if locale doesn't match with allowed locales
+ *
+ * @export
+ * @param {string} selectedLocale The locale selected by the visitor (e.g., `fr_CA`).
+ * @param {string[]} allowedLocales Array of locales enabled for the portal.
+ * @returns {(string|null)} A locale string that should be used, or `null` if no suitable match.
+ */
+export const getMatchingLocale = (selectedLocale = '', allowedLocales = []) => {
+  // Ensure inputs are valid
+  if (
+    !selectedLocale ||
+    !Array.isArray(allowedLocales) ||
+    !allowedLocales.length
+  ) {
+    return null;
+  }
+
+  const [lang] = selectedLocale.split('_');
+
+  const priorityMatches = [
+    selectedLocale, // exact match
+    lang, // base language match
+    allowedLocales.find(l => l.startsWith(`${lang}_`)), // first variant match
+  ];
+
+  // Return the first match that exists in the allowed list, or null
+  return priorityMatches.find(l => l && allowedLocales.includes(l)) ?? null;
+};
--- a/app/javascript/shared/helpers/specs/portalHelper.spec.js
+++ b/app/javascript/shared/helpers/specs/portalHelper.spec.js
@@ -0,0 +1,28 @@
+import { getMatchingLocale } from 'shared/helpers/portalHelper';
+
+describe('portalHelper - getMatchingLocale', () => {
+  it('returns exact match when present', () => {
+    const result = getMatchingLocale('fr', ['en', 'fr']);
+    expect(result).toBe('fr');
+  });
+
+  it('returns base language match when exact variant not present', () => {
+    const result = getMatchingLocale('fr_CA', ['en', 'fr']);
+    expect(result).toBe('fr');
+  });
+
+  it('returns variant match when base language not present', () => {
+    const result = getMatchingLocale('fr', ['en', 'fr_BE']);
+    expect(result).toBe('fr_BE');
+  });
+
+  it('returns null when no match found', () => {
+    const result = getMatchingLocale('de', ['en', 'fr']);
+    expect(result).toBeNull();
+  });
+
+  it('returns null for invalid inputs', () => {
+    expect(getMatchingLocale('', [])).toBeNull();
+    expect(getMatchingLocale(null, null)).toBeNull();
+  });
+});
--- a/app/javascript/widget/components/pageComponents/Home/Article/ArticleContainer.vue
+++ b/app/javascript/widget/components/pageComponents/Home/Article/ArticleContainer.vue
@@ -7,6 +7,7 @@ import { useRouter } from 'vue-router';
 import { useStore } from 'dashboard/composables/store';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import { useDarkMode } from 'widget/composables/useDarkMode';
+import { getMatchingLocale } from 'shared/helpers/portalHelper';

 const store = useStore();
 const router = useRouter();
@@ -20,17 +21,8 @@ const articleUiFlags = useMapGetter('article/uiFlags');

 const locale = computed(() => {
  const { locale: selectedLocale } = i18n;
-  const {
-    allowed_locales: allowedLocales,
-    default_locale: defaultLocale = 'en',
-  } = portal.value.config;
-  // IMPORTANT: Variation strict locale matching, Follow iso_639_1_code
-  // If the exact match of a locale is available in the list of portal locales, return it
-  // Else return the default locale. Eg: `es` will not work if `es_ES` is available in the list
-  if (allowedLocales.includes(selectedLocale)) {
-    return locale;
-  }
-  return defaultLocale;
+  const { allowed_locales: allowedLocales } = portal.value.config;
+  return getMatchingLocale(selectedLocale.value, allowedLocales);
 });

 const fetchArticles = () => {
@@ -46,6 +38,7 @@ const openArticleInArticleViewer = link => {
  const params = new URLSearchParams({
    show_plain_layout: 'true',
    theme: prefersDarkMode.value ? 'dark' : 'light',
+    ...(locale.value && { locale: locale.value }),
  });

  // Combine link with query parameters
@@ -64,7 +57,8 @@ const hasArticles = computed(
  () =>
    !articleUiFlags.value.isFetching &&
    !articleUiFlags.value.isError &&
-    !!popularArticles.value.length
+    !!popularArticles.value.length &&
+    !!locale.value
 );
 onMounted(() => fetchArticles());
 </script>
--- a/app/javascript/widget/store/modules/articles.js
+++ b/app/javascript/widget/store/modules/articles.js
@@ -23,6 +23,7 @@ export const actions = {
    commit('setError', false);

    try {
+      if (!locale) return;
      const cachedData = getFromCache(`${CACHE_KEY_PREFIX}${slug}_${locale}`);
      if (cachedData) {
        commit('setArticles', cachedData);
--- a/app/javascript/widget/views/ArticleViewer.vue
+++ b/app/javascript/widget/views/ArticleViewer.vue
@@ -1,24 +1,16 @@
 <script>
 import IframeLoader from 'shared/components/IframeLoader.vue';
-import { getLanguageDirection } from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';

 export default {
  name: 'ArticleViewer',
  components: {
    IframeLoader,
  },
-  computed: {
-    isRTL() {
-      return this.$root.$i18n.locale
-        ? getLanguageDirection(this.$root.$i18n.locale)
-        : false;
-    },
-  },
 };
 </script>

 <template>
  <div class="bg-white h-full">
-    <IframeLoader :url="$route.query.link" :is-rtl="isRTL" />
+    <IframeLoader :url="$route.query.link" />
  </div>
 </template>
--- a/app/services/llm_formatter/conversation_llm_formatter.rb
+++ b/app/services/llm_formatter/conversation_llm_formatter.rb
@@ -5,22 +5,34 @@ class LlmFormatter::ConversationLlmFormatter < LlmFormatter::DefaultLlmFormatter
    sections << "Channel: #{@record.inbox.channel.name}"
    sections << 'Message History:'
    sections << if @record.messages.any?
-                  build_messages
+                  build_messages(config)
                else
                  'No messages in this conversation'
                end

    sections << "Contact Details: #{@record.contact.to_llm_text}" if config[:include_contact_details]
+
+    attributes = build_attributes
+    if attributes.present?
+      sections << 'Conversation Attributes:'
+      sections << attributes
+    end
+
    sections.join("\n")
  end

  private

-  def build_messages
+  def build_messages(config = {})
    return "No messages in this conversation\n" if @record.messages.empty?

    message_text = ''
-    @record.messages.chat.order(created_at: :asc).each do |message|
+    messages = @record.messages.where.not(message_type: :activity).order(created_at: :asc)
+
+    messages.each do |message|
+      # Skip private messages unless explicitly included in config
+      next if message.private? && !config[:include_private_messages]
+
      message_text << format_message(message)
    end
    message_text
@@ -28,6 +40,14 @@ class LlmFormatter::ConversationLlmFormatter < LlmFormatter::DefaultLlmFormatter

  def format_message(message)
    sender = message.message_type == 'incoming' ? 'User' : 'Support agent'
+    sender = "[Private Note] #{sender}" if message.private?
    "#{sender}: #{message.content}\n"
  end
+
+  def build_attributes
+    attributes = @record.account.custom_attribute_definitions.with_attribute_model('conversation_attribute').map do |attribute|
+      "#{attribute.attribute_display_name}: #{@record.custom_attributes[attribute.attribute_key]}"
+    end
+    attributes.join("\n")
+  end
 end
--- a/app/views/mailers/administrator_notifications/account_compliance_mailer/account_deleted.liquid
+++ b/app/views/mailers/administrator_notifications/account_compliance_mailer/account_deleted.liquid
@@ -6,8 +6,8 @@
  <strong>Chatwoot Installation:</strong> {{ meta.instance_url }}<br>
  <strong>Account ID:</strong> {{ meta.account_id }}<br>
  <strong>Account Name:</strong> {{ meta.account_name }}<br>
+  <strong>Deletion due at:</strong> {{ meta.marked_for_deletion_at }}<br>
  <strong>Deleted At:</strong> {{ meta.deleted_at }}<br>
-  <strong>Marked for Deletion at:</strong> {{ meta.marked_for_deletion_at }}<br>
  <strong>Deletion Reason:</strong> {{ meta.deletion_reason }}
 </p>

--- a/app/views/mailers/conversation_reply_mailer/email_reply.html.erb
+++ b/app/views/mailers/conversation_reply_mailer/email_reply.html.erb
@@ -1,5 +1,5 @@
 <% if @message.content %>
-  <%= ChatwootMarkdownRenderer.new(@message.content).render_message %>
+  <%= ChatwootMarkdownRenderer.new(@message.outgoing_content).render_message %>
 <% end %>
 <% if @large_attachments.present? %>
  <p>Attachments:</p>
--- a/config/features.yml
+++ b/config/features.yml
@@ -168,4 +168,8 @@
  enabled: true
 - name: crm_integration
  display_name: CRM Integration
-  enabled: false
+  enabled: false
+- name: channel_voice
+  display_name: Voice Channel
+  enabled: false
+  chatwoot_internal: true
--- a/db/migrate/20250620120000_create_channel_voice.rb
+++ b/db/migrate/20250620120000_create_channel_voice.rb
@@ -0,0 +1,16 @@
+class CreateChannelVoice < ActiveRecord::Migration[7.0]
+  def change
+    create_table :channel_voice do |t|
+      t.string :phone_number, null: false
+      t.string :provider, null: false, default: 'twilio'
+      t.jsonb :provider_config, null: false
+      t.integer :account_id, null: false
+      t.jsonb :additional_attributes, default: {}
+
+      t.timestamps
+    end
+
+    add_index :channel_voice, :phone_number, unique: true
+    add_index :channel_voice, :account_id
+  end
+end
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.

-ActiveRecord::Schema[7.1].define(version: 2025_05_23_031839) do
+ActiveRecord::Schema[7.1].define(version: 2025_06_20_120000) do
  # These extensions should be enabled to support this database
  enable_extension "pg_stat_statements"
  enable_extension "pg_trgm"
@@ -451,6 +451,7 @@ ActiveRecord::Schema[7.1].define(version: 2025_05_23_031839) do
    t.jsonb "additional_attributes", default: {}
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
+    t.index ["account_id"], name: "index_channel_voice_on_account_id"
    t.index ["phone_number"], name: "index_channel_voice_on_phone_number", unique: true
  end

--- a/enterprise/app/controllers/enterprise/api/v1/accounts/inboxes_controller.rb
+++ b/enterprise/app/controllers/enterprise/api/v1/accounts/inboxes_controller.rb
@@ -6,4 +6,28 @@ module Enterprise::Api::V1::Accounts::InboxesController
  def ee_inbox_attributes
    [auto_assignment_config: [:max_assignment_limit]]
  end
+
+  private
+
+  def allowed_channel_types
+    super + ['voice']
+  end
+
+  def channel_type_from_params
+    case permitted_params[:channel][:type]
+    when 'voice'
+      Channel::Voice
+    else
+      super
+    end
+  end
+
+  def account_channels_method
+    case permitted_params[:channel][:type]
+    when 'voice'
+      Current.account.voice_channels
+    else
+      super
+    end
+  end
 end
--- a/enterprise/app/jobs/captain/conversation/response_builder_job.rb
+++ b/enterprise/app/jobs/captain/conversation/response_builder_job.rb
@@ -13,7 +13,7 @@ class Captain::Conversation::ResponseBuilderJob < ApplicationJob
      generate_and_process_response
    end
  rescue StandardError => e
-    raise e if e.is_a?(ActiveJob::FileNotFoundError)
+    raise e if e.is_a?(ActiveStorage::FileNotFoundError)

    handle_error(e)
  ensure
--- a/enterprise/app/models/channel/voice.rb
+++ b/enterprise/app/models/channel/voice.rb
@@ -0,0 +1,64 @@
+# == Schema Information
+#
+# Table name: channel_voice
+#
+#  id                    :bigint           not null, primary key
+#  additional_attributes :jsonb
+#  phone_number          :string           not null
+#  provider              :string           default("twilio"), not null
+#  provider_config       :jsonb            not null
+#  created_at            :datetime         not null
+#  updated_at            :datetime         not null
+#  account_id            :integer          not null
+#
+# Indexes
+#
+#  index_channel_voice_on_account_id    (account_id)
+#  index_channel_voice_on_phone_number  (phone_number) UNIQUE
+#
+class Channel::Voice < ApplicationRecord
+  include Channelable
+
+  self.table_name = 'channel_voice'
+
+  validates :phone_number, presence: true, uniqueness: true
+  validates :provider, presence: true
+  validates :provider_config, presence: true
+
+  # Validate phone number format (E.164 format)
+  validates :phone_number, format: { with: /\A\+[1-9]\d{1,14}\z/ }
+
+  # Provider-specific configs stored in JSON
+  validate :validate_provider_config
+
+  EDITABLE_ATTRS = [:phone_number, :provider, { provider_config: {} }].freeze
+
+  def name
+    "Voice (#{phone_number})"
+  end
+
+  def messaging_window_enabled?
+    false
+  end
+
+  private
+
+  def validate_provider_config
+    return if provider_config.blank?
+
+    case provider
+    when 'twilio'
+      validate_twilio_config
+    end
+  end
+
+  def validate_twilio_config
+    config = provider_config.with_indifferent_access
+    required_keys = %w[account_sid auth_token api_key_sid api_key_secret]
+
+    required_keys.each do |key|
+      errors.add(:provider_config, "#{key} is required for Twilio provider") if config[key].blank?
+    end
+  end
+end
+
--- a/enterprise/app/models/enterprise/concerns/account.rb
+++ b/enterprise/app/models/enterprise/concerns/account.rb
@@ -11,5 +11,6 @@ module Enterprise::Concerns::Account
    has_many :captain_documents, dependent: :destroy_async, class_name: 'Captain::Document'

    has_many :copilot_threads, dependent: :destroy_async
+    has_many :voice_channels, dependent: :destroy_async, class_name: '::Channel::Voice'
  end
 end
--- a/enterprise/app/services/captain/tools/copilot/get_conversation_service.rb
+++ b/enterprise/app/services/captain/tools/copilot/get_conversation_service.rb
@@ -30,7 +30,7 @@ class Captain::Tools::Copilot::GetConversationService < Captain::Tools::BaseServ
    conversation = Conversation.find_by(display_id: conversation_id, account_id: @assistant.account_id)
    return 'Conversation not found' if conversation.blank?

-    conversation.to_llm_text
+    conversation.to_llm_text(include_private_messages: true)
  end

  def active?
--- a/enterprise/app/services/messages/audio_transcription_service.rb
+++ b/enterprise/app/services/messages/audio_transcription_service.rb
@@ -20,7 +20,7 @@ class Messages::AudioTranscriptionService < Llm::BaseOpenAiService
  private

  def can_transcribe?
-    return false if account.feature_enabled?('captain_integration')
+    return false unless account.feature_enabled?('captain_integration')
    return false if account.audio_transcriptions.blank?

    account.usage_limits[:captain][:responses][:current_available].positive?
--- a/spec/controllers/public/api/v1/portals/articles_controller_spec.rb
+++ b/spec/controllers/public/api/v1/portals/articles_controller_spec.rb
@@ -65,6 +65,14 @@ RSpec.describe 'Public Articles API', type: :request do
      expect(response).to have_http_status(:success)
      response_data = JSON.parse(response.body, symbolize_names: true)[:payload]
      expect(response_data.length).to eq(2)
+      # Only count articles in the current locale (category.locale is 'en')
+      expect(JSON.parse(response.body, symbolize_names: true)[:meta][:articles_count]).to eq(3)
+    end
+
+    it 'returns articles count from all locales when locale parameter is not present' do
+      get "/hc/#{portal.slug}/articles.json"
+
+      expect(response).to have_http_status(:success)
      expect(JSON.parse(response.body, symbolize_names: true)[:meta][:articles_count]).to eq(5)
    end

--- a/spec/enterprise/controllers/enterprise/api/v1/accounts/inboxes_controller_spec.rb
+++ b/spec/enterprise/controllers/enterprise/api/v1/accounts/inboxes_controller_spec.rb
@@ -22,6 +22,22 @@ RSpec.describe 'Enterprise Inboxes API', type: :request do
        expect(response).to have_http_status(:success)
        expect(JSON.parse(response.body)['auto_assignment_config']['max_assignment_limit']).to eq 10
      end
+
+      it 'creates a voice inbox when administrator' do
+        post "/api/v1/accounts/#{account.id}/inboxes",
+             headers: admin.create_new_auth_token,
+             params: { name: 'Voice Inbox',
+                       channel: { type: 'voice', phone_number: '+15551234567',
+                                  provider_config: { account_sid: "AC#{SecureRandom.hex(16)}",
+                                                     auth_token: SecureRandom.hex(16),
+                                                     api_key_sid: SecureRandom.hex(8),
+                                                     api_key_secret: SecureRandom.hex(16) } } },
+             as: :json
+
+        expect(response).to have_http_status(:success)
+        expect(response.body).to include('Voice Inbox')
+        expect(response.body).to include('+15551234567')
+      end
    end
  end

--- a/spec/enterprise/models/channel/voice_spec.rb
+++ b/spec/enterprise/models/channel/voice_spec.rb
@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe Channel::Voice do
+  let(:channel) { create(:channel_voice) }
+
+  it 'has a valid factory' do
+    expect(channel).to be_valid
+  end
+
+  describe 'validations' do
+    it 'validates presence of provider_config' do
+      channel.provider_config = nil
+      expect(channel).not_to be_valid
+      expect(channel.errors[:provider_config]).to include("can't be blank")
+    end
+
+    it 'validates presence of account_sid in provider_config' do
+      channel.provider_config = { auth_token: 'token' }
+      expect(channel).not_to be_valid
+      expect(channel.errors[:provider_config]).to include('account_sid is required for Twilio provider')
+    end
+
+    it 'validates presence of auth_token in provider_config' do
+      channel.provider_config = { account_sid: 'sid' }
+      expect(channel).not_to be_valid
+      expect(channel.errors[:provider_config]).to include('auth_token is required for Twilio provider')
+    end
+
+    it 'validates presence of api_key_sid in provider_config' do
+      channel.provider_config = { account_sid: 'sid', auth_token: 'token' }
+      expect(channel).not_to be_valid
+      expect(channel.errors[:provider_config]).to include('api_key_sid is required for Twilio provider')
+    end
+
+    it 'validates presence of api_key_secret in provider_config' do
+      channel.provider_config = { account_sid: 'sid', auth_token: 'token', api_key_sid: 'key' }
+      expect(channel).not_to be_valid
+      expect(channel.errors[:provider_config]).to include('api_key_secret is required for Twilio provider')
+    end
+
+    it 'is valid with all required provider_config fields' do
+      channel.provider_config = {
+        account_sid: 'test_sid',
+        auth_token: 'test_token',
+        api_key_sid: 'test_key',
+        api_key_secret: 'test_secret'
+      }
+      expect(channel).to be_valid
+    end
+  end
+
+  describe '#name' do
+    it 'returns Voice with phone number' do
+      expect(channel.name).to include('Voice')
+      expect(channel.name).to include(channel.phone_number)
+    end
+  end
+end
--- a/spec/enterprise/services/captain/tools/copilot/get_conversation_service_spec.rb
+++ b/spec/enterprise/services/captain/tools/copilot/get_conversation_service_spec.rb
@@ -128,6 +128,29 @@ RSpec.describe Captain::Tools::Copilot::GetConversationService do
        expect(result).to eq(conversation.to_llm_text)
      end

+      it 'includes private messages in the llm text format' do
+        # Create a regular message
+        create(:message,
+               conversation: conversation,
+               message_type: 'outgoing',
+               content: 'Regular message',
+               private: false)
+
+        # Create a private message
+        create(:message,
+               conversation: conversation,
+               message_type: 'outgoing',
+               content: 'Private note content',
+               private: true)
+
+        result = service.execute({ 'conversation_id' => conversation.display_id })
+
+        # Verify that the result includes both regular and private messages
+        expect(result).to include('Regular message')
+        expect(result).to include('Private note content')
+        expect(result).to include('[Private Note]')
+      end
+
      context 'when conversation belongs to different account' do
        let(:other_account) { create(:account) }
        let(:other_inbox) { create(:inbox, account: other_account) }
--- a/spec/enterprise/services/messages/audio_transcription_service_spec.rb
+++ b/spec/enterprise/services/messages/audio_transcription_service_spec.rb
@@ -18,6 +18,16 @@ RSpec.describe Messages::AudioTranscriptionService, type: :service do
  describe '#perform' do
    let(:service) { described_class.new(attachment) }

+    context 'when captain_integration feature is not enabled' do
+      before do
+        account.disable_features!('captain_integration')
+      end
+
+      it 'returns transcription limit exceeded' do
+        expect(service.perform).to eq({ error: 'Transcription limit exceeded' })
+      end
+    end
+
    context 'when transcription is successful' do
      before do
        # Mock can_transcribe? to return true and transcribe_audio method
--- a/spec/factories/channel/channel_voice.rb
+++ b/spec/factories/channel/channel_voice.rb
@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+FactoryBot.define do
+  factory :channel_voice, class: 'Channel::Voice' do
+    sequence(:phone_number) { |n| "+155512345#{n.to_s.rjust(2, '0')}" }
+    provider_config do
+      {
+        account_sid: "AC#{SecureRandom.hex(16)}",
+        auth_token: SecureRandom.hex(16),
+        api_key_sid: SecureRandom.hex(8),
+        api_key_secret: SecureRandom.hex(16)
+      }
+    end
+    account
+
+    after(:create) do |channel_voice|
+      create(:inbox, channel: channel_voice, account: channel_voice.account)
+    end
+  end
+end
--- a/spec/mailers/conversation_reply_mailer_spec.rb
+++ b/spec/mailers/conversation_reply_mailer_spec.rb
@@ -154,6 +154,27 @@ RSpec.describe ConversationReplyMailer do
        expect(mail.message_id).to eq message.source_id
      end

+      context 'when message is a CSAT survey' do
+        let(:csat_message) do
+          create(:message, conversation: conversation, account: account, message_type: 'template',
+                           content_type: 'input_csat', content: 'How would you rate our support?', sender: agent)
+        end
+
+        it 'includes CSAT survey URL in outgoing_content' do
+          with_modified_env 'FRONTEND_URL' => 'https://app.chatwoot.com' do
+            mail = described_class.email_reply(csat_message).deliver_now
+            expect(mail.decoded).to include "https://app.chatwoot.com/survey/responses/#{conversation.uuid}"
+          end
+        end
+
+        it 'uses outgoing_content for CSAT message body' do
+          with_modified_env 'FRONTEND_URL' => 'https://app.chatwoot.com' do
+            mail = described_class.email_reply(csat_message).deliver_now
+            expect(mail.decoded).to include csat_message.outgoing_content
+          end
+        end
+      end
+
      context 'with email attachments' do
        it 'includes small attachments as email attachments' do
          message_with_attachment = create(:message, conversation: conversation, account: account, message_type: 'outgoing',
--- a/spec/presenters/message_content_presenter_spec.rb
+++ b/spec/presenters/message_content_presenter_spec.rb
@@ -34,20 +34,21 @@ RSpec.describe MessageContentPresenter do

      before do
        allow(message.inbox).to receive(:web_widget?).and_return(false)
-        allow(ENV).to receive(:fetch).with('FRONTEND_URL', nil).and_return('https://app.chatwoot.com')
      end

      it 'returns I18n default message when no CSAT config and dynamically generates survey URL' do
-        expected_url = "https://app.chatwoot.com/survey/responses/#{conversation.uuid}"
-        allow(I18n).to receive(:t).with('conversations.survey.response', link: expected_url)
-                                  .and_return("Please rate this conversation, #{expected_url}")
-        expect(presenter.outgoing_content).to eq("Please rate this conversation, #{expected_url}")
+        with_modified_env 'FRONTEND_URL' => 'https://app.chatwoot.com' do
+          expected_url = "https://app.chatwoot.com/survey/responses/#{conversation.uuid}"
+          expect(presenter.outgoing_content).to include(expected_url)
+        end
      end

      it 'returns CSAT config message when config exists and dynamically generates survey URL' do
-        allow(message.inbox).to receive(:csat_config).and_return({ 'message' => 'Custom CSAT message' })
-        expected_url = "https://app.chatwoot.com/survey/responses/#{conversation.uuid}"
-        expect(presenter.outgoing_content).to eq("Custom CSAT message #{expected_url}")
+        with_modified_env 'FRONTEND_URL' => 'https://app.chatwoot.com' do
+          allow(message.inbox).to receive(:csat_config).and_return({ 'message' => 'Custom CSAT message' })
+          expected_url = "https://app.chatwoot.com/survey/responses/#{conversation.uuid}"
+          expect(presenter.outgoing_content).to eq("Custom CSAT message #{expected_url}")
+        end
      end
    end
  end
--- a/spec/services/llm_formatter/conversation_llm_formatter_spec.rb
+++ b/spec/services/llm_formatter/conversation_llm_formatter_spec.rb
@@ -61,5 +61,30 @@ RSpec.describe LlmFormatter::ConversationLlmFormatter do
        expect(formatter.format(include_contact_details: true)).to eq(expected_output)
      end
    end
+
+    context 'when conversation has custom attributes' do
+      it 'includes formatted custom attributes in the output' do
+        create(
+          :custom_attribute_definition,
+          account: account,
+          attribute_display_name: 'Order ID',
+          attribute_key: 'order_id',
+          attribute_model: :conversation_attribute
+        )
+
+        conversation.update(custom_attributes: { 'order_id' => '12345' })
+
+        expected_output = [
+          "Conversation ID: ##{conversation.display_id}",
+          "Channel: #{conversation.inbox.channel.name}",
+          'Message History:',
+          'No messages in this conversation',
+          'Conversation Attributes:',
+          'Order ID: 12345'
+        ].join("\n")
+
+        expect(formatter.format).to eq(expected_output)
+      end
+    end
  end
 end