From e5a52257eac5a9cf1aeb38a976b640b7453c8c94 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 7 Jan 2024 01:36:51 +0800
Subject: [PATCH] feat: add telegram notification support

---
 src/client/components/AutoLoadingButton.tsx   | 17 +++++
 .../NotificationInfo/strategies/index.ts      |  6 ++
 .../NotificationInfo/strategies/telegram.tsx  | 75 +++++++++++++++++++
 .../model/notification/provider/index.ts      |  2 +
 .../model/notification/provider/telegram.ts   | 49 ++++++++++++
 src/server/model/notification/token/index.ts  |  2 +
 .../notification/token/tokenizer/base.ts      |  3 +-
 .../notification/token/tokenizer/telegram.ts  | 22 ++++++
 8 files changed, 175 insertions(+), 1 deletion(-)
 create mode 100644 src/client/components/AutoLoadingButton.tsx
 create mode 100644 src/client/components/modals/NotificationInfo/strategies/telegram.tsx
 create mode 100644 src/server/model/notification/provider/telegram.ts
 create mode 100644 src/server/model/notification/token/tokenizer/telegram.ts

diff --git a/src/client/components/AutoLoadingButton.tsx b/src/client/components/AutoLoadingButton.tsx
new file mode 100644
index 0000000..8285ccd
--- /dev/null
+++ b/src/client/components/AutoLoadingButton.tsx
@@ -0,0 +1,17 @@
+import { Button, ButtonProps } from 'antd';
+import React, { useState } from 'react';
+import { useEvent } from '../hooks/useEvent';
+
+export const AutoLoadingButton: React.FC<ButtonProps> = React.memo((props) => {
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = useEvent(
+    async (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+      setLoading(true);
+      await props.onClick?.(e);
+      setLoading(false);
+    }
+  );
+  return <Button loading={loading} {...props} onClick={handleClick} />;
+});
+AutoLoadingButton.displayName = 'AutoLoadingButton';
diff --git a/src/client/components/modals/NotificationInfo/strategies/index.ts b/src/client/components/modals/NotificationInfo/strategies/index.ts
index 9df1f8e..916de13 100644
--- a/src/client/components/modals/NotificationInfo/strategies/index.ts
+++ b/src/client/components/modals/NotificationInfo/strategies/index.ts
@@ -1,5 +1,6 @@
 import React from 'react';
 import { NotificationSMTP } from './smtp';
+import { NotificationTelegram } from './telegram';
 
 interface NotificationStrategy {
   label: string;
@@ -13,4 +14,9 @@ export const notificationStrategies: NotificationStrategy[] = [
     name: 'smtp',
     form: NotificationSMTP,
   },
+  {
+    label: 'Telegram',
+    name: 'telegram',
+    form: NotificationTelegram,
+  },
 ];
diff --git a/src/client/components/modals/NotificationInfo/strategies/telegram.tsx b/src/client/components/modals/NotificationInfo/strategies/telegram.tsx
new file mode 100644
index 0000000..cd4b9a3
--- /dev/null
+++ b/src/client/components/modals/NotificationInfo/strategies/telegram.tsx
@@ -0,0 +1,75 @@
+import { Form, Input, Typography } from 'antd';
+import React from 'react';
+import { useEvent } from '../../../../hooks/useEvent';
+import axios from 'axios';
+import { AutoLoadingButton } from '../../../AutoLoadingButton';
+import { get, last } from 'lodash-es';
+
+export const NotificationTelegram: React.FC = React.memo(() => {
+  const token = Form.useWatch(['payload', 'botToken']);
+  const form = Form.useFormInstance();
+
+  const getUpdatesUrl = (t: string = '<YOUR BOT TOKEN HERE>') =>
+    `https://api.telegram.org/bot${t}/getUpdates`;
+
+  const handleAutoGet = useEvent(async () => {
+    const res = await axios.get(getUpdatesUrl(token));
+
+    const update = last(get(res, ['data', 'result']));
+
+    let chatId;
+    if (get(update, 'channel_post')) {
+      chatId = get(update, 'channel_post.chat.id');
+    } else if (get(update, 'message')) {
+      chatId = get(update, 'message.chat.id');
+    }
+
+    if (chatId) {
+      form.setFieldValue(['payload', 'chatId'], String(chatId));
+    }
+  });
+
+  return (
+    <>
+      <Form.Item
+        label="Bot Token"
+        name={['payload', 'botToken']}
+        rules={[{ required: true }]}
+      >
+        <Input.Password />
+      </Form.Item>
+      <Typography.Paragraph className="text-neutral-500">
+        You can get a token from https://t.me/BotFather.
+      </Typography.Paragraph>
+      <Form.Item label="Chat ID" required={true}>
+        <div className="flex gap-2 overflow-hidden">
+          <Form.Item
+            className="flex-1"
+            name={['payload', 'chatId']}
+            noStyle={true}
+            rules={[{ required: true }]}
+          >
+            <Input />
+          </Form.Item>
+
+          {token && (
+            <AutoLoadingButton onClick={handleAutoGet}>
+              Auto Fetch
+            </AutoLoadingButton>
+          )}
+        </div>
+      </Form.Item>
+      <Typography.Paragraph className="text-neutral-500">
+        Support Direct Chat / Group / Channel's Chat ID
+      </Typography.Paragraph>
+      <Typography.Paragraph className="text-neutral-500">
+        You can get your chat ID by sending a message to the bot and going to
+        this URL to view the chat_id:
+      </Typography.Paragraph>
+      <Typography.Link href={getUpdatesUrl(token)} target="_blank">
+        {getUpdatesUrl('*'.repeat(token?.length ?? 0))}
+      </Typography.Link>
+    </>
+  );
+});
+NotificationTelegram.displayName = 'NotificationTelegram';
diff --git a/src/server/model/notification/provider/index.ts b/src/server/model/notification/provider/index.ts
index 7f3b1d5..3e46aeb 100644
--- a/src/server/model/notification/provider/index.ts
+++ b/src/server/model/notification/provider/index.ts
@@ -1,6 +1,8 @@
 import { smtp } from './smtp';
+import { telegram } from './telegram';
 import type { NotificationProvider } from './type';
 
 export const notificationProviders: Record<string, NotificationProvider> = {
   smtp,
+  telegram,
 };
diff --git a/src/server/model/notification/provider/telegram.ts b/src/server/model/notification/provider/telegram.ts
new file mode 100644
index 0000000..609b355
--- /dev/null
+++ b/src/server/model/notification/provider/telegram.ts
@@ -0,0 +1,49 @@
+import { NotificationProvider } from './type';
+import { telegramContentTokenizer, token } from '../token';
+import axios from 'axios';
+import { ImageContentToken } from '../token/type';
+
+interface TelegramPayload {
+  botToken: string;
+  chatId: string;
+}
+
+export const telegram: NotificationProvider = {
+  send: async (notification, title, message) => {
+    const payload = notification.payload as unknown as TelegramPayload;
+    const { botToken, chatId } = payload;
+
+    const text = telegramContentTokenizer.parse([
+      token.title(title, 1),
+      ...message,
+    ]);
+
+    // send text part
+    await axios.post(`https://api.telegram.org/bot${botToken}/sendMessage`, {
+      chat_id: chatId,
+      text,
+      parse_mode: 'MarkdownV2',
+    });
+
+    // send image
+    const imageTokens = message.filter(
+      (m): m is ImageContentToken => m.type === 'image'
+    );
+    if (imageTokens.length > 0) {
+      if (imageTokens.length === 1) {
+        await axios.post(`https://api.telegram.org/bot${botToken}/sendPhoto`, {
+          chat_id: chatId,
+          photo: imageTokens[0].url,
+        });
+      } else {
+        await axios.post(`https://api.telegram.org/bot${botToken}/sendPhoto`, {
+          chat_id: chatId,
+          media: imageTokens.map((t) => ({
+            type: 'photo',
+            media: t.url,
+          })),
+        });
+      }
+    }
+  },
+};
diff --git a/src/server/model/notification/token/index.ts b/src/server/model/notification/token/index.ts
index d79bba0..a557d7d 100644
--- a/src/server/model/notification/token/index.ts
+++ b/src/server/model/notification/token/index.ts
@@ -1,6 +1,7 @@
 import { BaseContentTokenizer } from './tokenizer/base';
 import { HTMLContentTokenizer } from './tokenizer/html';
 import { MarkdownContentTokenizer } from './tokenizer/markdown';
+import { TelegramContentTokenizer } from './tokenizer/telegram';
 import {
   ContentToken,
   ImageContentToken,
@@ -38,3 +39,4 @@ export const token = {
 export const baseContentTokenizer = new BaseContentTokenizer();
 export const htmlContentTokenizer = new HTMLContentTokenizer();
 export const markdownContentTokenizer = new MarkdownContentTokenizer();
+export const telegramContentTokenizer = new TelegramContentTokenizer();
diff --git a/src/server/model/notification/token/tokenizer/base.ts b/src/server/model/notification/token/tokenizer/base.ts
index e411beb..a580600 100644
--- a/src/server/model/notification/token/tokenizer/base.ts
+++ b/src/server/model/notification/token/tokenizer/base.ts
@@ -53,6 +53,7 @@ export class BaseContentTokenizer {
 
         return '';
       })
-      .join('');
+      .join('')
+      .trim();
   }
 }
diff --git a/src/server/model/notification/token/tokenizer/telegram.ts b/src/server/model/notification/token/tokenizer/telegram.ts
new file mode 100644
index 0000000..2c8d9de
--- /dev/null
+++ b/src/server/model/notification/token/tokenizer/telegram.ts
@@ -0,0 +1,22 @@
+import { ImageContentToken, TitleContentToken } from '../type';
+import { MarkdownContentTokenizer } from './markdown';
+
+export class TelegramContentTokenizer extends MarkdownContentTokenizer {
+  parseImage(token: ImageContentToken) {
+    return '';
+  }
+
+  parseTitle(token: TitleContentToken) {
+    if (token.level === 1) {
+      return `\n\\# ${token.content}\n`;
+    }
+    if (token.level === 2) {
+      return `\n\\#\\# ${token.content}\n`;
+    }
+    if (token.level === 3) {
+      return `\n\\#\\#\\# ${token.content}\n`;
+    }
+
+    return `\n${token.content}\n`;
+  }
+}