feat: Discord/Slack/ntfy/Matrix targets, command templates, delete protection, email/matrix bots
- Discord, Slack, ntfy, Matrix notification target types with clients and dispatch - MatrixBot model + API + frontend in Bots tab - Command template system fully wired into all handler commands - Default command templates seeded (EN/RU, 14 slots each) - Command template editor with variables reference including child fields - Delete protection on all 10 entity types (409 with consumer details) - Provider type selector on template config forms - Target type selector as dropdown with all 7 types - Response template selector on command config form - CLAUDE.md: mandatory server restart rule, child properties rule
This commit is contained in:
@@ -13,17 +13,35 @@
|
||||
import Hint from '$lib/components/Hint.svelte';
|
||||
import IconButton from '$lib/components/IconButton.svelte';
|
||||
import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
|
||||
import type { NotificationTarget, TelegramBot, TelegramChat } from '$lib/types';
|
||||
import type { NotificationTarget, TelegramBot, TelegramChat, EmailBot, MatrixBot } from '$lib/types';
|
||||
|
||||
const ALL_TYPES = ['telegram', 'webhook', 'email', 'discord', 'slack', 'ntfy', 'matrix'] as const;
|
||||
type TargetType = typeof ALL_TYPES[number];
|
||||
const TYPE_ICONS: Record<string, string> = {
|
||||
telegram: 'mdiSend', webhook: 'mdiWebhook', email: 'mdiEmailOutline',
|
||||
discord: 'mdiChat', slack: 'mdiSlack', ntfy: 'mdiBell', matrix: 'mdiMatrix',
|
||||
};
|
||||
|
||||
let targets = $state<NotificationTarget[]>([]);
|
||||
let bots = $state<TelegramBot[]>([]);
|
||||
let emailBots = $state<EmailBot[]>([]);
|
||||
let matrixBots = $state<MatrixBot[]>([]);
|
||||
let botChats = $state<Record<number, TelegramChat[]>>({});
|
||||
let showForm = $state(false);
|
||||
let editing = $state<number | null>(null);
|
||||
let formType = $state<'telegram' | 'webhook'>('telegram');
|
||||
let formType = $state<TargetType>('telegram');
|
||||
const defaultForm = () => ({ name: '', icon: '', bot_id: 0, chat_id: '', bot_token: '', url: '', headers: '',
|
||||
max_media_to_send: 50, max_media_per_group: 10, media_delay: 500, max_asset_size: 50,
|
||||
disable_url_preview: false, send_large_photos_as_documents: false, ai_captions: false, chat_action: 'typing' });
|
||||
disable_url_preview: false, send_large_photos_as_documents: false, ai_captions: false, chat_action: 'typing',
|
||||
// Discord/Slack
|
||||
webhook_url: '', username: '',
|
||||
// ntfy
|
||||
server_url: 'https://ntfy.sh', topic: '', auth_token: '', priority: 3,
|
||||
// Matrix
|
||||
matrix_bot_id: 0, room_id: '',
|
||||
// Email
|
||||
email_bot_id: 0, email: '',
|
||||
});
|
||||
let form = $state(defaultForm());
|
||||
let error = $state('');
|
||||
let headersError = $state('');
|
||||
@@ -36,7 +54,9 @@
|
||||
onMount(load);
|
||||
async function load() {
|
||||
try {
|
||||
[targets, bots] = await Promise.all([api('/targets'), api('/telegram-bots')]);
|
||||
[targets, bots, emailBots, matrixBots] = await Promise.all([
|
||||
api('/targets'), api('/telegram-bots'), api('/email-bots'), api('/matrix-bots'),
|
||||
]);
|
||||
loadError = '';
|
||||
} catch (err: any) { loadError = err.message || t('common.loadError'); snackError(loadError); } finally { loaded = true; }
|
||||
}
|
||||
@@ -51,11 +71,24 @@
|
||||
formType = tgt.type;
|
||||
const c = tgt.config || {};
|
||||
form = {
|
||||
name: tgt.name, icon: tgt.icon || '', bot_id: c.bot_id || 0, bot_token: '', chat_id: c.chat_id || '', url: c.url || '', headers: '',
|
||||
name: tgt.name, icon: tgt.icon || '',
|
||||
// telegram
|
||||
bot_id: c.bot_id || 0, bot_token: '', chat_id: c.chat_id || '',
|
||||
max_media_to_send: c.max_media_to_send ?? 50, max_media_per_group: c.max_media_per_group ?? 10,
|
||||
media_delay: c.media_delay ?? 500, max_asset_size: c.max_asset_size ?? 50,
|
||||
disable_url_preview: c.disable_url_preview ?? false, send_large_photos_as_documents: c.send_large_photos_as_documents ?? false,
|
||||
ai_captions: c.ai_captions ?? false, chat_action: c.chat_action ?? 'typing',
|
||||
// webhook
|
||||
url: c.url || '', headers: '',
|
||||
// discord/slack
|
||||
webhook_url: c.webhook_url || '', username: c.username || '',
|
||||
// ntfy
|
||||
server_url: c.server_url || 'https://ntfy.sh', topic: c.topic || '',
|
||||
auth_token: c.auth_token || '', priority: c.priority ?? 3,
|
||||
// email
|
||||
email_bot_id: c.email_bot_id || 0, email: c.email || '',
|
||||
// matrix
|
||||
matrix_bot_id: c.matrix_bot_id || 0, room_id: c.room_id || '',
|
||||
};
|
||||
editing = tgt.id; showTelegramSettings = false; showForm = true;
|
||||
if (form.bot_id) await loadBotChats();
|
||||
@@ -66,24 +99,36 @@
|
||||
if (submitting) return;
|
||||
submitting = true;
|
||||
try {
|
||||
let botToken = form.bot_token;
|
||||
if (formType === 'telegram' && form.bot_id && !botToken) {
|
||||
const tokenRes = await api(`/telegram-bots/${form.bot_id}/token`);
|
||||
botToken = tokenRes.token;
|
||||
}
|
||||
let parsedHeaders = {};
|
||||
if (formType === 'webhook' && form.headers) {
|
||||
try { parsedHeaders = JSON.parse(form.headers); }
|
||||
catch { headersError = t('common.headersInvalid'); return; }
|
||||
}
|
||||
const config = formType === 'telegram'
|
||||
? { ...(botToken ? { bot_token: botToken } : {}), chat_id: form.chat_id,
|
||||
let config: Record<string, any> = {};
|
||||
|
||||
if (formType === 'telegram') {
|
||||
let botToken = form.bot_token;
|
||||
if (form.bot_id && !botToken) {
|
||||
const tokenRes = await api(`/telegram-bots/${form.bot_id}/token`);
|
||||
botToken = tokenRes.token;
|
||||
}
|
||||
config = { ...(botToken ? { bot_token: botToken } : {}), chat_id: form.chat_id,
|
||||
bot_id: form.bot_id || undefined,
|
||||
max_media_to_send: form.max_media_to_send, max_media_per_group: form.max_media_per_group,
|
||||
media_delay: form.media_delay, max_asset_size: form.max_asset_size,
|
||||
disable_url_preview: form.disable_url_preview, send_large_photos_as_documents: form.send_large_photos_as_documents,
|
||||
ai_captions: form.ai_captions, chat_action: form.chat_action || undefined }
|
||||
: { url: form.url, headers: parsedHeaders, ai_captions: form.ai_captions };
|
||||
ai_captions: form.ai_captions, chat_action: form.chat_action || undefined };
|
||||
} else if (formType === 'webhook') {
|
||||
let parsedHeaders = {};
|
||||
if (form.headers) {
|
||||
try { parsedHeaders = JSON.parse(form.headers); }
|
||||
catch { headersError = t('common.headersInvalid'); return; }
|
||||
}
|
||||
config = { url: form.url, headers: parsedHeaders, ai_captions: form.ai_captions };
|
||||
} else if (formType === 'discord' || formType === 'slack') {
|
||||
config = { webhook_url: form.webhook_url, username: form.username || undefined };
|
||||
} else if (formType === 'ntfy') {
|
||||
config = { server_url: form.server_url, topic: form.topic, auth_token: form.auth_token || undefined };
|
||||
} else if (formType === 'email') {
|
||||
config = { email_bot_id: form.email_bot_id, email: form.email };
|
||||
} else if (formType === 'matrix') {
|
||||
config = { matrix_bot_id: form.matrix_bot_id, room_id: form.room_id };
|
||||
}
|
||||
if (editing) {
|
||||
await api(`/targets/${editing}`, { method: 'PUT', body: JSON.stringify({ name: form.name, icon: form.icon, config }) });
|
||||
} else {
|
||||
@@ -126,11 +171,13 @@
|
||||
{#if error}<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3 mb-4">{error}</div>{/if}
|
||||
<form onsubmit={save} class="space-y-4">
|
||||
<div>
|
||||
<span class="block text-sm font-medium mb-1">{t('targets.type')}</span>
|
||||
<div class="flex gap-4">
|
||||
<label class="flex items-center gap-1 text-sm"><input type="radio" bind:group={formType} value="telegram" /> Telegram</label>
|
||||
<label class="flex items-center gap-1 text-sm"><input type="radio" bind:group={formType} value="webhook" /> Webhook</label>
|
||||
</div>
|
||||
<label for="tgt-type" class="block text-sm font-medium mb-1">{t('targets.type')}</label>
|
||||
<select id="tgt-type" bind:value={formType}
|
||||
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
|
||||
{#each ALL_TYPES as tt}
|
||||
<option value={tt}>{tt.charAt(0).toUpperCase() + tt.slice(1)}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="tgt-name" class="block text-sm font-medium mb-1">{t('targets.name')}</label>
|
||||
@@ -216,7 +263,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
{:else if formType === 'webhook'}
|
||||
<div>
|
||||
<label for="tgt-url" class="block text-sm font-medium mb-1">{t('targets.webhookUrl')}</label>
|
||||
<input id="tgt-url" bind:value={form.url} required placeholder="https://..." class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
@@ -226,9 +273,72 @@
|
||||
<input id="tgt-headers" bind:value={form.headers} placeholder={'{"Authorization": "Bearer ..."}'} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" style={headersError ? 'border-color: var(--color-error-fg)' : ''} />
|
||||
{#if headersError}<p class="text-xs text-[var(--color-error-fg)] mt-1">{headersError}</p>{/if}
|
||||
</div>
|
||||
{:else if formType === 'discord' || formType === 'slack'}
|
||||
<div>
|
||||
<label for="tgt-wh" class="block text-sm font-medium mb-1">{formType === 'discord' ? 'Discord' : 'Slack'} Webhook URL</label>
|
||||
<input id="tgt-wh" bind:value={form.webhook_url} required placeholder={formType === 'discord' ? 'https://discord.com/api/webhooks/...' : 'https://hooks.slack.com/services/...'}
|
||||
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="tgt-user" class="block text-sm font-medium mb-1">{t('targets.overrideUsername')}</label>
|
||||
<input id="tgt-user" bind:value={form.username} placeholder="Notify Bridge"
|
||||
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
{:else if formType === 'ntfy'}
|
||||
<div>
|
||||
<label for="tgt-ntfy-server" class="block text-sm font-medium mb-1">{t('targets.ntfyServer')}</label>
|
||||
<input id="tgt-ntfy-server" bind:value={form.server_url} required placeholder="https://ntfy.sh"
|
||||
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="tgt-ntfy-topic" class="block text-sm font-medium mb-1">{t('targets.ntfyTopic')}</label>
|
||||
<input id="tgt-ntfy-topic" bind:value={form.topic} required placeholder="my-notifications"
|
||||
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="tgt-ntfy-token" class="block text-sm font-medium mb-1">{t('targets.ntfyToken')}</label>
|
||||
<input id="tgt-ntfy-token" bind:value={form.auth_token} placeholder={t('targets.ntfyTokenPlaceholder')}
|
||||
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
{:else if formType === 'email'}
|
||||
<div>
|
||||
<label for="tgt-emailbot" class="block text-sm font-medium mb-1">{t('targets.selectEmailBot')}</label>
|
||||
<select id="tgt-emailbot" bind:value={form.email_bot_id} required
|
||||
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
|
||||
<option value={0} disabled>— {t('targets.selectEmailBot')} —</option>
|
||||
{#each emailBots as bot}<option value={bot.id}>{bot.name} ({bot.email})</option>{/each}
|
||||
</select>
|
||||
{#if emailBots.length === 0}
|
||||
<p class="text-xs text-[var(--color-muted-foreground)] mt-1">{t('emailBot.noBots')} <a href="/telegram-bots" class="underline">→</a></p>
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<label for="tgt-email" class="block text-sm font-medium mb-1">{t('targets.recipientEmail')}</label>
|
||||
<input id="tgt-email" bind:value={form.email} required type="email" placeholder="recipient@example.com"
|
||||
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
{:else if formType === 'matrix'}
|
||||
<div>
|
||||
<label for="tgt-mxbot" class="block text-sm font-medium mb-1">{t('targets.selectMatrixBot')}</label>
|
||||
<select id="tgt-mxbot" bind:value={form.matrix_bot_id} required
|
||||
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
|
||||
<option value={0} disabled>— {t('targets.selectMatrixBot')} —</option>
|
||||
{#each matrixBots as bot}<option value={bot.id}>{bot.name} ({bot.homeserver_url})</option>{/each}
|
||||
</select>
|
||||
{#if matrixBots.length === 0}
|
||||
<p class="text-xs text-[var(--color-muted-foreground)] mt-1">{t('matrixBot.noBots')} <a href="/telegram-bots" class="underline">→</a></p>
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<label for="tgt-room" class="block text-sm font-medium mb-1">{t('targets.matrixRoomId')}</label>
|
||||
<input id="tgt-room" bind:value={form.room_id} required placeholder="!abc123:matrix.org"
|
||||
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)] font-mono" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.ai_captions} /> {t('targets.aiCaptions')}<Hint text={t('hints.aiCaptions')} /></label>
|
||||
{#if formType === 'telegram'}
|
||||
<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.ai_captions} /> {t('targets.aiCaptions')}<Hint text={t('hints.aiCaptions')} /></label>
|
||||
{/if}
|
||||
|
||||
<button type="submit" disabled={submitting} class="px-4 py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90 disabled:opacity-50">{submitting ? t('common.loading') : (editing ? t('common.save') : t('targets.create'))}</button>
|
||||
</form>
|
||||
@@ -247,9 +357,10 @@
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span style="color: var(--color-primary);"><MdiIcon name={target.icon || (target.type === 'telegram' ? 'mdiSend' : 'mdiWebhook')} size={20} /></span>
|
||||
<span style="color: var(--color-primary);"><MdiIcon name={target.icon || TYPE_ICONS[target.type] || 'mdiTarget'} size={20} /></span>
|
||||
<p class="font-medium">{target.name}</p>
|
||||
<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{target.type}</span>
|
||||
{#if target.receiver_count}<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{target.receiver_count} receiver(s)</span>{/if}
|
||||
</div>
|
||||
<p class="text-sm text-[var(--color-muted-foreground)]">
|
||||
{#if target.type === 'telegram'}
|
||||
@@ -257,8 +368,16 @@
|
||||
{#if target.config?.chat_action}
|
||||
<span class="text-xs px-1.5 py-0.5 ml-1 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{target.config.chat_action}</span>
|
||||
{/if}
|
||||
{:else}
|
||||
{:else if target.type === 'webhook'}
|
||||
{target.config?.url || ''}
|
||||
{:else if target.type === 'discord' || target.type === 'slack'}
|
||||
{target.config?.webhook_url ? target.config.webhook_url.substring(0, 50) + '...' : ''}
|
||||
{:else if target.type === 'ntfy'}
|
||||
{target.config?.server_url || 'ntfy.sh'} / {target.config?.topic || ''}
|
||||
{:else if target.type === 'email'}
|
||||
{target.config?.email || ''}
|
||||
{:else if target.type === 'matrix'}
|
||||
{target.config?.room_id || ''}
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user