Add Telegram mobile replies

public/admin.css

@@ -333,6 +333,9 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
   display: grid;
   align-items: stretch;
 }
+.telegram-settings input {
+  width: 100%;
+}
 .settings-actions {
   display: flex;
   align-items: center;

public/admin.html

@@ -226,6 +226,25 @@
                   <button id="testOpenAiKey" type="button">Otestovat klic</button>
                 </div>
               </fieldset>
+              <fieldset class="effect-settings telegram-settings">
+                <legend>Telegram</legend>
+                <p class="ai-help">
+                  Bot vytvoris v Telegramu pres BotFather. Webhook URL zkopiruj do setWebhook nebo ji pouzijeme pri nastaveni serveru.
+                </p>
+                <label><input id="telegramEnabled" type="checkbox"> zapnout Telegram</label>
+                <label>Jmeno odpovedi <input id="telegramOperatorName" autocomplete="off" placeholder="Alex"></label>
+                <label class="full-row">Bot token
+                  <input id="telegramBotToken" type="password" autocomplete="off" placeholder="123456:ABC...">
+                  <small id="telegramStatus">Telegram neni nastaveny.</small>
+                </label>
+                <label class="full-row">Chat ID <input id="telegramChatId" autocomplete="off" placeholder="123456789"></label>
+                <label class="full-row">Webhook secret <input id="telegramWebhookSecret" autocomplete="off" placeholder="nahodny-secret"></label>
+                <label class="full-row">Webhook URL <input id="telegramWebhookUrl" readonly></label>
+                <div class="ai-actions">
+                  <button id="saveTelegramSettings" type="button">Ulozit Telegram</button>
+                  <button id="testTelegram" type="button">Otestovat Telegram</button>
+                </div>
+              </fieldset>
               <fieldset class="effect-settings admin-users-settings">
                 <legend>BO uzivatele</legend>
                 <form id="adminUserForm" class="admin-user-form">

public/admin.js

@@ -97,6 +97,13 @@ $("#openaiApiKey").addEventListener("input", markAiSettingsDirty);
 $("#refreshAiModels").addEventListener("click", loadAiModels);
 $("#saveAiSettings").addEventListener("click", saveTranslationSettings);
 $("#testOpenAiKey").addEventListener("click", testOpenAiKey);
+$("#telegramEnabled").addEventListener("change", markTelegramSettingsDirty);
+$("#telegramOperatorName").addEventListener("input", markTelegramSettingsDirty);
+$("#telegramBotToken").addEventListener("input", markTelegramSettingsDirty);
+$("#telegramChatId").addEventListener("input", markTelegramSettingsDirty);
+$("#telegramWebhookSecret").addEventListener("input", markTelegramSettingsDirty);
+$("#saveTelegramSettings").addEventListener("click", saveTelegramSettings);
+$("#testTelegram").addEventListener("click", testTelegram);
 $("#adminUserForm").addEventListener("submit", createAdminUser);
 $("#adminUsersList").addEventListener("click", handleAdminUserClick);
 document.querySelectorAll("[data-settings-tab]").forEach((button) => {
@@ -473,6 +480,7 @@ function renderSite() {
     ? `Klic ulozeny (${s.translations.openaiApiKeyMasked || "sk-..."})`
     : "Klic neni ulozeny. Bez nej AI preklady nepobezi.";
   renderModelOptions(s.translations?.model || "gpt-5-mini");
+  renderTelegramSettings(s.telegram || {});
 }
 
 function renderWidgetLanguageOptions(form, settings) {
@@ -707,6 +715,56 @@ function setOpenAiStatus(message) {
   $("#openaiApiKeyStatus").textContent = message;
 }
 
+function renderTelegramSettings(settings) {
+  $("#telegramEnabled").checked = Boolean(settings.enabled);
+  $("#telegramOperatorName").value = settings.operatorName || "Alex";
+  $("#telegramBotToken").value = "";
+  $("#telegramChatId").value = settings.chatId || "";
+  $("#telegramWebhookSecret").value = settings.webhookSecret || "";
+  $("#telegramWebhookUrl").value = settings.webhookUrl || "";
+  setTelegramStatus(settings.hasBotToken
+    ? `Token ulozeny (${settings.botTokenMasked || "token..."})`
+    : "Token neni ulozeny. Bez nej Telegram nepobezi.");
+}
+
+function markTelegramSettingsDirty() {
+  setTelegramStatus("Telegram nastaveni ma neulozene zmeny.");
+}
+
+async function saveTelegramSettings() {
+  if (!state.site) return;
+  setTelegramStatus("Ukladam Telegram...");
+  const settings = structuredClone(state.site.settings);
+  settings.telegram = {
+    ...(settings.telegram || {}),
+    enabled: $("#telegramEnabled").checked,
+    chatId: $("#telegramChatId").value.trim(),
+    webhookSecret: $("#telegramWebhookSecret").value.trim(),
+    operatorName: $("#telegramOperatorName").value.trim() || "Alex"
+  };
+  const botToken = $("#telegramBotToken").value.trim();
+  if (botToken) settings.telegram.botToken = botToken;
+  await saveSite({ settings, isOnline: state.site.isOnline });
+  $("#telegramBotToken").value = "";
+  renderTelegramSettings(state.site.settings.telegram || {});
+}
+
+async function testTelegram() {
+  await saveTelegramSettings();
+  setTelegramStatus("Posilam test Telegramu...");
+  const result = await api("/api/admin/telegram/test", { method: "POST" }).catch((error) => error);
+  if (result?.ok) {
+    if (result.webhookUrl) $("#telegramWebhookUrl").value = result.webhookUrl;
+    setTelegramStatus("Telegram funguje. Testovaci zprava odeslana a webhook nastaven.");
+    return;
+  }
+  setTelegramStatus(`Telegram test selhal: ${shortErrorMessage(result?.message || result?.error || "neznamá chyba")}`);
+}
+
+function setTelegramStatus(message) {
+  $("#telegramStatus").textContent = message;
+}
+
 async function loadAiModels() {
   const current = $("#translationModel").value || state.site?.settings?.translations?.model || "gpt-5-mini";
   const data = await api("/api/admin/ai/models").catch((error) => error?.models ? error : null);