Telegram bot as a chat interface (per user, paired, CLI-like commands)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/components/settings/Account.tsx

@@ -6,6 +6,7 @@ import { GitAccount } from "./GitAccount";
 import { ApiTokens } from "./ApiTokens";
 import { CliInstall } from "./CliInstall";
 import { Memory } from "./Memory";
+import { Telegram } from "./Telegram";
 
 export function Account() {
   const t = useT();
@@ -51,6 +52,7 @@ export function Account() {
     <Memory />
     <GitAccount />
     <CliInstall />
+    <Telegram />
     <ApiTokens />
     </>
   );

web/src/components/settings/Telegram.tsx

@@ -0,0 +1,94 @@
+import { useState } from "react";
+import { del, put } from "../../api";
+import { confirmDialog, toast } from "../../dialogs";
+import { useFetch } from "../../hooks";
+import { useT } from "../../i18n";
+import { Icon } from "../Icon";
+
+interface Status {
+  configured: boolean;
+  bot: string;
+  paired: boolean;
+  pair_code: string;
+  running: boolean;
+  error?: string | null;
+}
+
+/** Connect a personal Telegram bot as a chat interface. */
+export function Telegram() {
+  const t = useT();
+  const { data, reload } = useFetch<Status>("/account/telegram");
+  const [token, setToken] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  const connect = async () => {
+    setBusy(true);
+    try {
+      await put("/account/telegram", { token: token.trim() });
+      setToken("");
+      reload();
+    } catch (e) {
+      toast(e);
+    } finally {
+      setBusy(false);
+    }
+  };
+  const disconnect = async () => {
+    if (!(await confirmDialog({ message: t("telegram.disconnectConfirm"), danger: true, confirmLabel: t("telegram.disconnect") }))) return;
+    await del("/account/telegram").catch((e) => toast(e));
+    reload();
+  };
+
+  return (
+    <div className="panel">
+      <h3>
+        <Icon name="share" /> {t("telegram.title")}
+        <span className="spacer" />
+        {data?.configured && (
+          <button className="small ghost danger" onClick={disconnect}>
+            {t("telegram.disconnect")}
+          </button>
+        )}
+      </h3>
+      <div className="hint" style={{ marginBottom: 10 }}>
+        {t("telegram.intro")}
+      </div>
+      {data && !data.configured && (
+        <>
+          <ol className="cli-steps">
+            <li>{t("telegram.step1")}</li>
+            <li>{t("telegram.step2")}</li>
+          </ol>
+          <div className="row" style={{ gap: 6 }}>
+            <input type="password" value={token} placeholder="123456789:AA…" autoComplete="off" onChange={(e) => setToken(e.target.value)} style={{ flex: 1 }} />
+            <button className="primary" onClick={() => void connect()} disabled={busy || !token.trim()}>
+              {busy ? t("telegram.checking") : t("telegram.connect")}
+            </button>
+          </div>
+        </>
+      )}
+      {data?.configured && (
+        <>
+          <div className="row" style={{ gap: 8, alignItems: "center", flexWrap: "wrap" }}>
+            <span className="chip">@{data.bot}</span>
+            <span className={`chip ${data.running && !data.error ? "ok" : "warn"}`}>{data.running && !data.error ? t("telegram.running") : t("telegram.stopped")}</span>
+            {data.paired && <span className="chip ok">{t("telegram.paired")}</span>}
+          </div>
+          {!data.paired && data.pair_code && (
+            <div className="notice" style={{ marginTop: 10 }}>
+              {t("telegram.pairHint", { bot: data.bot })}{" "}
+              <a href={`https://t.me/${data.bot}?start=${data.pair_code}`} target="_blank" rel="noreferrer">
+                t.me/{data.bot}
+              </a>
+              <div style={{ marginTop: 6 }}>
+                <code className="token-value">/start {data.pair_code}</code>
+              </div>
+            </div>
+          )}
+          {data.error && <div className="notice err" style={{ marginTop: 10 }}>{data.error}</div>}
+          {data.paired && <div className="hint" style={{ marginTop: 10 }}>{t("telegram.commands")}</div>}
+        </>
+      )}
+    </div>
+  );
+}