Merge branch 'develop' into feat/CW-7403

2026-07-21 19:32:05 +05:30
parent a745f418cf ed30ff9c22
commit 8a6ab8de3d
73 changed files with 1376 additions and 525 deletions
@@ -0,0 +1,9 @@
+import ApiClient from '../ApiClient';
+
+class CaptainAgentSessions extends ApiClient {
+  constructor() {
+    super('captain/agent_sessions', { accountScoped: true });
+  }
+}
+
+export default new CaptainAgentSessions();
@@ -26,15 +26,18 @@ class CaptainAssistant extends ApiClient {
    });
  }

-  getStats({ assistantId, range }) {
-    return axios.get(`${this.url}/${assistantId}/stats`, {
+  getStats({ assistantId, range, signal }) {
+    const requestConfig = {
      params: { range, timezone_offset: getTimezoneOffset() },
-    });
+    };
+    if (signal) requestConfig.signal = signal;
+
+    return axios.get(`${this.url}/${assistantId}/stats`, requestConfig);
  }

-  getSummary({ assistantId, range }) {
+  getSummary({ assistantId, range, stats }) {
    return axios.get(`${this.url}/${assistantId}/summary`, {
-      params: { range, timezone_offset: getTimezoneOffset() },
+      params: { range, timezone_offset: getTimezoneOffset(), stats },
    });
  }

@@ -10,10 +10,13 @@ class WhatsappCallsAPI extends ApiClient {
    return axios.get(`${this.url}/${callId}`).then(r => r.data);
  }

-  initiate(conversationId, sdpOffer) {
+  // Either conversationId, or contactId + inboxId to let the BE resolve the conversation.
+  initiate({ conversationId, contactId, inboxId }, sdpOffer) {
    return axios
      .post(`${this.url}/initiate`, {
        conversation_id: conversationId,
+        contact_id: contactId,
+        inbox_id: inboxId,
        sdp_offer: sdpOffer,
      })
      .then(r => r.data);
@@ -25,8 +25,11 @@ const route = useRoute();

 const kind = computed(() => getCallKind(props.call));

-const contactName = computed(
-  () => props.call.contact.name || props.call.contact.phoneNumber
+const contactName = computed(() =>
+  (props.call.contact.name || props.call.contact.phoneNumber || '').replace(
+    /^\+/,
+    ''
+  )
 );

 const agentActionLabel = computed(() => {
@@ -16,7 +16,6 @@ import { useAlert } from 'dashboard/composables';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import { useCallsStore } from 'dashboard/stores/calls';
 import { useWhatsappCallSession } from 'dashboard/composables/useWhatsappCallSession';
-import ContactAPI from 'dashboard/api/contacts';

 import Button from 'dashboard/components-next/button/Button.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
@@ -83,39 +82,18 @@ const navigateToConversation = conversationId => {

 const whatsappCallSession = useWhatsappCallSession();

-// Find the most recent open conversation for this contact in the picked inbox.
-// WhatsApp /initiate is conversation-scoped (unlike Twilio's contact-scoped path).
-// Pass inboxId so the BE applies the filter before the 20-row cap — without it,
-// contacts whose latest WhatsApp conversation falls outside the 20 most recent
-// across all inboxes would be treated as having no conversation.
-const findWhatsappConversationId = async inboxId => {
-  const { data } = await ContactAPI.getConversations(props.contactId, {
-    inboxId,
-  });
-  const conversations = data?.payload || [];
-  const match = [...conversations].sort(
-    (a, b) => (b.last_activity_at || 0) - (a.last_activity_at || 0)
-  )[0];
-  return match?.id || null;
-};
-
 const startWhatsappCall = async (inboxId, conversationIdHint) => {
-  // WhatsApp /initiate is conversation-scoped, so we must hand it a
-  // conversation. Use the caller's hint when given (in-conversation flow);
-  // otherwise pick the most recent one in the inbox.
-  const conversationId =
-    conversationIdHint || (await findWhatsappConversationId(inboxId));
-  if (!conversationId) {
-    useAlert(t('CONTACT_PANEL.CALL_FAILED'));
-    return;
-  }
-
-  const response =
-    await whatsappCallSession.initiateOutboundCall(conversationId);
+  const response = await whatsappCallSession.initiateOutboundCall(
+    conversationIdHint
+      ? { conversationId: conversationIdHint }
+      : { contactId: props.contactId, inboxId }
+  );
  // The composable returns { status: 'locked' } when an init is already in
  // flight or a call is already active; treat that as a soft no-op rather than
  // claiming success.
  if (response?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.LOCKED) return;
+
+  const conversationId = response?.conversation_id || conversationIdHint;
  if (!response?.id) {
    // Permission template path returns no call id. Mirror the header button and
    // surface whether the request was just sent or is already pending instead of
@@ -9,6 +9,7 @@ const props = defineProps({
  // null = neutral, true = good direction, false = bad direction
  trendGood: { type: Boolean, default: null },
  clickable: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
 });

 const emit = defineEmits(['click']);
@@ -45,7 +46,11 @@ const onActivate = () => {
        class="transition-opacity opacity-0 cursor-help i-lucide-info size-3.5 text-n-slate-10 group-hover:opacity-100"
      />
    </div>
-    <div class="flex items-end justify-between gap-2">
+    <div v-if="loading" class="flex items-end justify-between gap-2">
+      <div class="w-20 rounded h-9 bg-n-slate-3 animate-pulse" />
+      <div class="w-10 h-5 rounded bg-n-slate-3 animate-pulse" />
+    </div>
+    <div v-else class="flex items-end justify-between gap-2">
      <span
        class="text-3xl font-semibold tracking-tight tabular-nums text-n-slate-12"
      >
@@ -9,6 +9,10 @@ const props = defineProps({
    type: String,
    default: '30',
  },
+  stats: {
+    type: Object,
+    default: null,
+  },
 });

 const route = useRoute();
@@ -20,22 +24,41 @@ const assistantId = computed(() => route.params.assistantId);
 const welcomeMarkdown = ref('');
 const isLoading = ref(false);

+// Increments on every fetch so a slow response for a superseded
+// range/stats/assistant can't overwrite the latest request's state.
+let fetchToken = 0;
+
 const fetchSummary = async () => {
+  fetchToken += 1;
+  const token = fetchToken;
+
+  if (!props.stats) {
+    welcomeMarkdown.value = '';
+    isLoading.value = false;
+    return;
+  }
+
  isLoading.value = true;
+  let message = '';
  try {
    const { data } = await CaptainAssistant.getSummary({
      assistantId: assistantId.value,
      range: props.range,
+      stats: props.stats,
    });
-    welcomeMarkdown.value = data.message ?? '';
+    message = data.message ?? '';
  } catch {
-    welcomeMarkdown.value = '';
-  } finally {
-    isLoading.value = false;
+    message = '';
  }
+
+  if (token !== fetchToken) return;
+  welcomeMarkdown.value = message;
+  isLoading.value = false;
 };

-watch([() => props.range, assistantId], fetchSummary, { immediate: true });
+watch([() => props.range, () => props.stats, assistantId], fetchSummary, {
+  immediate: true,
+});

 // Render through the shared markdown formatter (html disabled, so it is safe)
 // used everywhere else for Captain output, instead of a bespoke parser. It
@@ -3,8 +3,13 @@ import { ref, computed, onMounted, watch } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
 import { useI18n } from 'vue-i18n';
-import { extractFilenameFromUrl } from 'dashboard/helper/URLHelper';
-import { TWILIO_CONTENT_TEMPLATE_TYPES } from 'shared/constants/messages';
+import {
+  isTwilioComplete,
+  isTwilioMediaTemplate,
+  getTwilioMediaVariableKey,
+  getTwilioMediaUrl,
+  applyTwilioMediaFilename,
+} from '@chatwoot/utils';

 import Input from 'dashboard/components-next/input/Input.vue';

@@ -40,30 +45,23 @@ const templateBody = computed(() => {
  return props.template.body || '';
 });

-const hasMediaTemplate = computed(() => {
-  return props.template.template_type === TWILIO_CONTENT_TEMPLATE_TYPES.MEDIA;
-});
+// Media-template detection and variable extraction are shared with the mobile
+// app via @chatwoot/utils.
+const hasMediaTemplate = computed(() => isTwilioMediaTemplate(props.template));

 const hasVariables = computed(() => {
  return templateBody.value?.match(VARIABLE_PATTERN) !== null;
 });

-const mediaVariableKey = computed(() => {
-  if (!hasMediaTemplate.value) return null;
-  const mediaUrl = props.template?.types?.['twilio/media']?.media?.[0];
-  if (!mediaUrl) return null;
-  return mediaUrl.match(/{{(\d+)}}/)?.[1] ?? null;
-});
+const mediaVariableKey = computed(() =>
+  getTwilioMediaVariableKey(props.template)
+);

-const hasMediaVariable = computed(() => {
-  return hasMediaTemplate.value && mediaVariableKey.value !== null;
-});
+const hasMediaVariable = computed(() => mediaVariableKey.value !== null);

-const templateMediaUrl = computed(() => {
-  if (!hasMediaTemplate.value) return '';
-
-  return props.template?.types?.['twilio/media']?.media?.[0] || '';
-});
+const templateMediaUrl = computed(() =>
+  hasMediaTemplate.value ? getTwilioMediaUrl(props.template) : ''
+);

 const variablePattern = computed(() => {
  if (!hasVariables.value) return [];
@@ -83,26 +81,10 @@ const renderedTemplate = computed(() => {
  return rendered;
 });

-const isFormInvalid = computed(() => {
-  if (!hasVariables.value && !hasMediaVariable.value) return false;
-
-  if (hasVariables.value) {
-    const hasEmptyVariable = variablePattern.value.some(
-      variable => !processedParams.value[variable]
-    );
-    if (hasEmptyVariable) return true;
-  }
-
-  if (
-    hasMediaVariable.value &&
-    mediaVariableKey.value &&
-    !processedParams.value[mediaVariableKey.value]
-  ) {
-    return true;
-  }
-
-  return false;
-});
+// Completeness validation is shared with the mobile app via @chatwoot/utils.
+const isFormInvalid = computed(
+  () => !isTwilioComplete(props.template, processedParams.value)
+);

 const v$ = useVuelidate(
  {
@@ -135,19 +117,11 @@ const sendMessage = () => {

  const { friendly_name, language } = props.template;

-  // Process parameters and extract filename from media URL if needed
-  const processedParameters = { ...processedParams.value };
-
-  // For media templates, extract filename from full URL
-  if (
-    hasMediaVariable.value &&
-    mediaVariableKey.value &&
-    processedParameters[mediaVariableKey.value]
-  ) {
-    processedParameters[mediaVariableKey.value] = extractFilenameFromUrl(
-      processedParameters[mediaVariableKey.value]
-    );
-  }
+  // For media templates, reduce the media URL to a filename before sending.
+  const processedParameters = applyTwilioMediaFilename(
+    props.template,
+    processedParams.value
+  );

  const payload = {
    message: renderedTemplate.value,
@@ -0,0 +1,342 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n, I18nT } from 'vue-i18n';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Popover from 'dashboard/components-next/popover/Popover.vue';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import { useMessageContext } from './provider.js';
+import { MESSAGE_VARIANTS, ORIENTATION } from './constants';
+
+const props = defineProps({
+  messageId: { type: Number, required: true },
+});
+
+const { t } = useI18n();
+const { orientation, variant, createdAt } = useMessageContext();
+const store = useStore();
+const { isCloudFeatureEnabled } = useAccount();
+
+const isOpen = ref(false);
+
+const showSparkle = computed(() =>
+  isCloudFeatureEnabled(FEATURE_FLAGS.CAPTAIN_V2)
+);
+
+const session = computed(() =>
+  store.getters['captainAgentSessions/getSessionByMessageId'](props.messageId)
+);
+const hasFetched = computed(() =>
+  store.getters['captainAgentSessions/hasFetched'](props.messageId)
+);
+const isLoading = computed(
+  () =>
+    !hasFetched.value ||
+    store.getters['captainAgentSessions/isFetching'](props.messageId)
+);
+
+const citations = computed(() => session.value?.citations || []);
+
+const scenarioTitles = computed(() =>
+  (session.value?.scenarios || []).reduce((map, scenario) => {
+    map[scenario.id] = scenario.title;
+    return map;
+  }, {})
+);
+
+// Fallback for agents without a matching scenario title:
+// "chatwoot_assistant" → "Chatwoot assistant",
+// "scenario_5_chatwoot_uptime_agent" → "Chatwoot uptime".
+const humanizeAgentName = agentName => {
+  const label = agentName
+    .replace(/^scenario_\d+_/, '')
+    .replace(/_agent$/, '')
+    .replaceAll('_', ' ')
+    .trim();
+  return label.charAt(0).toUpperCase() + label.slice(1);
+};
+
+const handoffLabel = agentName => {
+  const scenarioId = agentName.match(/^scenario_(\d+)/)?.[1];
+  return scenarioTitles.value[scenarioId] || humanizeAgentName(agentName);
+};
+
+const ACRONYMS = ['faq', 'api', 'url', 'id', 'sla', 'csat'];
+
+// Tool names arrive as RubyLLM identifiers like
+// "captain--tools--faq_lookup" or "custom_get_status_page_overview";
+// show "FAQ Lookup" / "Get Status Page Overview" instead.
+const humanizeToolName = name => {
+  return (name || '')
+    .split('--')
+    .pop()
+    .replace(/^custom_/, '')
+    .split('_')
+    .filter(Boolean)
+    .map(word =>
+      ACRONYMS.includes(word)
+        ? word.toUpperCase()
+        : word.charAt(0).toUpperCase() + word.slice(1)
+    )
+    .join(' ');
+};
+
+// Argument keys are camelCased by the store ("labelName"); show "Label Name".
+const humanizeArgumentKey = key =>
+  key
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .split(' ')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+
+const formatArguments = args => {
+  if (!args || typeof args !== 'object') return '';
+  return Object.entries(args)
+    .map(([key, value]) => `${humanizeArgumentKey(key)}: ${value}`)
+    .join(', ');
+};
+
+// Timeline of what Captain did during the run: tool calls (with their
+// arguments) and scenario/agent handoffs. Message bodies and raw tool
+// results are intentionally not echoed here.
+const steps = computed(() => {
+  const runContext = session.value?.runContext;
+  const result = [];
+  let currentAgent = null;
+
+  (Array.isArray(runContext) ? runContext : []).forEach(entry => {
+    if (entry?.role !== 'assistant') return;
+
+    const agentName = entry.agentName;
+    if (agentName && agentName !== currentAgent) {
+      if (currentAgent !== null) {
+        result.push({ type: 'handoff', name: handoffLabel(agentName) });
+      }
+      currentAgent = agentName;
+    }
+
+    (entry.toolCalls || []).forEach(call => {
+      // Agent-to-agent transfers surface as "handoff_to_<agent>" tool calls;
+      // the agent_name change above already yields a handoff step for them.
+      if (call.name?.startsWith('handoff_to_')) return;
+
+      result.push({
+        type: 'tool',
+        name: humanizeToolName(call.name),
+        detail: formatArguments(call.arguments),
+      });
+    });
+  });
+
+  return result;
+});
+
+// The final assistant entry stores structured content ({response, reasoning});
+// surface the model's reasoning for the reply it produced.
+const reasoning = computed(() => {
+  const runContext = session.value?.runContext;
+  if (!Array.isArray(runContext)) return '';
+
+  const entry = [...runContext]
+    .reverse()
+    .find(item => item?.role === 'assistant' && item.content?.reasoning);
+  return entry?.content?.reasoning || '';
+});
+
+const STEP_ICONS = {
+  tool: 'i-ph-wrench',
+  handoff: 'i-ph-user-switch',
+};
+
+const STEP_KEYPATHS = {
+  tool: 'CONVERSATION.CAPTAIN_GENERATION.STEP_TOOL',
+  handoff: 'CONVERSATION.CAPTAIN_GENERATION.STEP_HANDOFF',
+};
+
+const currentUser = useMapGetter('getCurrentUser');
+const isSuperAdmin = computed(() => currentUser.value.type === 'SuperAdmin');
+
+// Model and credits are only surfaced to super admins and in development.
+const devDetails = computed(() => {
+  if (!session.value) return null;
+  if (!import.meta.env.DEV && !isSuperAdmin.value) return null;
+  const model = t('CONVERSATION.CAPTAIN_GENERATION.MODEL', {
+    model: session.value.llmModel,
+  });
+  const credits = t('CONVERSATION.CAPTAIN_GENERATION.CREDITS', {
+    credits: session.value.creditsConsumed,
+  });
+  return `${model} · ${credits}`;
+});
+
+// With the sparkle at the row start, the meta gets pushed to the opposite end;
+// without it, fall back to the message orientation.
+const rowLayoutClass = computed(() => {
+  if (showSparkle.value) return 'justify-between';
+  return orientation.value === ORIENTATION.LEFT
+    ? 'justify-start'
+    : 'justify-end';
+});
+
+// Blend the sparkle with the bubble background: amber on private notes,
+// slate everywhere else. Tokens adapt to dark mode on their own.
+const sparkleColorClass = computed(() => {
+  if (variant.value === MESSAGE_VARIANTS.PRIVATE) {
+    return isOpen.value
+      ? 'text-n-amber-12/80'
+      : 'text-n-amber-12/40 hover:text-n-amber-12/70';
+  }
+  return isOpen.value
+    ? 'text-n-slate-12'
+    : 'text-n-slate-11/60 hover:text-n-slate-12';
+});
+
+const popoverAlign = computed(() =>
+  orientation.value === ORIENTATION.LEFT ? 'start' : 'end'
+);
+
+const prefetch = () => {
+  store.dispatch('captainAgentSessions/fetch', {
+    messageId: props.messageId,
+    createdAt: createdAt.value,
+  });
+};
+
+const onPopoverShow = () => {
+  isOpen.value = true;
+  prefetch();
+};
+
+const onPopoverHide = () => {
+  isOpen.value = false;
+};
+</script>
+
+<template>
+  <div class="flex items-center gap-1.5" :class="rowLayoutClass">
+    <Popover
+      v-if="showSparkle"
+      :align="popoverAlign"
+      @show="onPopoverShow"
+      @hide="onPopoverHide"
+    >
+      <button
+        v-tooltip="t('CONVERSATION.CAPTAIN_GENERATION.TITLE')"
+        type="button"
+        class="inline-flex items-center gap-1 p-0 bg-transparent border-0 cursor-pointer"
+        :class="sparkleColorClass"
+        @mouseenter="prefetch"
+        @focus="prefetch"
+      >
+        <Icon icon="i-ph-sparkle-fill" class="size-3.5" />
+        <span class="text-xs">
+          {{ t('CONVERSATION.CAPTAIN_GENERATION.GENERATED_BY') }}
+        </span>
+      </button>
+      <template #content>
+        <div class="flex flex-col gap-4 p-4 w-80">
+          <span v-if="isLoading" class="text-xs text-n-slate-11">
+            {{ t('CONVERSATION.CAPTAIN_GENERATION.LOADING') }}
+          </span>
+          <span v-else-if="!session" class="text-xs text-n-slate-11">
+            {{ t('CONVERSATION.CAPTAIN_GENERATION.EMPTY') }}
+          </span>
+          <template v-else>
+            <div v-if="steps.length" class="flex flex-col gap-2">
+              <span class="text-xs font-medium text-n-slate-11">
+                {{ t('CONVERSATION.CAPTAIN_GENERATION.TIMELINE') }}
+              </span>
+              <div class="flex flex-col">
+                <div
+                  v-for="(step, index) in steps"
+                  :key="index"
+                  class="flex gap-2.5"
+                >
+                  <div class="flex flex-col items-center">
+                    <span
+                      class="flex items-center justify-center rounded-full size-5 bg-n-alpha-2 text-n-slate-11"
+                    >
+                      <Icon :icon="STEP_ICONS[step.type]" class="size-3" />
+                    </span>
+                    <span
+                      v-if="index < steps.length - 1"
+                      class="flex-1 w-px min-h-2 bg-n-weak"
+                    />
+                  </div>
+                  <div
+                    class="flex flex-col min-w-0 gap-0.5"
+                    :class="index < steps.length - 1 ? 'pb-3' : ''"
+                  >
+                    <I18nT
+                      :keypath="STEP_KEYPATHS[step.type]"
+                      tag="span"
+                      class="text-xs leading-5 text-n-slate-11"
+                    >
+                      <template #name>
+                        <span class="font-medium text-n-slate-12">
+                          {{ step.name }}
+                        </span>
+                      </template>
+                    </I18nT>
+                    <span
+                      v-if="step.detail"
+                      class="text-xs text-n-slate-11 break-words"
+                    >
+                      {{ step.detail }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div v-if="citations.length" class="flex flex-col gap-2">
+              <div class="flex items-baseline gap-1.5">
+                <span class="text-xs font-medium text-n-slate-11">
+                  {{ t('CONVERSATION.CAPTAIN_GENERATION.SOURCES') }}
+                </span>
+                <span class="text-xs text-n-slate-10">
+                  {{
+                    t(
+                      'CONVERSATION.CAPTAIN_GENERATION.SOURCES_SUMMARY',
+                      citations.length
+                    )
+                  }}
+                </span>
+              </div>
+              <ul class="flex flex-col gap-1 m-0 list-disc ps-4">
+                <li
+                  v-for="citation in citations"
+                  :key="citation.id"
+                  class="text-xs text-n-slate-12"
+                >
+                  <a
+                    v-if="citation.link"
+                    :href="citation.link"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-xs text-n-blue-11 hover:underline"
+                  >
+                    {{ citation.title || citation.link }}
+                  </a>
+                  <span v-else>{{ citation.title }}</span>
+                </li>
+              </ul>
+            </div>
+            <div v-if="reasoning" class="flex flex-col gap-2">
+              <span class="text-xs font-medium text-n-slate-11">
+                {{ t('CONVERSATION.CAPTAIN_GENERATION.REASONING') }}
+              </span>
+              <p class="m-0 text-xs leading-normal text-n-slate-12 break-words">
+                {{ reasoning }}
+              </p>
+            </div>
+            <span v-if="devDetails" class="text-xs text-n-slate-11">
+              {{ devDetails }}
+            </span>
+          </template>
+        </div>
+      </template>
+    </Popover>
+    <slot name="meta" />
+  </div>
+</template>
@@ -2,6 +2,7 @@
 import { computed } from 'vue';

 import MessageMeta from '../MessageMeta.vue';
+import CaptainGenerationDetails from '../CaptainGenerationDetails.vue';

 import { emitter } from 'shared/helpers/mitt';
 import { useMessageContext } from '../provider.js';
@@ -9,16 +10,38 @@ import { useI18n } from 'vue-i18n';

 import MessageFormatter from 'shared/helpers/MessageFormatter.js';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
-import { MESSAGE_VARIANTS, ORIENTATION } from '../constants';
+import { MESSAGE_VARIANTS, ORIENTATION, SENDER_TYPES } from '../constants';

 const props = defineProps({
  hideMeta: { type: Boolean, default: false },
 });

-const { variant, orientation, inReplyTo, shouldGroupWithNext } =
-  useMessageContext();
+const {
+  variant,
+  orientation,
+  inReplyTo,
+  shouldGroupWithNext,
+  id,
+  sender,
+  senderType,
+} = useMessageContext();
 const { t } = useI18n();

+const isCaptainMessage = computed(
+  () =>
+    (sender.value?.type ?? senderType.value) === SENDER_TYPES.CAPTAIN_ASSISTANT
+);
+
+const metaColorClass = computed(() =>
+  variant.value === MESSAGE_VARIANTS.PRIVATE
+    ? 'text-n-amber-12/50'
+    : 'text-n-slate-11'
+);
+
+const emailMetaClass = computed(() =>
+  variant.value === MESSAGE_VARIANTS.EMAIL ? 'px-3 pb-3' : ''
+);
+
 const varaintBaseMap = {
  [MESSAGE_VARIANTS.AGENT]: 'bg-n-solid-blue text-n-slate-12',
  [MESSAGE_VARIANTS.PRIVATE]:
@@ -114,16 +137,21 @@ const replyToPreview = computed(() => {
      />
    </div>
    <slot />
-    <MessageMeta
-      v-if="shouldShowMeta"
-      :class="[
-        flexOrientationClass,
-        variant === MESSAGE_VARIANTS.EMAIL ? 'px-3 pb-3' : '',
-        variant === MESSAGE_VARIANTS.PRIVATE
-          ? 'text-n-amber-12/50'
-          : 'text-n-slate-11',
-      ]"
-      class="mt-2"
-    />
+    <template v-if="shouldShowMeta">
+      <CaptainGenerationDetails
+        v-if="isCaptainMessage"
+        :message-id="id"
+        class="mt-2"
+      >
+        <template #meta>
+          <MessageMeta :class="[emailMetaClass, metaColorClass]" />
+        </template>
+      </CaptainGenerationDetails>
+      <MessageMeta
+        v-else
+        :class="[flexOrientationClass, emailMetaClass, metaColorClass]"
+        class="mt-2"
+      />
+    </template>
  </div>
 </template>
@@ -263,9 +263,9 @@ const handleCallBack = async () => {
  if (!canCallBack.value || isInitiatingCall.value) return;
  try {
    if (isWhatsapp.value) {
-      const response = await whatsappCallSession.initiateOutboundCall(
-        conversationId.value
-      );
+      const response = await whatsappCallSession.initiateOutboundCall({
+        conversationId: conversationId.value,
+      });
      if (response?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.LOCKED) return;
      // Permission template path returns no call id — show banner, no widget yet.
      if (!response?.id) {
@@ -13,6 +13,7 @@ import { useVuelidate } from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
 import { useI18n } from 'vue-i18n';

+import { isWhatsAppComplete } from '@chatwoot/utils';
 import Input from 'dashboard/components-next/input/Input.vue';
 import {
  buildTemplateParameters,
@@ -84,29 +85,10 @@ const renderedTemplate = computed(() => {
  return replaceTemplateVariables(bodyText.value, processedParams.value);
 });

-const isFormInvalid = computed(() => {
-  if (!hasVariables.value && !hasMediaHeader.value) return false;
-
-  if (hasMediaHeader.value && !processedParams.value.header?.media_url) {
-    return true;
-  }
-
-  if (hasVariables.value && processedParams.value.body) {
-    const hasEmptyBodyVariable = Object.values(processedParams.value.body).some(
-      value => !value
-    );
-    if (hasEmptyBodyVariable) return true;
-  }
-
-  if (processedParams.value.buttons) {
-    const hasEmptyButtonParameter = processedParams.value.buttons.some(
-      button => !button.parameter
-    );
-    if (hasEmptyButtonParameter) return true;
-  }
-
-  return false;
-});
+// Completeness validation is shared with the mobile app via @chatwoot/utils.
+const isFormInvalid = computed(
+  () => !isWhatsAppComplete(props.template, processedParams.value)
+);

 const v$ = useVuelidate(
  {
@@ -69,9 +69,9 @@ const callButtonTooltip = computed(() =>
 const startWhatsappCall = async () => {
  if (whatsappCallSession.isInitiating.value) return;
  try {
-    const response = await whatsappCallSession.initiateOutboundCall(
-      props.chat.id
-    );
+    const response = await whatsappCallSession.initiateOutboundCall({
+      conversationId: props.chat.id,
+    });

    // Composable returns LOCKED when init is already in flight or a call is
    // active; soft no-op so a parallel click doesn't trigger a banner.
@@ -308,7 +308,8 @@ export function useWhatsappCallSession() {
    }
  };

-  const initiateOutboundCall = async conversationId => {
+  // target: { conversationId } or { contactId, inboxId }
+  const initiateOutboundCall = async target => {
    // Module-scoped lock + active-session guard so a second click — from the
    // same composable instance OR a different one (header vs contact panel)
    // OR while a call is already live — can't tear down the in-flight setup
@@ -320,10 +321,7 @@ export function useWhatsappCallSession() {
    isInitiatingOutbound.value = true;
    try {
      const sdpOffer = await prepareOutboundOffer();
-      const response = await WhatsappCallsAPI.initiate(
-        conversationId,
-        sdpOffer
-      );
+      const response = await WhatsappCallsAPI.initiate(target, sdpOffer);
      if (response?.id) {
        activeCallId = response.id;
        // A connect webhook that raced ahead of this response was buffered;
@@ -354,7 +352,7 @@ export function useWhatsappCallSession() {
        data?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.PERMISSION_REQUESTED ||
        data?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.PERMISSION_PENDING
      ) {
-        return { status: data.status };
+        return { status: data.status, conversation_id: data.conversation_id };
      }
      throw e;
    } finally {
@@ -7,8 +7,7 @@ export const FEATURE_FLAGS = {
  AUTOMATIONS: 'automations',
  CAMPAIGNS: 'campaigns',
  WHATSAPP_CAMPAIGNS: 'whatsapp_campaign',
-  WHATSAPP_EMBEDDED_SIGNUP_INBOX_CREATION:
-    'whatsapp_embedded_signup_inbox_creation',
+  WHATSAPP_EMBEDDED_SIGNUP_FLOW: 'whatsapp_embedded_signup_inbox_creation',
  WHATSAPP_MANUAL_TRANSFER: 'whatsapp_manual_transfer',
  WHATSAPP_RECONFIGURE: 'whatsapp_reconfigure',
  CANNED_RESPONSES: 'canned_responses',
@@ -127,25 +127,8 @@ export const getHostNameFromURL = url => {
  }
 };

-/**
- * Extracts filename from a URL
- * @param {string} url - The URL to extract filename from
- * @returns {string} - The extracted filename or original URL if extraction fails
- */
-export const extractFilenameFromUrl = url => {
-  if (!url || typeof url !== 'string') return url;
-
-  try {
-    const urlObj = new URL(url);
-    const pathname = urlObj.pathname;
-    const filename = pathname.split('/').pop();
-    return filename || url;
-  } catch (error) {
-    // If URL parsing fails, try to extract filename using regex
-    const match = url.match(/\/([^/?#]+)(?:[?#]|$)/);
-    return match ? match[1] : url;
-  }
-};
+// Shared with the mobile app via @chatwoot/utils.
+export { extractFilenameFromUrl } from '@chatwoot/utils';

 /**
 * Normalizes a comma/newline separated list of domains
@@ -156,12 +156,18 @@ describe('templateHelper', () => {
      ]);
    });

-    it('should handle templates with no variables', () => {
+    it('should handle templates with no variables but a media header', () => {
      const emptyTemplate = templates.find(
        t => t.name === 'no_variable_template'
      );
-      const result = buildTemplateParameters(emptyTemplate, false);
-      expect(result).toEqual({});
+      const result = buildTemplateParameters(emptyTemplate);
+      // hasMediaHeader is derived from the template, so the document header is kept.
+      expect(result.body).toBeUndefined();
+      expect(result.header).toEqual({
+        media_url: '',
+        media_type: 'document',
+        media_name: '',
+      });
    });

    it('should build parameters for templates with multiple component types', () => {
@@ -1,19 +1,16 @@
-// Constants
+import { processVariable, buildWhatsAppProcessedParams } from '@chatwoot/utils';
+
+// Constants and pure template helpers are shared with the mobile app via
+// @chatwoot/utils so the logic lives in one place.
+export {
+  MEDIA_FORMATS,
+  COMPONENT_TYPES,
+  findComponentByType,
+  processVariable,
+} from '@chatwoot/utils';
+
 export const DEFAULT_LANGUAGE = 'en';
 export const DEFAULT_CATEGORY = 'UTILITY';
-export const COMPONENT_TYPES = {
-  HEADER: 'HEADER',
-  BODY: 'BODY',
-  BUTTONS: 'BUTTONS',
-};
-export const MEDIA_FORMATS = ['IMAGE', 'VIDEO', 'DOCUMENT'];
-
-export const findComponentByType = (template, type) =>
-  template.components?.find(component => component.type === type);
-
-export const processVariable = str => {
-  return str.replace(/{{|}}/g, '');
-};

 export const allKeysRequired = value => {
  const keys = Object.keys(value);
@@ -27,70 +24,7 @@ export const replaceTemplateVariables = (templateText, processedParams) => {
  });
 };

-export const buildTemplateParameters = (template, hasMediaHeaderValue) => {
-  const allVariables = {};
-
-  const bodyComponent = findComponentByType(template, COMPONENT_TYPES.BODY);
-  const headerComponent = findComponentByType(template, COMPONENT_TYPES.HEADER);
-
-  if (!bodyComponent) return allVariables;
-
-  const templateString = bodyComponent.text;
-
-  // Process body variables
-  const matchedVariables = templateString.match(/{{([^}]+)}}/g);
-  if (matchedVariables) {
-    allVariables.body = {};
-    matchedVariables.forEach(variable => {
-      const key = processVariable(variable);
-      allVariables.body[key] = '';
-    });
-  }
-
-  if (hasMediaHeaderValue) {
-    if (!allVariables.header) allVariables.header = {};
-    allVariables.header.media_url = '';
-    allVariables.header.media_type = headerComponent.format.toLowerCase();
-
-    // For document templates, include media_name field for filename support
-    if (headerComponent.format.toLowerCase() === 'document') {
-      allVariables.header.media_name = '';
-    }
-  }
-
-  // Process button variables
-  const buttonComponents = template.components.filter(
-    component => component.type === COMPONENT_TYPES.BUTTONS
-  );
-
-  buttonComponents.forEach(buttonComponent => {
-    if (buttonComponent.buttons) {
-      buttonComponent.buttons.forEach((button, index) => {
-        // Handle URL buttons with variables
-        if (button.type === 'URL' && button.url && button.url.includes('{{')) {
-          const buttonVars = button.url.match(/{{([^}]+)}}/g) || [];
-          if (buttonVars.length > 0) {
-            if (!allVariables.buttons) allVariables.buttons = [];
-            allVariables.buttons[index] = {
-              type: 'url',
-              parameter: '',
-              url: button.url,
-              variables: buttonVars.map(v => processVariable(v)),
-            };
-          }
-        }
-
-        // Handle copy code buttons
-        if (button.type === 'COPY_CODE') {
-          if (!allVariables.buttons) allVariables.buttons = [];
-          allVariables.buttons[index] = {
-            type: 'copy_code',
-            parameter: '',
-          };
-        }
-      });
-    }
-  });
-
-  return allVariables;
-};
+// The media-header flag is derived from the template inside the shared helper;
+// the second argument is kept for backwards-compatible call sites.
+export const buildTemplateParameters = template =>
+  buildWhatsAppProcessedParams(template);
@@ -72,6 +72,20 @@
    "RATING_TITLE": "Rating",
    "FEEDBACK_TITLE": "Feedback",
    "REPLY_MESSAGE_NOT_FOUND": "Message not available",
+    "CAPTAIN_GENERATION": {
+      "TITLE": "How was this reply generated?",
+      "GENERATED_BY": "Generated by Captain",
+      "LOADING": "Loading details…",
+      "EMPTY": "No generation details available for this message.",
+      "TIMELINE": "Generation steps",
+      "STEP_TOOL": "Called {name}",
+      "STEP_HANDOFF": "Handed off to {name}",
+      "REASONING": "Reasoning",
+      "SOURCES": "Knowledge base",
+      "SOURCES_SUMMARY": "{count} result | {count} results",
+      "MODEL": "Generated with {model}",
+      "CREDITS": "Credits: {credits}"
+    },
    "CARD": {
      "SHOW_LABELS": "Show labels",
      "HIDE_LABELS": "Hide labels",
@@ -1,5 +1,6 @@
 <script setup>
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, onMounted } from 'vue';
+import { until } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
@@ -49,7 +50,9 @@ const isVoiceEnabled = computed(
 const calls = computed(() => callHistoryStore.records);
 const meta = computed(() => callHistoryStore.meta);
 const isFetching = computed(() => callHistoryStore.uiFlags.isFetching);
-const inboxesUiFlags = useMapGetter('inboxes/getUIFlags');
+const accountUiFlags = useMapGetter('accounts/getUIFlags');
+
+const isInitializing = ref(true);

 // Filters are seeded from the URL so a shared link restores the same view.
 const activity = ref(
@@ -98,20 +101,25 @@ const onPageChange = page => {
  fetchCalls();
 };

-// inboxes/get flips isFetching true synchronously, so the spinner shows on the
-// first render and the setup CTA never flashes; hit the calls endpoint only
-// once inboxes confirm voice is on.
-store.dispatch('inboxes/get').then(() => {
-  if (!isVoiceEnabled.value) return;
-  // Only admins see the assignee filter, so only they need the agent list.
-  if (isAdmin.value) store.dispatch('agents/get');
-  fetchCalls();
+onMounted(async () => {
+  try {
+    await Promise.all([
+      store.dispatch('inboxes/get'),
+      until(() => accountUiFlags.value.isFetchingItem).toBe(false),
+    ]);
+    if (!isVoiceEnabled.value) return;
+    // Only admins see the assignee filter, so only they need the agent list.
+    if (isAdmin.value) store.dispatch('agents/get');
+    await fetchCalls();
+  } finally {
+    isInitializing.value = false;
+  }
 });
 </script>

 <template>
  <div
-    v-if="inboxesUiFlags.isFetching"
+    v-if="isInitializing"
    class="flex items-center justify-center w-full h-full bg-n-surface-1"
  >
    <Spinner :size="24" />
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from 'vue';
+import { computed, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
@@ -27,19 +27,49 @@ const selectedRange = ref('this_month');

 const assistantId = computed(() => route.params.assistantId);
 const stats = ref(null);
+const isFetching = ref(false);
+
+// Increments on every fetch so a response (or retry) from a superseded
+// range/assistant can't clobber the latest request's state.
+let fetchToken = 0;
+let abortController = null;

 const fetchStats = async () => {
-  try {
-    const { data } = await CaptainAssistant.getStats({
+  fetchToken += 1;
+  const token = fetchToken;
+  abortController?.abort();
+  abortController = new AbortController();
+  const { signal } = abortController;
+  stats.value = null;
+  isFetching.value = true;
+
+  const requestStats = () =>
+    CaptainAssistant.getStats({
      assistantId: assistantId.value,
      range: selectedRange.value,
+      signal,
    });
-    stats.value = data;
+
+  let data = null;
+  try {
+    ({ data } = await requestStats());
  } catch {
-    stats.value = null;
+    // One silent retry before giving up, unless the request was aborted.
+    try {
+      if (token === fetchToken && !signal.aborted)
+        ({ data } = await requestStats());
+    } catch {
+      data = null;
+    }
  }
+
+  if (token !== fetchToken || signal.aborted) return;
+  stats.value = data;
+  isFetching.value = false;
 };

+onUnmounted(() => abortController?.abort());
+
 watch([selectedRange, assistantId], fetchStats, { immediate: true });

 // `direction` says whether a rising trend is good ('up'), bad ('down'), or
@@ -156,7 +186,7 @@ const closeDrilldown = () => {

        <CoverageBanner :knowledge="stats?.knowledge" />

-        <WelcomeCard :range="selectedRange" />
+        <WelcomeCard :range="selectedRange" :stats="stats" />

        <div
          class="grid grid-cols-1 gap-px overflow-hidden border rounded-xl sm:grid-cols-2 lg:grid-cols-3 bg-n-weak border-n-weak"
@@ -169,7 +199,8 @@ const closeDrilldown = () => {
            :trend="metric.trend"
            :hint="metric.hint"
            :trend-good="metric.trendGood"
-            :clickable="canDrilldown && Boolean(metric.metric)"
+            :loading="isFetching"
+            :clickable="canDrilldown && Boolean(metric.metric) && !isFetching"
            @click="openDrilldown(metric)"
          />
        </div>
@@ -18,9 +18,7 @@ export function useChannelConfig() {
    // app id (not the 'none' sentinel) and the signup configuration id.
    whatsapp: () =>
      (!isOnChatwootCloud.value ||
-        isCloudFeatureEnabled(
-          FEATURE_FLAGS.WHATSAPP_EMBEDDED_SIGNUP_INBOX_CREATION
-        )) &&
+        isCloudFeatureEnabled(FEATURE_FLAGS.WHATSAPP_EMBEDDED_SIGNUP_FLOW)) &&
      Boolean(installationConfig.whatsappAppId) &&
      installationConfig.whatsappAppId !== 'none' &&
      Boolean(installationConfig.whatsappConfigurationId),
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useMapGetter } from 'dashboard/composables/store';
@@ -14,7 +14,7 @@ const { accountId, currentAccount } = useAccount();

 const globalConfig = useMapGetter('globalConfig/get');

-const enabledFeatures = ref({});
+const enabledFeatures = computed(() => currentAccount.value?.features || {});

 const hasTiktokConfigured = computed(() => {
  return window.chatwootConfig?.tiktokAppId;
@@ -105,10 +105,6 @@ const channelList = computed(() => {
  return channels;
 });

-const initializeEnabledFeatures = async () => {
-  enabledFeatures.value = currentAccount.value.features;
-};
-
 const initChannelAuth = channel => {
  const params = {
    sub_page: channel,
@@ -116,10 +112,6 @@ const initChannelAuth = channel => {
  };
  router.push({ name: 'settings_inboxes_page_channel', params });
 };
-
-onMounted(() => {
-  initializeEnabledFeatures();
-});
 </script>

 <template>
@@ -390,6 +390,11 @@ export default {
      return (
        this.isAWhatsAppCloudChannel &&
        this.isEmbeddedSignupWhatsApp &&
+        (!this.isOnChatwootCloud ||
+          this.isFeatureEnabledonAccount(
+            this.accountId,
+            FEATURE_FLAGS.WHATSAPP_EMBEDDED_SIGNUP_FLOW
+          )) &&
        this.inbox.reauthorization_required
      );
    },
@@ -42,9 +42,7 @@ const shouldShowWhatsappEmbeddedSignup = computed(() => {
    selectedProvider.value === PROVIDER_TYPES.WHATSAPP &&
    hasWhatsappAppId.value &&
    (!isOnChatwootCloud.value ||
-      isCloudFeatureEnabled(
-        FEATURE_FLAGS.WHATSAPP_EMBEDDED_SIGNUP_INBOX_CREATION
-      ))
+      isCloudFeatureEnabled(FEATURE_FLAGS.WHATSAPP_EMBEDDED_SIGNUP_FLOW))
  );
 });

@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Avatar from 'next/avatar/Avatar.vue';
 import RadioCard from 'dashboard/components-next/radioCard/RadioCard.vue';
+import { useBranding } from 'shared/composables/useBranding';

 const props = defineProps({
  senderNameType: {
@@ -22,6 +23,7 @@ const props = defineProps({
 const emit = defineEmits(['update']);

 const { t } = useI18n();
+const { replaceInstallationName } = useBranding();

 const senderNameKeyOptions = computed(() => [
  {
@@ -30,7 +32,7 @@ const senderNameKeyOptions = computed(() => [
    content: t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FRIENDLY.SUBTITLE'),
    preview: {
      senderName: 'Smith',
-      businessName: 'Chatwoot',
+      businessName: replaceInstallationName('Chatwoot'),
      email: '<support@yourbusiness.com>',
    },
  },
@@ -40,7 +42,7 @@ const senderNameKeyOptions = computed(() => [
    content: t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.PROFESSIONAL.SUBTITLE'),
    preview: {
      senderName: '',
-      businessName: 'Chatwoot',
+      businessName: replaceInstallationName('Chatwoot'),
      email: '<support@yourbusiness.com>',
    },
  },
@@ -51,7 +53,7 @@ const isKeyOptionFriendly = key => key === 'friendly';
 const userName = keyOption =>
  isKeyOptionFriendly(keyOption.key)
    ? keyOption.preview.senderName
-    : keyOption.preview.businessName;
+    : props.businessName || keyOption.preview.businessName;

 const toggleSenderNameType = key => {
  emit('update', key);
@@ -56,6 +56,7 @@ export default {
    ...mapGetters({
      accountId: 'getCurrentAccountId',
      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
    }),
    isEmbeddedSignupWhatsApp() {
      return this.inbox.provider_config?.source === 'embedded_signup';
@@ -65,7 +66,9 @@ export default {
        this.isEmbeddedSignupWhatsApp &&
        this.isFeatureEnabledonAccount(
          this.accountId,
-          FEATURE_FLAGS.WHATSAPP_RECONFIGURE
+          this.isOnChatwootCloud
+            ? FEATURE_FLAGS.WHATSAPP_EMBEDDED_SIGNUP_FLOW
+            : FEATURE_FLAGS.WHATSAPP_RECONFIGURE
        )
      );
    },
@@ -0,0 +1,62 @@
+import CaptainAgentSessionsAPI from 'dashboard/api/captain/agentSessions';
+import camelcaseKeys from 'camelcase-keys';
+
+const SET_SESSION = 'SET_SESSION';
+const SET_FETCHING = 'SET_FETCHING';
+
+// Session capture runs right after the message is broadcast (and well after,
+// for handoff notes created mid-run), so a 404 on a fresh message may just
+// mean the session isn't written yet. Skip caching those so a later
+// hover/click retries; older misses are permanent (V1 messages, failed runs).
+const RECENT_MESSAGE_WINDOW_SECONDS = 60;
+
+// Caches Captain agent-session metadata per message id. A missing session
+// (404) is cached as null so the UI shows an empty state without refetching.
+export default {
+  namespaced: true,
+  state: {
+    sessions: {},
+    fetchingIds: [],
+  },
+  getters: {
+    getSessionByMessageId: state => messageId => state.sessions[messageId],
+    isFetching: state => messageId => state.fetchingIds.includes(messageId),
+    hasFetched: state => messageId => messageId in state.sessions,
+  },
+  actions: {
+    fetch: async ({ state, commit }, { messageId, createdAt }) => {
+      if (messageId in state.sessions) return;
+      if (state.fetchingIds.includes(messageId)) return;
+
+      commit(SET_FETCHING, { messageId, isFetching: true });
+      try {
+        const { data } = await CaptainAgentSessionsAPI.show(messageId);
+        commit(SET_SESSION, {
+          messageId,
+          session: camelcaseKeys(data, { deep: true }),
+        });
+      } catch (error) {
+        const isRecentMessage =
+          createdAt &&
+          Date.now() / 1000 - createdAt < RECENT_MESSAGE_WINDOW_SECONDS;
+        // Only a 404 means "no session exists"; transient failures (5xx,
+        // network errors) stay uncached so a later hover retries.
+        if (error.response?.status === 404 && !isRecentMessage) {
+          commit(SET_SESSION, { messageId, session: null });
+        }
+      } finally {
+        commit(SET_FETCHING, { messageId, isFetching: false });
+      }
+    },
+  },
+  mutations: {
+    [SET_SESSION](state, { messageId, session }) {
+      state.sessions = { ...state.sessions, [messageId]: session };
+    },
+    [SET_FETCHING](state, { messageId, isFetching }) {
+      state.fetchingIds = isFetching
+        ? [...state.fetchingIds, messageId]
+        : state.fetchingIds.filter(id => id !== messageId);
+    },
+  },
+};
@@ -50,6 +50,7 @@ import teamMembers from './modules/teamMembers';
 import teams from './modules/teams';
 import userNotificationSettings from './modules/userNotificationSettings';
 import webhooks from './modules/webhooks';
+import captainAgentSessions from './captain/agentSessions';
 import captainAssistants from './captain/assistant';
 import captainDocuments from './captain/document';
 import captainResponses from './captain/response';
@@ -115,6 +116,7 @@ export default createStore({
    teams,
    userNotificationSettings,
    webhooks,
+    captainAgentSessions,
    captainAssistants,
    captainDocuments,
    captainResponses,
@@ -7,6 +7,7 @@ import FBChannel from '../../api/channel/fbChannel';
 import TwilioChannel from '../../api/channel/twilioChannel';
 import WhatsappChannel from '../../api/channel/whatsappChannel';
 import { throwErrorMessage } from '../utils/api';
+import { isSendableTemplate } from '@chatwoot/utils';
 import AnalyticsHelper from '../../helper/AnalyticsHelper';
 import camelcaseKeys from 'camelcase-keys';
 import { ACCOUNT_EVENTS } from '../../helper/AnalyticsHelper/events';
@@ -67,45 +68,8 @@ export const getters = {
      return [];
    }

-    return templates.filter(template => {
-      // Ensure template has required properties
-      if (!template || !template.status || !template.components) {
-        return false;
-      }
-
-      // Only show approved templates
-      if (template.status.toLowerCase() !== 'approved') {
-        return false;
-      }
-
-      // Filter out authentication templates
-      if (template.category === 'AUTHENTICATION') {
-        return false;
-      }
-
-      // Filter out CSAT templates (customer_satisfaction_survey and its versions)
-      if (
-        template.name &&
-        template.name.startsWith('customer_satisfaction_survey')
-      ) {
-        return false;
-      }
-
-      // Filter out interactive templates (LIST, PRODUCT, CATALOG), location templates, and call permission templates
-      const hasUnsupportedComponents = template.components.some(
-        component =>
-          ['LIST', 'PRODUCT', 'CATALOG', 'CALL_PERMISSION_REQUEST'].includes(
-            component.type
-          ) ||
-          (component.type === 'HEADER' && component.format === 'LOCATION')
-      );
-
-      if (hasUnsupportedComponents) {
-        return false;
-      }
-
-      return true;
-    });
+    // Sendable-template filtering is shared with the mobile app via @chatwoot/utils.
+    return templates.filter(isSendableTemplate);
  },
  getNewConversationInboxes($state) {
    return $state.records.filter(inbox => {
@@ -73,13 +73,13 @@ describe('useBranding', () => {
      expect(result).toBe('Welcome to our platform');
    });

-    it('should be case-sensitive for "Chatwoot"', () => {
+    it('should replace "Chatwoot" regardless of casing', () => {
      const { replaceInstallationName } = useBranding();
      const result = replaceInstallationName(
-        'Welcome to chatwoot and CHATWOOT'
+        'Welcome to chatwoot, Chatwoot and CHATWOOT'
      );

-      expect(result).toBe('Welcome to chatwoot and CHATWOOT');
+      expect(result).toBe('Welcome to MyCompany, MyCompany and MyCompany');
    });

    it('should handle special characters in installation name', () => {
@@ -7,7 +7,8 @@ import { useMapGetter } from 'dashboard/composables/store.js';
 export function useBranding() {
  const globalConfig = useMapGetter('globalConfig/get');
  /**
-   * Replaces "Chatwoot" in text with the installation name from global config
+   * Replaces "Chatwoot" (any casing) in text with the installation name from
+   * global config
   * @param {string} text - The text to process
   * @returns {string} - Text with "Chatwoot" replaced by installation name
   */
@@ -17,7 +18,7 @@ export function useBranding() {
    const installationName = globalConfig.value?.installationName;
    if (!installationName) return text;

-    return text.replace(/Chatwoot/g, installationName);
+    return text.replace(/chatwoot/gi, installationName);
  };

  return {