@emaxe/tuigram 1.0.0

package/src/ui/components/inputBox.js

@@ -0,0 +1,221 @@
+import blessed from "neo-blessed";
+import { escapeBlessed } from "../../telegram/formatter.js";
+import { fg, badge } from "../theme.js";
+
+/**
+ * Создаёт компонент поля ввода сообщения (нижняя панель).
+ * @param {blessed.Widgets.Screen} screen
+ * @param {object} theme
+ * @param {object} callbacks
+ * @param {(text: string, context: { mode: string|null, target: object|null }) => void} callbacks.onSubmit
+ * @param {() => void} [callbacks.onCancelContext]
+ * @param {(command: string, args: string[]) => void} [callbacks.onSlashCommand]
+ */
+export function createInputBox(screen, theme, { onSubmit, onCancelContext, onSlashCommand } = {}) {
+    // Высота 5 = рамка (2) + контекстная плашка (1) + две строки ввода (2).
+    // При autoPadding у blessed рамка съедает по строке сверху и снизу, поэтому
+    // меньшая высота оставляет textarea нулевую высоту и вводимый текст не виден.
+    const container = blessed.box({
+        parent: screen,
+        bottom: 1,
+        left: "35%",
+        right: 0,
+        height: 5,
+        border: {
+            type: "line",
+        },
+        style: {
+            bg: theme.input.bg,
+            fg: theme.input.fg,
+            border: {
+                fg: theme.borders.fg,
+            },
+        },
+    });
+
+    // 1. Контекстная плашка (Ответ / Редактирование / Подсказка)
+    const contextBar = blessed.box({
+        parent: container,
+        top: 0,
+        left: 0,
+        right: 0,
+        height: 1,
+        tags: true,
+        style: {
+            bg: theme.input.contextBg,
+            fg: theme.input.contextFg,
+        },
+    });
+
+    // 2. Поле ввода текста
+    const textarea = blessed.textarea({
+        parent: container,
+        top: 1,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        inputOnFocus: true,
+        scrollable: true,
+        // keys: false намеренно: при keys:true blessed перехватывает Ctrl+E внутри
+        // textarea и запускает внешний $EDITOR, ломая TUI. Ввод работает через
+        // inputOnFocus, поэтому эта опция здесь не нужна.
+        keys: false,
+        mouse: true,
+        style: {
+            bg: theme.input.bg,
+            fg: theme.input.fg,
+        },
+    });
+
+    /** Подсвечивает рамку, когда ввод в фокусе — иначе непонятно, куда идут символы. */
+    function setFocusHighlight(active) {
+        container.style.border.fg = active ? theme.borders.focusFg : theme.borders.fg;
+        screen.render();
+    }
+
+    textarea.on("focus", () => setFocusHighlight(true));
+    textarea.on("blur", () => setFocusHighlight(false));
+
+    let currentMode = null; // null | "reply" | "edit"
+    let currentTarget = null; // object message
+
+    const history = [];
+    let historyIndex = -1;
+
+    function renderContext() {
+        if (currentMode === "reply" && currentTarget) {
+            const author = escapeBlessed(currentTarget.senderName || "Собеседник");
+            const preview = escapeBlessed((currentTarget.text || "").slice(0, 30));
+            contextBar.setContent(
+                badge(theme.input.replyBg, theme.input.replyFg,
+                    `{bold} ↩️ Ответ на [${author}]: "${preview}..." {/bold}[Esc: Отмена] `)
+            );
+        } else if (currentMode === "edit" && currentTarget) {
+            const preview = escapeBlessed((currentTarget.text || "").slice(0, 30));
+            contextBar.setContent(
+                badge(theme.input.editBg, theme.input.editFg,
+                    `{bold} ✏️ Редактирование #${currentTarget.id}: "${preview}..." {/bold}[Esc: Отмена] `)
+            );
+        } else {
+            const key = (label) => fg(theme.accent, label);
+            contextBar.setContent(
+                ` ${fg(theme.input.contextFg, "Введите сообщение...")}  ` +
+                `${key("[Enter]")} ${fg(theme.input.contextFg, "Отправить")}  ` +
+                `${key("[Ctrl+J]")} ${fg(theme.input.contextFg, "Новая строка")}  ` +
+                `${key("[Ctrl+R]")} ${fg(theme.input.contextFg, "Ответ")}  ` +
+                `${key("[Ctrl+E]")} ${fg(theme.input.contextFg, "Правка")}  ` +
+                `${key("[/]")} ${fg(theme.input.contextFg, "Команды")}`
+            );
+        }
+        screen.render();
+    }
+
+    textarea.key(["enter"], () => {
+        const value = textarea.getValue().trim();
+        if (!value) {
+            // Textarea уже успел дописать перевод строки в своём обработчике — убираем его.
+            textarea.setValue("");
+            screen.render();
+            return;
+        }
+
+        // Обработка слэш-команд
+        if (value.startsWith("/")) {
+            const [cmd, ...args] = value.slice(1).split(" ");
+            textarea.setValue("");
+            history.push(value);
+            historyIndex = -1;
+            onSlashCommand?.(cmd.toLowerCase(), args);
+            screen.render();
+            return;
+        }
+
+        history.push(value);
+        historyIndex = -1;
+        textarea.setValue("");
+
+        const ctx = { mode: currentMode, target: currentTarget };
+        currentMode = null;
+        currentTarget = null;
+        renderContext();
+
+        onSubmit?.(value, ctx);
+    });
+
+    // Перенос строки без отправки: Ctrl+J приходит как "linefeed" и вставляется
+    // самим textarea, поэтому отдельный обработчик не нужен (иначе будет двойной \n).
+
+    textarea.key(["escape"], () => {
+        if (currentMode) {
+            currentMode = null;
+            currentTarget = null;
+            renderContext();
+            onCancelContext?.();
+        }
+    });
+
+    textarea.key(["up"], () => {
+        if (history.length === 0) return;
+        if (historyIndex === -1) {
+            historyIndex = history.length - 1;
+        } else if (historyIndex > 0) {
+            historyIndex--;
+        }
+        textarea.setValue(history[historyIndex]);
+        screen.render();
+    });
+
+    textarea.key(["down"], () => {
+        if (historyIndex === -1) return;
+        if (historyIndex < history.length - 1) {
+            historyIndex++;
+            textarea.setValue(history[historyIndex]);
+        } else {
+            historyIndex = -1;
+            textarea.setValue("");
+        }
+        screen.render();
+    });
+
+    renderContext();
+
+    return {
+        container,
+        textarea,
+        contextBar,
+        setContext: (mode, target) => {
+            currentMode = mode;
+            currentTarget = target;
+            if (mode === "edit" && target?.text) {
+                textarea.setValue(target.text);
+            }
+            renderContext();
+            textarea.focus();
+        },
+        /**
+         * Текущий режим ввода — нужен, чтобы отправить файл ответом.
+         * @returns {{ mode: string|null, target: object|null }}
+         */
+        getContext: () => ({ mode: currentMode, target: currentTarget }),
+        clearContext: () => {
+            currentMode = null;
+            currentTarget = null;
+            renderContext();
+        },
+        clear: () => {
+            textarea.setValue("");
+            screen.render();
+        },
+        focus: () => textarea.focus(),
+        /**
+         * Завершает режим ввода, отдавая фокус предыдущей панели.
+         * Нужно вызывать перед открытием модального окна: иначе textarea по blur
+         * вызывает screen.rewindFocus() и забирает фокус обратно у модалки.
+         */
+        release: () => {
+            if (textarea._reading && typeof textarea._done === "function") {
+                textarea._done("stop");
+            }
+        },
+    };
+}

package/src/ui/components/modals/actionModal.js

@@ -0,0 +1,136 @@
+import blessed from "neo-blessed";
+import { escapeBlessed } from "../../../telegram/formatter.js";
+import { fg } from "../../theme.js";
+
+/**
+ * Создаёт модальное окно контекстных действий над сообщением.
+ * @param {blessed.Widgets.Screen} screen
+ * @param {object} theme
+ * @param {object} callbacks
+ * @param {(action: string, msg: object) => void} callbacks.onAction
+ * @returns {{ show: (msg: object) => void, hide: () => void }}
+ */
+export function createActionModal(screen, theme, { onAction } = {}) {
+    const modal = blessed.box({
+        parent: screen,
+        top: "center",
+        left: "center",
+        width: "50%",
+        height: "55%",
+        hidden: true,
+        tags: true,
+        border: {
+            type: "line",
+        },
+        shadow: true,
+        style: {
+            bg: theme.modal.bg,
+            fg: theme.modal.fg,
+            border: {
+                fg: theme.modal.borderFg,
+            },
+        },
+    });
+
+    const header = blessed.box({
+        parent: modal,
+        top: 0,
+        left: 1,
+        right: 1,
+        height: 2,
+        tags: true,
+        style: {
+            bg: theme.modal.bg,
+            fg: theme.modal.fg,
+        },
+    });
+
+    const list = blessed.list({
+        parent: modal,
+        top: 2,
+        left: 1,
+        right: 1,
+        bottom: 1,
+        tags: true,
+        keys: true,
+        vi: true,
+        mouse: true,
+        style: {
+            bg: theme.modal.bg,
+            fg: theme.modal.fg,
+            selected: {
+                bg: theme.modal.selectedBg,
+                fg: theme.modal.selectedFg,
+                bold: true,
+            },
+        },
+    });
+
+    let currentMsg = null;
+    let currentActions = [];
+    let previousFocus = null;
+
+    function hide() {
+        modal.hide();
+        if (previousFocus) {
+            previousFocus.focus();
+            previousFocus = null;
+        }
+        screen.render();
+    }
+
+    function show(msg) {
+        if (!msg) return;
+        currentMsg = msg;
+
+        const snippet = escapeBlessed((msg.text || msg.mediaDescription || "").slice(0, 35));
+        header.setContent(
+            ` {bold}Действия над сообщением #${msg.id}{/bold}\n ${fg(theme.modal.hintFg, `"${snippet}..."`)}`
+        );
+
+        currentActions = [
+            { id: "reply", label: "↩️  Ответить (Reply)" },
+        ];
+
+        if (msg.out) {
+            currentActions.push({ id: "edit", label: "✏️  Редактировать текст" });
+        }
+
+        currentActions.push(
+            { id: "delete", label: "🗑️  Удалить сообщение" },
+            { id: "react_like", label: "👍  Поставить реакцию 👍" },
+            { id: "react_fire", label: "🔥  Поставить реакцию 🔥" },
+            { id: "react_heart", label: "❤️  Поставить реакцию ❤️" }
+        );
+
+        if (msg.media) {
+            currentActions.push({ id: "download", label: "📥  Скачать медиа-вложение" });
+        }
+
+        currentActions.push({ id: "copy", label: "📋  Скопировать текст в ввод" });
+
+        list.setItems(currentActions.map((a) => a.label));
+        previousFocus = screen.focused;
+        modal.show();
+        modal.setFront();
+        list.focus();
+        screen.render();
+    }
+
+    list.on("select", (item, index) => {
+        const action = currentActions[index];
+        if (action && currentMsg) {
+            hide();
+            onAction?.(action.id, currentMsg);
+        }
+    });
+
+    // Фокус получает список — на нём и живут клавиши закрытия.
+    list.key(["escape", "q"], hide);
+
+    return {
+        modal,
+        show,
+        hide,
+    };
+}

package/src/ui/components/modals/chatInfoModal.js

@@ -0,0 +1,125 @@
+import blessed from "neo-blessed";
+import { escapeBlessed } from "../../../telegram/formatter.js";
+import { idToString } from "../../../telegram/entities.js";
+import { fg } from "../../theme.js";
+
+/**
+ * Создаёт модальное окно информации о текущем чате.
+ * @param {blessed.Widgets.Screen} screen
+ * @param {object} theme
+ * @returns {{ show: (chat: object) => void, hide: () => void }}
+ */
+export function createChatInfoModal(screen, theme) {
+    const modal = blessed.box({
+        parent: screen,
+        top: "center",
+        left: "center",
+        width: "60%",
+        height: "60%",
+        hidden: true,
+        tags: true,
+        border: {
+            type: "line",
+        },
+        shadow: true,
+        style: {
+            bg: theme.modal.bg,
+            fg: theme.modal.fg,
+            border: {
+                fg: theme.modal.borderFg,
+            },
+        },
+    });
+
+    const infoText = blessed.box({
+        parent: modal,
+        top: 1,
+        left: 2,
+        right: 2,
+        bottom: 3,
+        tags: true,
+        scrollable: true,
+        style: {
+            bg: theme.modal.bg,
+            fg: theme.modal.fg,
+        },
+    });
+
+    const closeBtn = blessed.button({
+        parent: modal,
+        bottom: 1,
+        left: "center",
+        width: 16,
+        height: 1,
+        mouse: true,
+        content: " [ Закрыть ] ",
+        align: "center",
+        tags: true,
+        style: {
+            bg: theme.accent,
+            fg: theme.onAccent,
+            focus: {
+                bg: theme.modal.buttonFocusBg,
+                fg: theme.modal.buttonFocusFg,
+                bold: true,
+            },
+        },
+    });
+
+    let previousFocus = null;
+
+    function hide() {
+        modal.hide();
+        if (previousFocus) {
+            previousFocus.focus();
+            previousFocus = null;
+        }
+        screen.render();
+    }
+
+    function show(chat) {
+        if (!chat) return;
+
+        const entity = chat.entity || {};
+        const title = escapeBlessed(chat.title || "Без названия");
+        const id = escapeBlessed(idToString(chat.id));
+        const username = chat.username ? `@${escapeBlessed(chat.username)}` : "—";
+        const type = escapeBlessed(chat.type || "unknown");
+        const participants = entity.participantsCount ? `${entity.participantsCount}` : "Неизвестно";
+        const isMuted = chat.isMuted
+            ? fg(theme.warning, "Выключены")
+            : fg(theme.success, "Включены");
+        const about = escapeBlessed(entity.about || "Нет описания");
+
+        const body = `
+ {bold}{underline}ℹ Информация о чате{/underline}{/bold}
+
+ {bold}Название:{/bold}        ${title}
+ {bold}Тип:{/bold}             ${type}
+ {bold}ID:{/bold}              ${id}
+ {bold}Username:{/bold}        ${username}
+ {bold}Участников:{/bold}      ${participants}
+ {bold}Уведомления:{/bold}     ${isMuted}
+
+ {bold}О чате / О себе:{/bold}
+   ${about}
+`;
+
+        infoText.setContent(body);
+        previousFocus = screen.focused;
+        modal.show();
+        modal.setFront();
+        closeBtn.focus();
+        screen.render();
+    }
+
+    closeBtn.on("press", hide);
+    // Клавиши вешаем на кнопку: blessed отдаёт события только сфокусированному элементу.
+    closeBtn.key(["escape", "q"], hide);
+
+    return {
+        modal,
+        show,
+        hide,
+    };
+}

package/src/ui/components/modals/confirmModal.js

@@ -0,0 +1,141 @@
+import blessed from "neo-blessed";
+import { fg } from "../../theme.js";
+
+/**
+ * Создаёт модальное окно подтверждения действия (Да / Нет).
+ *
+ * Важно: blessed рассылает клавиши только СФОКУСИРОВАННОМУ элементу, поэтому
+ * обработчики висят на самих кнопках, а не на контейнере модалки.
+ * @param {blessed.Widgets.Screen} screen
+ * @param {object} theme
+ * @returns {{ ask: (message: string, onConfirm: () => void) => void, hide: () => void }}
+ */
+export function createConfirmModal(screen, theme) {
+    const modal = blessed.box({
+        parent: screen,
+        top: "center",
+        left: "center",
+        width: "50%",
+        height: 8,
+        hidden: true,
+        tags: true,
+        border: {
+            type: "line",
+        },
+        shadow: true,
+        style: {
+            bg: theme.modal.bg,
+            fg: theme.modal.fg,
+            border: {
+                fg: theme.warning,
+            },
+        },
+    });
+
+    const msgBox = blessed.box({
+        parent: modal,
+        top: 1,
+        left: 2,
+        right: 2,
+        height: 2,
+        align: "center",
+        tags: true,
+        style: {
+            bg: theme.modal.bg,
+            fg: theme.modal.fg,
+        },
+    });
+
+    const hint = blessed.box({
+        parent: modal,
+        bottom: 0,
+        left: 2,
+        right: 2,
+        height: 1,
+        align: "center",
+        tags: true,
+        content: fg(theme.modal.hintFg, "[←/→ или Tab] Выбор  [Enter] Подтвердить  [Y] Да  [N/Esc] Нет"),
+        style: {
+            bg: theme.modal.bg,
+            fg: theme.modal.fg,
+        },
+    });
+
+    const yesBtn = blessed.button({
+        parent: modal,
+        bottom: 2,
+        left: 6,
+        width: 12,
+        height: 1,
+        mouse: true,
+        content: " [ Да ] ",
+        align: "center",
+        style: {
+            bg: theme.modal.dangerBg,
+            fg: theme.modal.dangerFg,
+            focus: { bg: theme.modal.buttonFocusBg, fg: theme.modal.buttonFocusFg, bold: true },
+        },
+    });
+
+    const noBtn = blessed.button({
+        parent: modal,
+        bottom: 2,
+        right: 6,
+        width: 12,
+        height: 1,
+        mouse: true,
+        content: " [ Нет ] ",
+        align: "center",
+        style: {
+            bg: theme.modal.neutralBg,
+            fg: theme.modal.neutralFg,
+            focus: { bg: theme.modal.buttonFocusBg, fg: theme.modal.buttonFocusFg, bold: true },
+        },
+    });
+
+    let currentCallback = null;
+    let previousFocus = null;
+
+    function hide() {
+        modal.hide();
+        currentCallback = null;
+        if (previousFocus) {
+            previousFocus.focus();
+            previousFocus = null;
+        }
+        screen.render();
+    }
+
+    function confirm() {
+        const cb = currentCallback;
+        hide();
+        cb?.();
+    }
+
+    yesBtn.on("press", confirm);
+    noBtn.on("press", hide);
+
+    // Клавиши вешаем на обе кнопки — активна всегда одна из них.
+    for (const btn of [yesBtn, noBtn]) {
+        btn.key(["escape", "n"], hide);
+        btn.key(["y"], confirm);
+        btn.key(["left", "right", "tab", "S-tab", "h", "l"], () => {
+            (screen.focused === yesBtn ? noBtn : yesBtn).focus();
+            screen.render();
+        });
+    }
+
+    return {
+        modal,
+        ask: (text, onConfirm) => {
+            currentCallback = onConfirm;
+            previousFocus = screen.focused;
+            msgBox.setContent(`{bold}${text}{/bold}`);
+            modal.show();
+            modal.setFront();
+            noBtn.focus();
+            screen.render();
+        },
+        hide,
+    };
+}