feat: Add twilio content templates (#12277)

Implements comprehensive Twilio WhatsApp content template support (Phase 1) enabling text, media, and quick reply templates with proper parameter conversion, sync capabilities, and feature flag protection. ### Features Implemented **Template Types Supported** - Basic Text Templates: Simple text with variables ({{1}}, {{2}}) - Media Templates: Image/Video/Document templates with text variables - Quick Reply Templates: Interactive button templates - Phase 2 (Future): List Picker, Call-to-Action, Catalog, Carousel, Authentication templates **Template Synchronization** - API Endpoint: POST /api/v1/accounts/{account_id}/inboxes/{inbox_id}/sync_templates - Background Job: Channels::Twilio::TemplatesSyncJob - Storage: JSONB format in channel_twilio_sms.content_templates - Auto-categorization: UTILITY, MARKETING, AUTHENTICATION categories ### Template Examples Tested #### Text template ``` { "name": "greet", "language": "en" } ``` #### Template with variables ``` { "name": "order_status", "parameters": [{"type": "body", "parameters": [{"text": "John"}]}] } ``` #### Media template with image ``` { "name": "product_showcase", "parameters": [ {"type": "header", "parameters": [{"image": {"link": "image.jpg"}}]}, {"type": "body", "parameters": [{"text": "iPhone"}, {"text": "$999"}]} ]} ``` #### Preview <img width="1362" height="1058" alt="CleanShot 2025-08-26 at 10 01 51@2x" src="https://github.com/user-attachments/assets/cb280cea-08c3-44ca-8025-58a96cb3a451" /> <img width="1308" height="1246" alt="CleanShot 2025-08-26 at 10 02 02@2x" src="https://github.com/user-attachments/assets/9ea8537a-61e9-40f5-844f-eaad337e1ddd" /> #### User guide https://www.chatwoot.com/hc/user-guide/articles/1756195741-twilio-content-templates --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
2025-08-29 16:13:25 +05:30
parent 88cb5ba56f
commit 99997a701a
19 changed files with 1001 additions and 24 deletions
--- a/app/javascript/dashboard/components/widgets/conversation/ContentTemplates/ContentTemplatesModal.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ContentTemplates/ContentTemplatesModal.vue
@@ -0,0 +1,97 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import TemplatesPicker from './ContentTemplatesPicker.vue';
+import TemplateParser from '../../../../components-next/content-templates/ContentTemplateParser.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  inboxId: {
+    type: Number,
+    default: undefined,
+  },
+});
+
+const emit = defineEmits(['onSend', 'cancel', 'update:show']);
+
+const { t } = useI18n();
+
+const selectedContentTemplate = ref(null);
+
+const localShow = computed({
+  get() {
+    return props.show;
+  },
+  set(value) {
+    emit('update:show', value);
+  },
+});
+
+const modalHeaderContent = computed(() => {
+  return selectedContentTemplate.value
+    ? t('CONTENT_TEMPLATES.MODAL.TEMPLATE_SELECTED_SUBTITLE', {
+        templateName: selectedContentTemplate.value.friendly_name,
+      })
+    : t('CONTENT_TEMPLATES.MODAL.SUBTITLE');
+});
+
+const pickTemplate = template => {
+  selectedContentTemplate.value = template;
+};
+
+const onResetTemplate = () => {
+  selectedContentTemplate.value = null;
+};
+
+const onSendMessage = message => {
+  emit('onSend', message);
+};
+
+const onClose = () => {
+  emit('cancel');
+};
+</script>
+
+<template>
+  <woot-modal v-model:show="localShow" :on-close="onClose" size="modal-big">
+    <woot-modal-header
+      :header-title="$t('CONTENT_TEMPLATES.MODAL.TITLE')"
+      :header-content="modalHeaderContent"
+    />
+    <div class="px-8 py-6 row">
+      <TemplatesPicker
+        v-if="!selectedContentTemplate"
+        :inbox-id="inboxId"
+        @on-select="pickTemplate"
+      />
+      <TemplateParser
+        v-else
+        :template="selectedContentTemplate"
+        @reset-template="onResetTemplate"
+        @send-message="onSendMessage"
+      >
+        <template #actions="{ sendMessage, resetTemplate, disabled }">
+          <div class="flex gap-2 mt-6">
+            <Button
+              :label="t('CONTENT_TEMPLATES.PARSER.GO_BACK_LABEL')"
+              color="slate"
+              variant="faded"
+              class="flex-1"
+              @click="resetTemplate"
+            />
+            <Button
+              :label="t('CONTENT_TEMPLATES.PARSER.SEND_MESSAGE_LABEL')"
+              class="flex-1"
+              :disabled="disabled"
+              @click="sendMessage"
+            />
+          </div>
+        </template>
+      </TemplateParser>
+    </div>
+  </woot-modal>
+</template>
--- a/app/javascript/dashboard/components/widgets/conversation/ContentTemplates/ContentTemplatesPicker.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ContentTemplates/ContentTemplatesPicker.vue
@@ -0,0 +1,169 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useAlert } from 'dashboard/composables';
+import { useStore } from 'dashboard/composables/store';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import { useI18n } from 'vue-i18n';
+import { TWILIO_CONTENT_TEMPLATE_TYPES } from 'shared/constants/messages';
+
+const props = defineProps({
+  inboxId: {
+    type: Number,
+    default: undefined,
+  },
+});
+
+const emit = defineEmits(['onSelect']);
+
+const { t } = useI18n();
+const store = useStore();
+const query = ref('');
+const isRefreshing = ref(false);
+
+const twilioTemplates = computed(() => {
+  const inbox = store.getters['inboxes/getInbox'](props.inboxId);
+  return inbox?.content_templates?.templates || [];
+});
+
+const filteredTemplateMessages = computed(() =>
+  twilioTemplates.value.filter(
+    template =>
+      template.friendly_name
+        .toLowerCase()
+        .includes(query.value.toLowerCase()) && template.status === 'approved'
+  )
+);
+
+const getTemplateType = template => {
+  if (template.template_type === TWILIO_CONTENT_TEMPLATE_TYPES.MEDIA) {
+    return t('CONTENT_TEMPLATES.PICKER.TYPES.MEDIA');
+  }
+  if (template.template_type === TWILIO_CONTENT_TEMPLATE_TYPES.QUICK_REPLY) {
+    return t('CONTENT_TEMPLATES.PICKER.TYPES.QUICK_REPLY');
+  }
+  return t('CONTENT_TEMPLATES.PICKER.TYPES.TEXT');
+};
+
+const refreshTemplates = async () => {
+  isRefreshing.value = true;
+  try {
+    await store.dispatch('inboxes/syncTemplates', props.inboxId);
+    useAlert(t('CONTENT_TEMPLATES.PICKER.REFRESH_SUCCESS'));
+  } catch (error) {
+    useAlert(t('CONTENT_TEMPLATES.PICKER.REFRESH_ERROR'));
+  } finally {
+    isRefreshing.value = false;
+  }
+};
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="flex gap-2 mb-2.5">
+      <div
+        class="flex flex-1 gap-1 items-center px-2.5 py-0 rounded-lg bg-n-alpha-black2 outline outline-1 outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 focus-within:outline-n-brand dark:focus-within:outline-n-brand"
+      >
+        <fluent-icon icon="search" class="text-n-slate-12" size="16" />
+        <input
+          v-model="query"
+          type="search"
+          :placeholder="t('CONTENT_TEMPLATES.PICKER.SEARCH_PLACEHOLDER')"
+          class="reset-base w-full h-9 bg-transparent text-n-slate-12 !text-sm !outline-0"
+        />
+      </div>
+      <button
+        :disabled="isRefreshing"
+        class="flex justify-center items-center w-9 h-9 rounded-lg bg-n-alpha-black2 outline outline-1 outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 hover:bg-n-alpha-2 dark:hover:bg-n-solid-2 disabled:opacity-50 disabled:cursor-not-allowed"
+        :title="t('CONTENT_TEMPLATES.PICKER.REFRESH_BUTTON')"
+        @click="refreshTemplates"
+      >
+        <Icon
+          icon="i-lucide-refresh-ccw"
+          class="text-n-slate-12 size-4"
+          :class="{ 'animate-spin': isRefreshing }"
+        />
+      </button>
+    </div>
+    <div
+      class="bg-n-background outline-n-container outline outline-1 rounded-lg max-h-[18.75rem] overflow-y-auto p-2.5"
+    >
+      <div
+        v-for="(template, i) in filteredTemplateMessages"
+        :key="template.content_sid"
+      >
+        <button
+          class="block p-2.5 w-full text-left rounded-lg cursor-pointer hover:bg-n-alpha-2 dark:hover:bg-n-solid-2"
+          @click="emit('onSelect', template)"
+        >
+          <div>
+            <div class="flex justify-between items-center mb-2.5">
+              <p class="text-sm">
+                {{ template.friendly_name }}
+              </p>
+              <div class="flex gap-2">
+                <span
+                  class="inline-block px-2 py-1 text-xs leading-none rounded-lg cursor-default bg-n-slate-3 text-n-slate-12"
+                >
+                  {{ getTemplateType(template) }}
+                </span>
+                <span
+                  class="inline-block px-2 py-1 text-xs leading-none rounded-lg cursor-default bg-n-slate-3 text-n-slate-12"
+                >
+                  {{
+                    `${t('CONTENT_TEMPLATES.PICKER.LABELS.LANGUAGE')}: ${template.language}`
+                  }}
+                </span>
+              </div>
+            </div>
+
+            <!-- Body -->
+            <div>
+              <p class="text-xs font-medium text-n-slate-11">
+                {{ t('CONTENT_TEMPLATES.PICKER.BODY') }}
+              </p>
+              <p class="text-sm label-body">
+                {{ template.body || t('CONTENT_TEMPLATES.PICKER.NO_CONTENT') }}
+              </p>
+            </div>
+
+            <div class="flex justify-between items-center mt-3">
+              <div>
+                <p class="text-xs font-medium text-n-slate-11">
+                  {{ t('CONTENT_TEMPLATES.PICKER.LABELS.CATEGORY') }}
+                </p>
+                <p class="text-sm">{{ template.category || 'utility' }}</p>
+              </div>
+              <div class="text-xs text-n-slate-11">
+                {{ new Date(template.created_at).toLocaleDateString() }}
+              </div>
+            </div>
+          </div>
+        </button>
+        <hr
+          v-if="i != filteredTemplateMessages.length - 1"
+          :key="`hr-${i}`"
+          class="border-b border-solid border-n-weak my-2.5 mx-auto max-w-[95%]"
+        />
+      </div>
+      <div v-if="!filteredTemplateMessages.length" class="py-8 text-center">
+        <div v-if="query && twilioTemplates.length">
+          <p>
+            {{ t('CONTENT_TEMPLATES.PICKER.NO_TEMPLATES_FOUND') }}
+            <strong>{{ query }}</strong>
+          </p>
+        </div>
+        <div v-else-if="!twilioTemplates.length" class="space-y-4">
+          <p class="text-n-slate-11">
+            {{ t('CONTENT_TEMPLATES.PICKER.NO_TEMPLATES_AVAILABLE') }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.label-body {
+  font-family: monospace;
+}
+</style>
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -27,6 +27,7 @@ import {
  replaceVariablesInMessage,
 } from '@chatwoot/utils';
 import WhatsappTemplates from './WhatsappTemplates/Modal.vue';
+import ContentTemplates from './ContentTemplates/ContentTemplatesModal.vue';
 import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper';
 import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
 import { trimContent, debounce, getRecipients } from '@chatwoot/utils';
@@ -61,6 +62,7 @@ export default {
    ReplyToMessage,
    ReplyTopPanel,
    ResizableTextArea,
+    ContentTemplates,
    WhatsappTemplates,
    WootMessageEditor,
  },
@@ -109,6 +111,7 @@ export default {
      toEmails: '',
      doAutoSaveDraft: () => {},
      showWhatsAppTemplatesModal: false,
+      showContentTemplatesModal: false,
      updateEditorSelectionWith: '',
      undefinedVariableMessage: '',
      showMentions: false,
@@ -187,6 +190,9 @@ export default {
    showWhatsappTemplates() {
      return this.isAWhatsAppCloudChannel && !this.isPrivate;
    },
+    showContentTemplates() {
+      return this.isATwilioWhatsAppChannel && !this.isPrivate;
+    },
    isPrivate() {
      if (this.currentChat.can_reply || this.isAWhatsAppChannel) {
        return this.isOnPrivateNote;
@@ -659,6 +665,12 @@ export default {
    hideWhatsappTemplatesModal() {
      this.showWhatsAppTemplatesModal = false;
    },
+    openContentTemplateModal() {
+      this.showContentTemplatesModal = true;
+    },
+    hideContentTemplatesModal() {
+      this.showContentTemplatesModal = false;
+    },
    onClickSelfAssign() {
      const {
        account_id,
@@ -774,6 +786,13 @@ export default {
      });
      this.hideWhatsappTemplatesModal();
    },
+    async onSendContentTemplateReply(messagePayload) {
+      this.sendMessage({
+        conversationId: this.currentChat.id,
+        ...messagePayload,
+      });
+      this.hideContentTemplatesModal();
+    },
    replaceText(message) {
      if (this.sendWithSignature && !this.private) {
        // if signature is enabled, append it to the message
@@ -1217,6 +1236,7 @@ export default {
      :conversation-id="conversationId"
      :enable-multiple-file-upload="enableMultipleFileUpload"
      :enable-whats-app-templates="showWhatsappTemplates"
+      :enable-content-templates="showContentTemplates"
      :inbox="inbox"
      :is-on-private-note="isOnPrivateNote"
      :is-recording-audio="isRecordingAudio"
@@ -1239,6 +1259,7 @@ export default {
      :portal-slug="connectedPortalSlug"
      :new-conversation-modal-active="newConversationModalActive"
      @select-whatsapp-template="openWhatsappTemplateModal"
+      @select-content-template="openContentTemplateModal"
      @toggle-editor="toggleRichContentEditor"
      @replace-text="replaceText"
      @toggle-insert-article="toggleInsertArticle"
@@ -1251,6 +1272,14 @@ export default {
      @cancel="hideWhatsappTemplatesModal"
    />

+    <ContentTemplates
+      :inbox-id="inbox.id"
+      :show="showContentTemplatesModal"
+      @close="hideContentTemplatesModal"
+      @on-send="onSendContentTemplateReply"
+      @cancel="hideContentTemplatesModal"
+    />
+
    <woot-confirm-modal
      ref="confirmDialog"
      :title="$t('CONVERSATION.REPLYBOX.UNDEFINED_VARIABLES.TITLE')"