feat: telegram notification templating

louislam · Feb 20, 2025 · cfd6d66 · cfd6d66
1 parent b45dc67
commit cfd6d66
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 1 deletion.
diff --git a/server/notification-providers/telegram.js b/server/notification-providers/telegram.js
@@ -1,5 +1,6 @@
 const NotificationProvider = require("./notification-provider");
 const axios = require("axios");
+const { Liquid } = require("liquidjs");
 
 class Telegram extends NotificationProvider {
     name = "telegram";
@@ -22,6 +23,24 @@ class Telegram extends NotificationProvider {
                 params.message_thread_id = notification.telegramMessageThreadID;
             }
 
+            if (notification.telegramUseTemplate) {
+                const engine = new Liquid();
+                const tpl = engine.parse(notification.telegramTemplate);
+
+                params.text = await engine.render(
+                    tpl,
+                    {
+                        msg,
+                        heartbeatJSON,
+                        monitorJSON
+                    }
+                );
+
+                if (notification.telegramTemplateParseMode !== "plain") {
+                    params.parse_mode = notification.telegramTemplateParseMode;
+                }
+            }
+
             await axios.get(`${url}/bot${notification.telegramBotToken}/sendMessage`, {
                 params: params,
             });

diff --git a/src/components/notifications/Telegram.vue b/src/components/notifications/Telegram.vue
@@ -32,7 +32,63 @@
         <label for="message_thread_id" class="form-label">{{ $t("telegramMessageThreadID") }}</label>
         <input id="message_thread_id" v-model="$parent.notification.telegramMessageThreadID" type="text" class="form-control">
         <p class="form-text">{{ $t("telegramMessageThreadIDDescription") }}</p>
+    </div>
+
+    <div class="mb-3">
+        <div class="form-check form-switch">
+            <input v-model="$parent.notification.telegramUseTemplate" class="form-check-input" type="checkbox">
+            <label class="form-check-label">{{ $t("telegramUseTemplate") }}</label>
+        </div>
+
+        <div class="form-text">
+            {{ $t("telegramUseTemplateDescription") }}
+        </div>
+    </div>
+
+    <template v-if="$parent.notification.telegramUseTemplate">
+        <div class="mb-3">
+            <label class="form-label" for="message_parse_mode">{{ $t("Template Format") }}</label>
+
+            <i18n-t tag="div" keypath="telegramTemplateFormatDescription" class="form-text mb-3">
+                <a href="https://core.telegram.org/bots/api#formatting-options" target="_blank">{{ $t("documentation") }}</a>
+            </i18n-t>
+
+            <select
+                id="message_parse_mode"
+                v-model="$parent.notification.telegramTemplateParseMode"
+                class="form-select"
+                required
+            >
+                <option value="plain">{{ $t("Plain Text") }}</option>
+                <option value="HTML">HTML</option>
+                <option value="MarkdownV2">MarkdownV2</option>
+            </select>
+        </div>
+
+        <div class="mb-3">
+            <label class="form-label" for="message_parse_mode">{{ $t("Template") }}</label>
+
+            <div class="form-text mb-3">
+                <i18n-t tag="div" keypath="liquidIntroduction">
+                    <a href="https://liquidjs.com/" target="_blank">{{ $t("documentation") }}</a>
+                </i18n-t>
+
+                <code v-pre>{{ msg }}</code>: {{ $t("templateMsg") }}<br />
+                <code v-pre>{{ heartbeatJSON }}</code>: {{ $t("templateHeartbeatJSON") }} <b>({{ $t("templateLimitedToUpDownNotifications") }})</b><br />
+                <code v-pre>{{ monitorJSON }}</code>: {{ $t("templateMonitorJSON") }} <b>({{ $t("templateLimitedToUpDownCertNotifications") }})</b><br />
+            </div>
+
+            <textarea
+                id="message_template"
+                v-model="$parent.notification.telegramTemplate"
+                class="form-control mb-3"
+                :placeholder="telegramMessageTemplatePlaceholder"
+                required
+            ></textarea>
+        </div>
+    </template>
 
+    <div class="mb-3">
         <div class="form-check form-switch">
             <input v-model="$parent.notification.telegramSendSilently" class="form-check-input" type="checkbox">
             <label class="form-check-label">{{ $t("telegramSendSilently") }}</label>
@@ -63,6 +119,17 @@ export default {
     components: {
         HiddenInput,
     },
+    computed: {
+        telegramMessageTemplatePlaceholder() {
+            return this.$t("Example:", [
+                `
+Uptime Kuma Alert{% if monitorJSON %} - {{ monitorJSON['name'] }}{% endif %}
+
+{{ msg }}
+                `,
+            ]);
+        }
+    },
     methods: {
         /**
          * Get the URL for telegram updates
@@ -115,3 +182,9 @@ export default {
     }
 };
 </script>
+
+<style lang="scss" scoped>
+textarea {
+    min-height: 150px;
+}
+</style>
diff --git a/src/lang/en.json b/src/lang/en.json
@@ -421,6 +421,9 @@
     "telegramSendSilentlyDescription": "Sends the message silently. Users will receive a notification with no sound.",
     "telegramProtectContent": "Protect Forwarding/Saving",
     "telegramProtectContentDescription": "If enabled, the bot messages in Telegram will be protected from forwarding and saving.",
+    "telegramUseTemplate": "Use custom message template",
+    "telegramUseTemplateDescription": "If enabled, the message will be sent using a custom template.",
+    "telegramTemplateFormatDescription": "See Telegram {0} for more details on formatting.",
     "supportTelegramChatID": "Support Direct Chat / Group / Channel's Chat ID",
     "wayToGetTelegramChatID": "You can get your chat ID by sending a message to the bot and going to this URL to view the chat_id:",
     "YOUR BOT TOKEN HERE": "YOUR BOT TOKEN HERE",
@@ -1051,5 +1054,8 @@
     "RabbitMQ Password": "RabbitMQ Password",
     "rabbitmqHelpText": "To use the monitor, you will need to enable the Management Plugin in your RabbitMQ setup. For more information, please consult the {rabitmq_documentation}.",
     "SendGrid API Key": "SendGrid API Key",
-    "Separate multiple email addresses with commas": "Separate multiple email addresses with commas"
+    "Separate multiple email addresses with commas": "Separate multiple email addresses with commas",
+    "Plain Text": "Plain Text",
+    "Template": "Template",
+    "Template Format": "Template Format"
 }