feat: create SetWebhookUtil component

.vscode/settings.json

@@ -9,8 +9,13 @@
     "./site/docs/hosting/",
     "./site/docs/plugins/",
     "./site/docs/resources/",
+    "./site/docs/zh/",
     "./site/docs/es/",
     "./site/docs/id/",
     "./site/README.md"
-  ]
+  ],
+  "editor.defaultFormatter": "denoland.vscode-deno",
+  "[typescript]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  }
 }

site/docs/.vuepress/client.ts

@@ -0,0 +1,13 @@
+import { defineClientConfig } from "@vuepress/client";
+import { defineAsyncComponent } from "vue";
+
+export default defineClientConfig({
+  enhance({ app }) {
+    app.component(
+      "SetWebhookUtil",
+      defineAsyncComponent(
+        () => import("./components/set-webhook-util/SetWebhookUtil.vue"),
+      ),
+    );
+  },
+});

site/docs/.vuepress/components/set-webhook-util/GrammyError.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from '@vue/reactivity'
+import { usePageLang } from '@vuepress/client'
+import type { GrammyError } from 'grammy'
+import { NAlert, NButton, NSpace } from './deps'
+import { getTranslation } from './translations'
+
+const lang = usePageLang()
+const translation = computed(() => getTranslation(lang.value).error)
+
+type Props = {
+  error: GrammyError | undefined
+  closable?: boolean
+  retriable?: boolean
+}
+
+withDefaults(defineProps<Props>(), { closable: false, retriable: true })
+
+const emit = defineEmits([ 'retry' ])
+
+const retry = () => emit('retry')
+</script>
+
+<template>
+  <n-alert type="error" v-if="error" :title="error.description || error.message" style="margin-bottom: 20px"
+    :closable="closable">
+    <n-space vertical>
+      <span>{{ error.error_code }} {{ error.description ? error.message : '' }}</span>
+      <n-button ghost type="error" v-if="retriable" @click="retry">{{ translation.buttons.retry }}</n-button>
+    </n-space>
+  </n-alert>
+</template>

site/docs/.vuepress/components/set-webhook-util/ManageWebhook.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { usePageLang } from '@vuepress/client'
+import type { Api } from 'grammy/web'
+import { computed, ref, toRefs } from 'vue'
+import { useDeleteWebhook } from '../../composables/use-delete-webhook'
+import { useSetWebhook } from '../../composables/use-set-webhook'
+import { NButton, NForm, NFormItem, NInput, NSpace, NSwitch } from './deps'
+import GrammyError from './GrammyError.vue'
+import { getTranslation } from './translations'
+
+const lang = usePageLang()
+const translation = computed(() => getTranslation(lang.value).manageWebhook)
+
+type Props = {
+  api: Api | undefined
+}
+
+const _props = defineProps<Props>()
+const props = toRefs(_props)
+
+const dropPendingUpdates = ref(false)
+const { error: setWebhookError, loading: setWebhookLoading, setWebhook, secretToken, url } = useSetWebhook(props.api, { dropPendingUpdates })
+const { error: deleteWebhookError, loading: deleteWebhookLoading, deleteWebhook } = useDeleteWebhook(props.api, dropPendingUpdates)
+const webhookLoading = computed(() => setWebhookLoading.value || deleteWebhookLoading.value)
+
+const emit = defineEmits([ 'webhookChange' ])
+const withRefreshWebhookInfo = (fn: () => Promise<any>) => fn().then(() => emit('webhookChange'))
+
+const urlRule = {
+  required: true,
+  validator: () => {
+    if (!url.value) return new Error(translation.value.fields.url.errorMessages.required)
+
+    try {
+      const urlObj = new URL(url.value)
+
+      if (urlObj.protocol.replace(':', '') !== 'https') return new Error(translation.value.fields.url.errorMessages.protocol)
+
+      return true
+    } catch (err) {
+      return new Error(translation.value.fields.url.errorMessages.invalid)
+    }
+  },
+  trigger: [ 'blur', 'input' ]
+}
+
+const setUrl = (newUrl: string) => { url.value = newUrl }
+defineExpose({ setUrl })
+</script>
+
+<template>
+  <n-form label-placement="top" style="margin-top: 10px">
+    <n-form-item :label="translation.fields.url.label" path="url" style="margin-bottom: 10px" :rule="urlRule">
+      <n-input :readonly="webhookLoading" :placeholder="translation.fields.url.placeholder" v-model:value="url" />
+    </n-form-item>
+    <n-form-item :label="translation.fields.secret.label">
+      <n-input :readonly="webhookLoading" :placeholder="translation.fields.secret.placeholder"
+        v-model:value="secretToken" />
+    </n-form-item>
+    <n-form-item :label="translation.fields.dropPending.label">
+      <n-switch :readonly="webhookLoading" v-model:value="dropPendingUpdates" />
+    </n-form-item>
+    <grammy-error :error="setWebhookError" @retry="withRefreshWebhookInfo(setWebhook)" :retriable="false" />
+    <grammy-error :error="deleteWebhookError" @retry="withRefreshWebhookInfo(deleteWebhook)" />
+    <n-space justify="end">
+      <n-button type="error" @click="withRefreshWebhookInfo(deleteWebhook)" :loading="deleteWebhookLoading"
+        :disabled="setWebhookLoading">
+        {{ translation.buttons.deleteWebhook }}
+      </n-button>
+      <n-button type="primary" @click="withRefreshWebhookInfo(setWebhook)" :loading="setWebhookLoading"
+        :disabled="deleteWebhookLoading || !url">
+        {{ translation.buttons.setWebhook }}
+      </n-button>
+    </n-space>
+  </n-form>
+</template>

site/docs/.vuepress/components/set-webhook-util/SetWebhookUtil.vue

@@ -0,0 +1,151 @@
+<script lang="ts" setup>
+import { ArrowLeft12Filled, Bot20Filled, Open20Filled } from '@vicons/fluent'
+import { usePageLang } from '@vuepress/client'
+import { useApi } from '../../composables/use-api'
+import { useApiMethod } from '../../composables/use-api-method'
+import { useProfilePhoto } from '../../composables/use-profile-photo'
+import GrammyError from './GrammyError.vue'
+import ManageWebhook from './ManageWebhook.vue'
+import { getTranslation } from './translations'
+import WebhookInfo from './WebhookInfo.vue'
+
+import {
+  darkTheme, type GlobalThemeOverrides
+} from 'naive-ui'
+import {
+  NAlert, NAvatar, NButton,
+  NCard,
+  NCheckbox, NConfigProvider, NForm,
+  NFormItem, NIcon, NInput, NSpace, NSpin, NTabPane, NTabs, NThemeEditor
+} from './deps'
+
+import {
+  computed,
+  ref,
+  watch
+} from 'vue'
+
+/**
+ * Layout
+ */
+const dev = ref(__VUEPRESS_DEV__)
+
+const lang = usePageLang()
+const translation = computed(() => getTranslation(lang.value))
+
+const themeOverrides: GlobalThemeOverrides = {
+  common: {
+    primaryColor: '#009dcaFF',
+    primaryColorHover: '#27b5e6FF',
+    primaryColorPressed: '#009dcaFF',
+    primaryColorSuppl: '#138cb3FF',
+    bodyColor: '#38404a',
+    cardColor: '#38404AFF'
+  }
+}
+
+/**
+ * Orchestration
+ */
+const webhookInfo = ref<typeof WebhookInfo | null>(null)
+const manageWebhook = ref<typeof ManageWebhook | null>(null)
+
+const refreshWebhookInfo = () => webhookInfo.value?.refresh()
+const setWebhookUrl = (url: string) => {
+  manageWebhook.value?.setUrl(url)
+}
+
+const { api, token } = useApi()
+const { loading: botInfoLoading, error: botInfoError, data: botInfo, refresh: botInfoRefresh } = useApiMethod(api, 'getMe')
+const botName = computed(() => botInfo.value ? `${[ botInfo.value.first_name, botInfo.value.last_name ].join(' ')}` : '')
+
+const { url: photoUrl, refresh: photoRefresh } = useProfilePhoto(api)
+
+watch(botInfo, (info) => {
+  if (!info) return
+  photoRefresh(info.id, token.value)
+})
+
+const resetBot = () => {
+  botInfo.value = undefined
+}
+</script>
+
+<template>
+  <n-config-provider :theme-overrides="themeOverrides" :theme="darkTheme">
+    <n-theme-editor v-if="dev">
+      <n-space vertical v-if="!botInfo">
+        <n-alert :title="translation.tokenCard.disclaimer.title" type="warning">
+          {{ translation.tokenCard.disclaimer.content }}
+        </n-alert>
+        <n-card size="small">
+          <n-form>
+            <n-form-item :label="translation.tokenCard.fields.token.label">
+              <n-input :readonly="botInfoLoading" v-model:value="token"
+                :placeholder="translation.tokenCard.fields.token.placeholder" clearable />
+            </n-form-item>
+            <GrammyError :error="botInfoError" closable @retry="botInfoRefresh" />
+            <n-space justify="end">
+              <n-button type="primary" :disabled="!token || botInfoLoading" :loading="botInfoLoading"
+                @click="() => botInfoRefresh()">
+                {{ translation.tokenCard.buttons.loadBotInfo }}
+              </n-button>
+            </n-space>
+          </n-form>
+        </n-card>
+      </n-space>
+      <n-card v-if="botInfo" style="margin-top: 10px;" size="small" :segmented="{ content: true }">
+        <template #header>
+          <n-space align="center">
+            <n-avatar round :src="photoUrl">
+              <template #fallback>
+                <n-icon>
+                  <bot20-filled />
+                </n-icon>
+              </template>
+              <n-spin size="small" v-if="!photoUrl" />
+            </n-avatar>
+            {{ botName }}
+          </n-space>
+        </template>
+        <template #header-extra>
+          {{ `ID: ${botInfo.id}` }}
+        </template>
+        <n-space justify="center" style="margin-top: 20px;">
+          <n-checkbox :checked="botInfo.can_join_groups" readonly>{{ translation.botCard.canJoinGroups }}</n-checkbox>
+          <n-checkbox :checked="botInfo.can_read_all_group_messages" readonly>{{
+    translation.botCard.canReadGroupMessages
+}}</n-checkbox>
+          <n-checkbox :checked="botInfo.supports_inline_queries" readonly>{{ translation.botCard.inlineQueries }}
+          </n-checkbox>
+        </n-space>
+        <n-tabs type="segment" animated style="margin-top: 20px;">
+          <n-tab-pane name="webhookInfo" :tab="translation.botCard.tabs.webhookInfo" display-directive="show">
+            <WebhookInfo :api="api" ref="webhookInfo" @url-change="setWebhookUrl" />
+          </n-tab-pane>
+          <n-tab-pane name="manageWebhook" :tab="translation.botCard.tabs.manageWebhook" display-directive="show">
+            <ManageWebhook :api="api" ref="manageWebhook" @webhook-change="refreshWebhookInfo" />
+          </n-tab-pane>
+        </n-tabs>
+        <template #action>
+          <n-space justify="space-between">
+            <n-button text @click="resetBot">
+              <template #icon>
+                <arrow-left12-filled />
+              </template>
+              {{ translation.botCard.buttons.changeToken }}
+            </n-button>
+            <a :href="`https://t.me/${botInfo.username}`" target="_blank">
+              <n-button text icon-placement="right">
+                <template #icon>
+                  <open20-filled />
+                </template>
+                Open chat with @{{ botInfo.username }}
+              </n-button>
+            </a>
+          </n-space>
+        </template>
+      </n-card>
+    </n-theme-editor>
+  </n-config-provider>
+</template>