Merge branch 'develop' into feat/voice-call-improvements

app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue

@@ -26,6 +26,7 @@ const onPortalCreate = ({ slug: portalSlug, locale }) => {
   <EmptyStateLayout
     :title="$t('HELP_CENTER.TITLE')"
     :subtitle="$t('HELP_CENTER.NEW_PAGE.DESCRIPTION')"
+    class="bg-n-surface-1"
   >
     <template #empty-state-item>
       <div class="grid grid-cols-2 gap-4 p-px">

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

@@ -1,8 +1,22 @@
 <script setup>
 import LocaleCard from './LocaleCard.vue';
 const locales = [
-  { name: 'English', isDefault: true, articleCount: 29, categoryCount: 5 },
-  { name: 'Spanish', isDefault: false, articleCount: 29, categoryCount: 5 },
+  {
+    name: 'English',
+    code: 'en',
+    isDefault: true,
+    isDraft: false,
+    articleCount: 29,
+    categoryCount: 5,
+  },
+  {
+    name: 'Spanish',
+    code: 'es',
+    isDefault: false,
+    isDraft: true,
+    articleCount: 29,
+    categoryCount: 5,
+  },
 ];
 </script>
 
@@ -19,6 +33,8 @@ const locales = [
           <LocaleCard
             :locale="locale.name"
             :is-default="locale.isDefault"
+            :is-draft="locale.isDraft"
+            :locale-code="locale.code"
             :article-count="locale.articleCount"
             :category-count="locale.categoryCount"
           />

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

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useToggle } from '@vueuse/core';
-import { LOCALE_MENU_ITEMS } from 'dashboard/helper/portalHelper';
+import { buildLocaleMenuItems } from 'dashboard/helper/portalHelper';
 
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -17,6 +17,10 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
+  isDraft: {
+    type: Boolean,
+    required: true,
+  },
   localeCode: {
     type: String,
     required: true,
@@ -37,11 +41,28 @@ const { t } = useI18n();
 
 const [showDropdownMenu, toggleDropdown] = useToggle();
 
+const localeLabel = computed(() => `${props.locale} (${props.localeCode})`);
+
+const localeMenuLabels = computed(() => ({
+  'change-default': t(
+    'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.MAKE_DEFAULT'
+  ),
+  'move-to-draft': t(
+    'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.MOVE_TO_DRAFT'
+  ),
+  'publish-locale': t(
+    'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.PUBLISH_LOCALE'
+  ),
+  delete: t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.DELETE'),
+}));
+
 const localeMenuItems = computed(() =>
-  LOCALE_MENU_ITEMS.map(item => ({
+  buildLocaleMenuItems({
+    isDefault: props.isDefault,
+    isDraft: props.isDraft,
+  }).map(item => ({
     ...item,
-    label: t(item.label),
-    disabled: props.isDefault,
+    label: localeMenuLabels.value[item.action],
   }))
 );
 
@@ -56,7 +77,7 @@ const handleAction = ({ action, value }) => {
     <div class="flex justify-between gap-2">
       <div class="flex items-center justify-start gap-2">
         <span class="text-sm font-medium text-n-slate-12 line-clamp-1">
-          {{ locale }} ({{ localeCode }})
+          {{ localeLabel }}
         </span>
         <span
           v-if="isDefault"
@@ -64,6 +85,12 @@ const handleAction = ({ action, value }) => {
         >
           {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DEFAULT') }}
         </span>
+        <span
+          v-else-if="isDraft"
+          class="bg-n-alpha-2 h-6 inline-flex items-center justify-center rounded-md text-xs border-px border-transparent text-n-slate-11 px-2 py-0.5"
+        >
+          {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DRAFT') }}
+        </span>
       </div>
       <div class="flex items-center justify-end gap-4">
         <div class="flex items-center gap-4">
@@ -86,6 +113,7 @@ const handleAction = ({ action, value }) => {
           </span>
         </div>
         <div
+          v-if="localeMenuItems.length"
           v-on-clickaway="() => toggleDropdown(false)"
           class="relative group"
         >

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

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'dashboard/composables/store';
 import { useAlert, useTrack } from 'dashboard/composables';
@@ -24,12 +24,20 @@ const dialogRef = ref(null);
 const isUpdating = ref(false);
 
 const selectedLocale = ref('');
+const localeStatus = ref('published');
 
 const addedLocales = computed(() => {
   const { allowed_locales: allowedLocales = [] } = props.portal?.config || {};
   return allowedLocales.map(locale => locale.code);
 });
 
+const draftedLocales = computed(() => {
+  const { allowed_locales: allowedLocales = [] } = props.portal?.config || {};
+  return allowedLocales
+    .filter(locale => locale.draft)
+    .map(locale => locale.code);
+});
+
 const locales = computed(() => {
   return Object.keys(allLocales)
     .map(key => {
@@ -41,17 +49,44 @@ const locales = computed(() => {
     .filter(locale => !addedLocales.value.includes(locale.value));
 });
 
+const statusOptions = computed(() => [
+  {
+    value: 'published',
+    label: t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.STATUS.OPTIONS.LIVE'),
+  },
+  {
+    value: 'draft',
+    label: t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.STATUS.OPTIONS.DRAFT'),
+  },
+]);
+
+const resetForm = () => {
+  selectedLocale.value = '';
+  localeStatus.value = 'published';
+};
+
+watch(localeStatus, value => {
+  if (!value) {
+    localeStatus.value = 'published';
+  }
+});
+
 const onCreate = async () => {
   if (!selectedLocale.value) return;
 
   isUpdating.value = true;
   const updatedLocales = [...addedLocales.value, selectedLocale.value];
+  const updatedDraftLocales =
+    localeStatus.value === 'draft'
+      ? [...new Set([...draftedLocales.value, selectedLocale.value])]
+      : draftedLocales.value;
 
   try {
     await store.dispatch('portals/update', {
       portalSlug: props.portal?.slug,
       config: {
         allowed_locales: updatedLocales,
+        draft_locales: updatedDraftLocales,
         default_locale: props.portal?.meta?.default_locale,
       },
     });
@@ -62,7 +97,7 @@ const onCreate = async () => {
       from: route.name,
     });
 
-    selectedLocale.value = '';
+    resetForm();
     dialogRef.value?.close();
     useAlert(
       t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.API.SUCCESS_MESSAGE')
@@ -87,6 +122,7 @@ defineExpose({ dialogRef });
     type="edit"
     :title="t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.TITLE')"
     :description="t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.DESCRIPTION')"
+    @close="resetForm"
     @confirm="onCreate"
   >
     <div class="flex flex-col gap-6">
@@ -98,6 +134,16 @@ defineExpose({ dialogRef });
         "
         class="[&>div>button:not(.focused)]:!outline-n-slate-5 [&>div>button:not(.focused)]:dark:!outline-n-slate-5"
       />
+      <div class="flex flex-col gap-2">
+        <span class="text-sm font-medium text-n-slate-12">
+          {{ t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.STATUS.LABEL') }}
+        </span>
+        <ComboBox
+          v-model="localeStatus"
+          :options="statusOptions"
+          class="[&>div>button:not(.focused)]:!outline-n-slate-5 [&>div>button:not(.focused)]:dark:!outline-n-slate-5"
+        />
+      </div>
     </div>
   </Dialog>
 </template>

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

@@ -29,6 +29,7 @@ const isLocaleDefault = code => {
 
 const updatePortalLocales = async ({
   newAllowedLocales,
+  newDraftLocales,
   defaultLocale,
   messageKey,
 }) => {
@@ -39,6 +40,7 @@ const updatePortalLocales = async ({
       config: {
         default_locale: defaultLocale,
         allowed_locales: newAllowedLocales,
+        draft_locales: newDraftLocales,
       },
     });
 
@@ -53,8 +55,12 @@ const updatePortalLocales = async ({
 
 const changeDefaultLocale = ({ localeCode }) => {
   const newAllowedLocales = props.locales.map(locale => locale.code);
+  const newDraftLocales = props.locales
+    .filter(locale => locale.isDraft)
+    .map(locale => locale.code);
   updatePortalLocales({
     newAllowedLocales,
+    newDraftLocales,
     defaultLocale: localeCode,
     messageKey: 'CHANGE_DEFAULT_LOCALE',
   });
@@ -81,11 +87,15 @@ const deletePortalLocale = async ({ localeCode }) => {
   const updatedLocales = props.locales
     .filter(locale => locale.code !== localeCode)
     .map(locale => locale.code);
+  const updatedDraftLocales = props.locales
+    .filter(locale => locale.code !== localeCode && locale.isDraft)
+    .map(locale => locale.code);
 
   const defaultLocale = props.portal.meta.default_locale;
 
   await updatePortalLocales({
     newAllowedLocales: updatedLocales,
+    newDraftLocales: updatedDraftLocales,
     defaultLocale,
     messageKey: 'DELETE_LOCALE',
   });
@@ -98,9 +108,46 @@ const deletePortalLocale = async ({ localeCode }) => {
   });
 };
 
+const updateDraftLocales = async ({ localeCode, shouldDraft, messageKey }) => {
+  const newAllowedLocales = props.locales.map(locale => locale.code);
+  const currentDraftLocales = props.locales
+    .filter(locale => locale.isDraft)
+    .map(locale => locale.code);
+  const newDraftLocales = shouldDraft
+    ? [...new Set([...currentDraftLocales, localeCode])]
+    : currentDraftLocales.filter(locale => locale !== localeCode);
+
+  await updatePortalLocales({
+    newAllowedLocales,
+    newDraftLocales,
+    defaultLocale: props.portal.meta.default_locale,
+    messageKey,
+  });
+};
+
+const moveLocaleToDraft = async ({ localeCode }) => {
+  await updateDraftLocales({
+    localeCode,
+    shouldDraft: true,
+    messageKey: 'DRAFT_LOCALE',
+  });
+};
+
+const publishLocale = async ({ localeCode }) => {
+  await updateDraftLocales({
+    localeCode,
+    shouldDraft: false,
+    messageKey: 'PUBLISH_LOCALE',
+  });
+};
+
 const handleAction = ({ action }, localeCode) => {
   if (action === 'change-default') {
     changeDefaultLocale({ localeCode: localeCode });
+  } else if (action === 'move-to-draft') {
+    moveLocaleToDraft({ localeCode: localeCode });
+  } else if (action === 'publish-locale') {
+    publishLocale({ localeCode: localeCode });
   } else if (action === 'delete') {
     deletePortalLocale({ localeCode: localeCode });
   }
@@ -114,6 +161,7 @@ const handleAction = ({ action }, localeCode) => {
       :key="index"
       :locale="locale.name"
       :is-default="isLocaleDefault(locale.code)"
+      :is-draft="locale.isDraft"
       :locale-code="locale.code"
       :article-count="locale.articlesCount || 0"
       :category-count="locale.categoriesCount || 0"

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

@@ -4,37 +4,49 @@ import LocalesPage from './LocalesPage.vue';
 const locales = [
   {
     name: 'English (en-US)',
+    code: 'en',
     isDefault: true,
+    isDraft: false,
     articleCount: 5,
     categoryCount: 5,
   },
   {
     name: 'Spanish (es-ES)',
+    code: 'es',
     isDefault: false,
+    isDraft: true,
     articleCount: 20,
     categoryCount: 10,
   },
   {
     name: 'English (en-UK)',
+    code: 'en_GB',
     isDefault: false,
+    isDraft: false,
     articleCount: 15,
     categoryCount: 7,
   },
   {
     name: 'Malay (ms-MY)',
+    code: 'ms',
     isDefault: false,
+    isDraft: false,
     articleCount: 15,
     categoryCount: 7,
   },
   {
     name: 'Malayalam (ml-IN)',
+    code: 'ml',
     isDefault: false,
+    isDraft: false,
     articleCount: 10,
     categoryCount: 5,
   },
   {
     name: 'Hindi (hi-IN)',
+    code: 'hi',
     isDefault: false,
+    isDraft: false,
     articleCount: 15,
     categoryCount: 7,
   },

app/javascript/dashboard/components-next/Settings/SettingsToggleSection.vue

@@ -14,6 +14,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  hideToggle: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const modelValue = defineModel({ type: Boolean, default: false });
@@ -28,7 +32,8 @@ const modelValue = defineModel({ type: Boolean, default: false });
         <span class="text-heading-3 text-n-slate-12">
           {{ header }}
         </span>
-        <ToggleSwitch v-model="modelValue" />
+        <div v-if="hideToggle" class="size-2" />
+        <ToggleSwitch v-else v-model="modelValue" />
       </div>
       <span v-if="description" class="text-body-main text-n-slate-11">
         {{ description }}

app/javascript/dashboard/components-next/captain/assistant/AssistantPlayground.vue

@@ -80,6 +80,12 @@ const sendMessage = async () => {
     isLoading.value = false;
   }
 };
+
+const handleEnterKey = event => {
+  if (event.isComposing) return;
+  event.preventDefault();
+  sendMessage();
+};
 </script>
 
 <template>
@@ -113,7 +119,7 @@ const sendMessage = async () => {
         v-model="newMessage"
         class="flex-1 bg-transparent border-none focus:outline-none text-sm mb-0 text-n-slate-12 placeholder:text-n-slate-10"
         :placeholder="t('CAPTAIN.PLAYGROUND.MESSAGE_PLACEHOLDER')"
-        @keyup.enter="sendMessage"
+        @keydown.enter.exact="handleEnterKey"
       />
       <NextButton
         ghost

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

@@ -29,6 +29,12 @@ const handleInput = () => {
   nextTick(adjustHeight);
 };
 
+const handleEnterKey = event => {
+  if (event.isComposing) return;
+  event.preventDefault();
+  sendMessage();
+};
+
 onMounted(() => {
   nextTick(adjustHeight);
 });
@@ -43,7 +49,7 @@ onMounted(() => {
       class="w-full reset-base bg-n-alpha-3 ltr:pl-4 ltr:pr-12 rtl:pl-12 rtl:pr-4 py-3 text-sm border border-n-weak rounded-lg focus:outline-0 focus:outline-none focus:ring-2 focus:ring-n-blue-11 focus:border-n-blue-11 resize-none overflow-hidden max-h-[200px] mb-0 text-n-slate-12"
       rows="1"
       @input="handleInput"
-      @keydown.enter.exact.prevent="sendMessage"
+      @keydown.enter.exact="handleEnterKey"
     />
     <button
       class="absolute ltr:right-1 rtl:left-1 top-1/2 -translate-y-1/2 h-9 w-10 flex items-center justify-center text-n-slate-11 hover:text-n-blue-11"

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

@@ -67,6 +67,9 @@ const isSent = computed(() => {
     return sourceId.value && status.value === MESSAGE_STATUS.SENT;
   }
 
+  // API inbox messages use real sent/delivered/read status values from the external system.
+  if (isAPIInbox.value) return status.value === MESSAGE_STATUS.SENT;
+
   // All messages will be mark as sent for the Line channel, as there is no source ID.
   if (isALineChannel.value) return true;
 
@@ -86,8 +89,10 @@ const isDelivered = computed(() => {
   ) {
     return sourceId.value && status.value === MESSAGE_STATUS.DELIVERED;
   }
-  // All messages marked as delivered for the web widget inbox and API inbox once they are sent.
-  if (isAWebWidgetInbox.value || isAPIInbox.value) {
+  // API inbox messages use real delivered status from the external system.
+  if (isAPIInbox.value) return status.value === MESSAGE_STATUS.DELIVERED;
+  // All messages marked as delivered for the web widget inbox once they are sent.
+  if (isAWebWidgetInbox.value) {
     return status.value === MESSAGE_STATUS.SENT;
   }
   if (isALineChannel.value) {