@emaxe/tuigram 1.1.0 → 1.3.0

package/src/ui/components/chatList.js

@@ -4,6 +4,8 @@ import { escapeBlessed } from "../../telegram/formatter.js";
 import { fg, badge } from "../theme.js";
 import unicode from "neo-blessed/lib/unicode.js";
 
+import { getTabByCoordinate } from "../../utils/mouse.js";
+
 /**
  * Создаёт компонент списка диалогов (левая панель).
  * @param {blessed.Widgets.Screen} screen
@@ -20,6 +22,7 @@ export function createChatList(screen, theme, { onSelectDialog, onTabChange, onS
         left: 0,
         width: "35%",
         bottom: 1,
+        mouse: true,
         border: {
             type: "line",
         },
@@ -40,6 +43,8 @@ export function createChatList(screen, theme, { onSelectDialog, onTabChange, onS
         right: 0,
         height: 1,
         tags: true,
+        mouse: true,
+        clickable: true,
         style: {
             bg: theme.tabs.bg,
             fg: theme.tabs.fg,
@@ -64,6 +69,17 @@ export function createChatList(screen, theme, { onSelectDialog, onTabChange, onS
         tabsBox.setContent(rendered);
     }
 
+    tabsBox.on("click", (data) => {
+        const relX = data.x - (tabsBox.aleft || 0);
+        const tabKey = getTabByCoordinate(relX, TAB_KEYS, TAB_NAMES);
+        if (tabKey) {
+            currentTab = tabKey;
+            renderTabs();
+            onTabChange?.(currentTab);
+            screen.render();
+        }
+    });
+
     // 2. Строка поиска / фильтра
     const searchBox = blessed.textbox({
         parent: container,
@@ -72,6 +88,7 @@ export function createChatList(screen, theme, { onSelectDialog, onTabChange, onS
         right: 0,
         height: 1,
         inputOnFocus: true,
+        mouse: true,
         style: {
             bg: theme.search.bg,
             fg: theme.search.fg,
@@ -80,6 +97,14 @@ export function createChatList(screen, theme, { onSelectDialog, onTabChange, onS
     const SEARCH_PLACEHOLDER = "[/] Поиск чатов...";
     searchBox.setValue(SEARCH_PLACEHOLDER);
 
+    searchBox.on("click", () => {
+        if (searchBox.getValue() === SEARCH_PLACEHOLDER) {
+            searchBox.setValue("");
+        }
+        searchBox.focus();
+        screen.render();
+    });
+
     // 3. Список диалогов
     const list = blessed.list({
         parent: container,
@@ -118,13 +143,31 @@ export function createChatList(screen, theme, { onSelectDialog, onTabChange, onS
     // не влезающий хвост на вторую строку, которой в элементе высотой 1 просто
     // нет: хвост исчезал, а начатый перед разрывом фон бейджа непрочитанных
     // оставался залитым до края панели. С wrap: false лишнее просто обрезается.
+    // По клику мыши сразу выбираем и открываем диалог.
     const baseCreateItem = list.createItem.bind(list);
     list.createItem = (content) => {
         const item = baseCreateItem(content);
         item.wrap = false;
+        item.on("click", () => {
+            const index = list.getItemIndex(item);
+            if (index !== -1 && currentDialogs[index]) {
+                list.select(index);
+                onSelectDialog?.(currentDialogs[index]);
+            }
+        });
         return item;
     };
 
+    container.on("wheelup", () => {
+        list.select(list.selected - 2);
+        screen.render();
+    });
+
+    container.on("wheeldown", () => {
+        list.select(list.selected + 2);
+        screen.render();
+    });
+
     let currentDialogs = [];
 
     /**
@@ -275,6 +318,25 @@ export function createChatList(screen, theme, { onSelectDialog, onTabChange, onS
 
     renderTabs();
 
+    /** Подсвечивает рамку, когда список диалогов или строка поиска в фокусе. */
+    function setFocusHighlight(active) {
+        container.style.border.fg = active ? theme.borders.focusFg : theme.borders.fg;
+        screen.render();
+    }
+
+    list.on("focus", () => setFocusHighlight(true));
+    list.on("blur", (newTarget) => {
+        if (newTarget !== searchBox && screen.focused !== searchBox) {
+            setFocusHighlight(false);
+        }
+    });
+    searchBox.on("focus", () => setFocusHighlight(true));
+    searchBox.on("blur", (newTarget) => {
+        if (newTarget !== list && screen.focused !== list) {
+            setFocusHighlight(false);
+        }
+    });
+
     return {
         container,
         list,

package/src/ui/components/chatView.js

@@ -3,6 +3,8 @@ import { formatMessageTime, formatDateDivider } from "../../utils/time.js";
 import { formatMessageText, escapeBlessed } from "../../telegram/formatter.js";
 import { fg } from "../theme.js";
 
+import { getMessageAtLine } from "../../utils/mouse.js";
+
 /**
  * Создаёт компонент просмотра сообщений чата (правая центральная панель).
  * @param {blessed.Widgets.Screen} screen
@@ -18,6 +20,7 @@ export function createChatView(screen, theme, { onLoadMoreHistory, onActionMenu
         left: "35%",
         right: 0,
         bottom: 6,
+        mouse: true,
         border: {
             type: "line",
         },
@@ -38,7 +41,6 @@ export function createChatView(screen, theme, { onLoadMoreHistory, onActionMenu
         bottom: 0,
         tags: true,
         scrollable: true,
-        alwaysScroll: true,
         mouse: true,
         keys: true,
         vi: true,
@@ -55,26 +57,43 @@ export function createChatView(screen, theme, { onLoadMoreHistory, onActionMenu
         },
     });
 
+    /** Подсвечивает рамку, когда лента сообщений в фокусе. */
+    function setFocusHighlight(active) {
+        container.style.border.fg = active ? theme.borders.focusFg : theme.borders.fg;
+        screen.render();
+    }
+
+    scrollBox.on("focus", () => setFocusHighlight(true));
+    scrollBox.on("blur", () => setFocusHighlight(false));
+
     let currentMessages = [];
+    let currentRanges = [];
 
     /**
-     * Форматирует список сообщений в единую ленту текста с разметкой Blessed.
+     * Форматирует список сообщений в единую ленту текста с разметкой Blessed
+     * и вычисляет координаты строк каждого сообщения для кликов мыши.
      * @param {Array<object>} messages
-     * @returns {string}
+     * @returns {{ text: string, ranges: Array<{ message: object, startLine: number, endLine: number }> }}
      */
-    function renderMessages(messages) {
+    function renderMessagesWithRanges(messages) {
         if (!messages || messages.length === 0) {
-            return `\n\n  ${fg(theme.muted, "Сообщений пока нет. Напишите первое сообщение ниже!")}`;
+            return {
+                text: `\n\n  ${fg(theme.muted, "Сообщений пока нет. Напишите первое сообщение ниже!")}`,
+                ranges: [],
+            };
         }
 
         let output = "";
         let lastDateString = "";
+        const ranges = [];
+        let lineCursor = 0;
 
         for (const msg of messages) {
             // Разделитель дат
             const dateStr = formatDateDivider(msg.date);
             if (dateStr && dateStr !== lastDateString) {
                 output += `\n  ${fg(theme.chatView.dateDivider, `─────── ${escapeBlessed(dateStr)} ───────`)}\n\n`;
+                lineCursor += 3;
                 lastDateString = dateStr;
             }
 
@@ -93,14 +112,27 @@ export function createChatView(screen, theme, { onLoadMoreHistory, onActionMenu
 
             // Блок ответа (Reply)
             let replyBlock = "";
+            let replyLines = 0;
             if (msg.replyToMsgId) {
                 replyBlock = `  ${fg(theme.chatView.replyBorder, `┌─ Ответ на сообщение #${msg.replyToMsgId}`)}\n`;
+                replyLines = 1;
             }
 
             // Текст сообщения и entities
             let bodyText = formatMessageText(msg.text, msg.entities);
-            if (msg.mediaDescription) {
-                bodyText = bodyText ? `${msg.mediaDescription}\n  ${bodyText}` : msg.mediaDescription;
+
+            // Блок медиа-вложения и превью изображения
+            let mediaBlock = "";
+            if (msg.imagePreview) {
+                mediaBlock = msg.mediaDescription
+                    ? `${msg.mediaDescription}\n${msg.imagePreview}`
+                    : msg.imagePreview;
+            } else if (msg.mediaDescription) {
+                mediaBlock = msg.mediaDescription;
+            }
+
+            if (mediaBlock) {
+                bodyText = bodyText ? `${mediaBlock}\n${bodyText}` : mediaBlock;
             }
 
             // Отступ строк текста сообщения
@@ -108,12 +140,15 @@ export function createChatView(screen, theme, { onLoadMoreHistory, onActionMenu
                 .split("\n")
                 .map((line) => `  ${line}`)
                 .join("\n");
+            const bodyLinesCount = indentedBody.split("\n").length;
 
             // Реакции
             let reactionsLine = "";
+            let reactionLinesCount = 0;
             if (msg.reactions && msg.reactions.length > 0) {
                 const list = msg.reactions.map((r) => `${r.emoticon} ${r.count}`).join("  ");
                 reactionsLine = `\n  ${fg(theme.chatView.reactionFg, `{bold}${list}{/bold}`)}`;
+                reactionLinesCount = 1;
             }
 
             // Метка редактирования
@@ -122,10 +157,17 @@ export function createChatView(screen, theme, { onLoadMoreHistory, onActionMenu
                 editedTag = ` ${fg(theme.chatView.time, "(изменено)")}`;
             }
 
+            const startLine = lineCursor;
+            const totalMsgLines = 1 + replyLines + bodyLinesCount + reactionLinesCount;
+            const endLine = startLine + totalMsgLines - 1;
+
+            ranges.push({ message: msg, startLine, endLine });
+            lineCursor += totalMsgLines + 2;
+
             output += ` ${authorTag}${editedTag}\n${replyBlock}${indentedBody}${reactionsLine}\n\n`;
         }
 
-        return output;
+        return { text: output, ranges };
     }
 
     /**
@@ -135,25 +177,84 @@ export function createChatView(screen, theme, { onLoadMoreHistory, onActionMenu
      */
     function setMessages(messages, autoScrollToBottom = true) {
         currentMessages = messages;
-        scrollBox.setContent(renderMessages(messages));
+        const prevScroll = scrollBox.getScroll();
+        const prevHeight = scrollBox.getScrollHeight();
+
+        const rendered = renderMessagesWithRanges(messages);
+        currentRanges = rendered.ranges;
+        scrollBox.setContent(rendered.text);
+
         if (autoScrollToBottom) {
             scrollBox.setScrollPerc(100);
+        } else {
+            // Сохраняем относительную позицию скролла: если добавились старые сообщения сверху,
+            // компенсируем сдвиг высоты ленты
+            const newHeight = scrollBox.getScrollHeight();
+            const addedLines = newHeight - prevHeight;
+            if (addedLines > 0 && prevScroll > 0) {
+                scrollBox.scrollTo(prevScroll + addedLines);
+            } else if (prevScroll > 0) {
+                scrollBox.scrollTo(prevScroll);
+            }
         }
         screen.render();
     }
 
     // Обработка прокрутки вверх для подгрузки истории
-    scrollBox.key(["pageup", "C-u"], () => {
-        scrollBox.scroll(-10);
+    function handleScrollUp(step = 10) {
+        scrollBox.scroll(-step);
         if (scrollBox.getScroll() <= 0) {
             onLoadMoreHistory?.();
         }
         screen.render();
-    });
+    }
 
-    scrollBox.key(["pagedown", "C-d"], () => {
-        scrollBox.scroll(10);
+    function handleScrollDown(step = 10) {
+        scrollBox.scroll(step);
         screen.render();
+    }
+
+    scrollBox.key(["pageup", "C-u"], () => handleScrollUp(10));
+    scrollBox.key(["pagedown", "C-d"], () => handleScrollDown(10));
+    scrollBox.key(["up", "k"], () => handleScrollUp(2));
+    scrollBox.key(["down", "j"], () => handleScrollDown(2));
+    scrollBox.key(["home"], () => {
+        scrollBox.scrollTo(0);
+        onLoadMoreHistory?.();
+        screen.render();
+    });
+    scrollBox.key(["end"], () => {
+        scrollBox.setScrollPerc(100);
+        screen.render();
+    });
+
+    scrollBox.on("wheelup", () => {
+        handleScrollUp(3);
+    });
+
+    scrollBox.on("wheeldown", () => {
+        handleScrollDown(3);
+    });
+
+    container.on("wheelup", () => {
+        handleScrollUp(3);
+    });
+
+    container.on("wheeldown", () => {
+        handleScrollDown(3);
+    });
+
+    scrollBox.on("click", (data) => {
+        const clickY = data.y;
+        const itop = scrollBox.itop || 0;
+        const lineIndex = clickY - (scrollBox.atop || 0) + scrollBox.getScroll() - itop;
+        const clickedMsg = getMessageAtLine(lineIndex, currentRanges);
+        if (clickedMsg) {
+            onActionMenu?.(clickedMsg);
+        } else {
+            scrollBox.focus();
+            screen.render();
+        }
     });
 
     // Ctrl+M терминал шлёт как "\r" (имя клавиши "return"), поэтому меню действий
@@ -169,6 +270,7 @@ export function createChatView(screen, theme, { onLoadMoreHistory, onActionMenu
         container,
         scrollBox,
         setMessages,
+        loadMore: () => onLoadMoreHistory?.(),
         scrollToBottom: () => {
             scrollBox.setScrollPerc(100);
             screen.render();

package/src/ui/components/header.js

@@ -2,13 +2,21 @@ import blessed from "neo-blessed";
 import { escapeBlessed } from "../../telegram/formatter.js";
 import { fg } from "../theme.js";
 
+import { getHeaderActionAt } from "../../utils/mouse.js";
+
 /**
  * Верхняя шапка приложения с информацией о пользователе, активном чате и статусе соединения.
  * @param {blessed.Widgets.Screen} screen
  * @param {object} theme
+ * @param {object} [callbacks]
+ * @param {() => void} [callbacks.onHelp]
+ * @param {() => void} [callbacks.onChatInfo]
+ * @param {() => void} [callbacks.onStatusClick]
  * @returns {blessed.Widgets.BoxElement & { updateInfo: (data: object) => void }}
  */
-export function createHeader(screen, theme) {
+export function createHeader(screen, theme, { onHelp, onChatInfo, onStatusClick } = {}) {
+    let currentActiveChat = null;
+
     const headerBox = blessed.box({
         parent: screen,
         top: 0,
@@ -17,6 +25,7 @@ export function createHeader(screen, theme) {
         // 4 = рамка (2) + две строки контента (профиль + активный чат)
         height: 4,
         tags: true,
+        mouse: true,
         border: {
             type: "line",
         },
@@ -29,6 +38,19 @@ export function createHeader(screen, theme) {
         },
     });
 
+    headerBox.on("click", (data) => {
+        const relX = data.x - (headerBox.aleft || 0);
+        const relY = data.y - (headerBox.atop || 0);
+        const action = getHeaderActionAt(relX, relY, { hasActiveChat: Boolean(currentActiveChat) });
+        if (action === "help") {
+            onHelp?.();
+        } else if (action === "info") {
+            onChatInfo?.();
+        } else if (action === "status") {
+            onStatusClick?.();
+        }
+    });
+
     /**
      * Обновляет содержимое шапки.
      * @param {object} data
@@ -38,6 +60,7 @@ export function createHeader(screen, theme) {
      * @param {string|null} [data.typingUser]
      */
     headerBox.updateInfo = function ({ me, status = "connected", activeChat, typingUser }) {
+        currentActiveChat = activeChat;
         let statusBadge = fg(theme.status.online, "● В сети");
         if (status === "connecting") {
             statusBadge = fg(theme.status.connecting, "◌ Подключение...");

package/src/ui/components/inputBox.js

@@ -2,6 +2,8 @@ import blessed from "neo-blessed";
 import { escapeBlessed } from "../../telegram/formatter.js";
 import { fg, badge } from "../theme.js";
 
+import { getInputContextActionAt } from "../../utils/mouse.js";
+
 /**
  * Создаёт компонент поля ввода сообщения (нижняя панель).
  * @param {blessed.Widgets.Screen} screen
@@ -10,8 +12,16 @@ import { fg, badge } from "../theme.js";
  * @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]
+ * @param {() => void} [callbacks.onReplyLast]
+ * @param {() => void} [callbacks.onEditLast]
  */
-export function createInputBox(screen, theme, { onSubmit, onCancelContext, onSlashCommand } = {}) {
+export function createInputBox(screen, theme, {
+    onSubmit,
+    onCancelContext,
+    onSlashCommand,
+    onReplyLast,
+    onEditLast,
+} = {}) {
     // Высота 5 = рамка (2) + контекстная плашка (1) + две строки ввода (2).
     // При autoPadding у blessed рамка съедает по строке сверху и снизу, поэтому
     // меньшая высота оставляет textarea нулевую высоту и вводимый текст не виден.
@@ -21,6 +31,7 @@ export function createInputBox(screen, theme, { onSubmit, onCancelContext, onSla
         left: "35%",
         right: 0,
         height: 5,
+        mouse: true,
         border: {
             type: "line",
         },
@@ -41,6 +52,8 @@ export function createInputBox(screen, theme, { onSubmit, onCancelContext, onSla
         right: 0,
         height: 1,
         tags: true,
+        mouse: true,
+        clickable: true,
         style: {
             bg: theme.input.contextBg,
             fg: theme.input.contextFg,
@@ -110,6 +123,32 @@ export function createInputBox(screen, theme, { onSubmit, onCancelContext, onSla
         screen.render();
     }
 
+    contextBar.on("click", (data) => {
+        const relX = data.x - (contextBar.aleft || 0);
+        const action = getInputContextActionAt(relX, currentMode);
+        if (action === "cancel") {
+            if (currentMode) {
+                currentMode = null;
+                currentTarget = null;
+                renderContext();
+                onCancelContext?.();
+            }
+        } else if (action === "reply") {
+            onReplyLast?.();
+        } else if (action === "edit") {
+            onEditLast?.();
+        } else if (action === "commands") {
+            textarea.setValue("/");
+            textarea.focus();
+            screen.render();
+        }
+    });
+
+    textarea.on("click", () => {
+        textarea.focus();
+        screen.render();
+    });
+
     textarea.key(["enter"], () => {
         const value = textarea.getValue().trim();
         if (!value) {

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

@@ -2,6 +2,8 @@ import blessed from "neo-blessed";
 import { escapeBlessed } from "../../../telegram/formatter.js";
 import { fg } from "../../theme.js";
 
+import { isInsideBox } from "../../../utils/mouse.js";
+
 /**
  * Создаёт модальное окно контекстных действий над сообщением.
  * @param {blessed.Widgets.Screen} screen
@@ -19,6 +21,7 @@ export function createActionModal(screen, theme, { onAction } = {}) {
         height: "55%",
         hidden: true,
         tags: true,
+        mouse: true,
         border: {
             type: "line",
         },
@@ -66,6 +69,20 @@ export function createActionModal(screen, theme, { onAction } = {}) {
         },
     });
 
+    const baseCreateItem = list.createItem.bind(list);
+    list.createItem = (content) => {
+        const item = baseCreateItem(content);
+        item.on("click", () => {
+            const index = list.getItemIndex(item);
+            const action = currentActions[index];
+            if (action && currentMsg) {
+                hide();
+                onAction?.(action.id, currentMsg);
+            }
+        });
+        return item;
+    };
+
     let currentMsg = null;
     let currentActions = [];
     let previousFocus = null;
@@ -128,6 +145,20 @@ export function createActionModal(screen, theme, { onAction } = {}) {
     // Фокус получает список — на нём и живут клавиши закрытия.
     list.key(["escape", "q"], hide);
 
+    // Закрытие при клике мышью мимо модального окна
+    screen.on("click", (data) => {
+        if (!modal.visible) return;
+        const inside = isInsideBox(data.x, data.y, {
+            left: modal.aleft,
+            top: modal.atop,
+            width: modal.width,
+            height: modal.height,
+        });
+        if (!inside) {
+            hide();
+        }
+    });
+
     return {
         modal,
         show,

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

@@ -3,6 +3,8 @@ import { escapeBlessed } from "../../../telegram/formatter.js";
 import { idToString } from "../../../telegram/entities.js";
 import { fg } from "../../theme.js";
 
+import { isInsideBox } from "../../../utils/mouse.js";
+
 /**
  * Создаёт модальное окно информации о текущем чате.
  * @param {blessed.Widgets.Screen} screen
@@ -18,6 +20,7 @@ export function createChatInfoModal(screen, theme) {
         height: "60%",
         hidden: true,
         tags: true,
+        mouse: true,
         border: {
             type: "line",
         },
@@ -38,6 +41,7 @@ export function createChatInfoModal(screen, theme) {
         right: 2,
         bottom: 3,
         tags: true,
+        mouse: true,
         scrollable: true,
         style: {
             bg: theme.modal.bg,
@@ -114,9 +118,24 @@ export function createChatInfoModal(screen, theme) {
     }
 
     closeBtn.on("press", hide);
+    closeBtn.on("click", hide);
     // Клавиши вешаем на кнопку: blessed отдаёт события только сфокусированному элементу.
     closeBtn.key(["escape", "q"], hide);
 
+    // Закрытие при клике мышью мимо модального окна
+    screen.on("click", (data) => {
+        if (!modal.visible) return;
+        const inside = isInsideBox(data.x, data.y, {
+            left: modal.aleft,
+            top: modal.atop,
+            width: modal.width,
+            height: modal.height,
+        });
+        if (!inside) {
+            hide();
+        }
+    });
+
     return {
         modal,
         show,

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

@@ -1,5 +1,6 @@
 import blessed from "neo-blessed";
 import { fg } from "../../theme.js";
+import { isInsideBox } from "../../../utils/mouse.js";
 
 /**
  * Создаёт модальное окно подтверждения действия (Да / Нет).
@@ -19,6 +20,7 @@ export function createConfirmModal(screen, theme) {
         height: 8,
         hidden: true,
         tags: true,
+        mouse: true,
         border: {
             type: "line",
         },
@@ -113,7 +115,9 @@ export function createConfirmModal(screen, theme) {
     }
 
     yesBtn.on("press", confirm);
+    yesBtn.on("click", confirm);
     noBtn.on("press", hide);
+    noBtn.on("click", hide);
 
     // Клавиши вешаем на обе кнопки — активна всегда одна из них.
     for (const btn of [yesBtn, noBtn]) {
@@ -125,6 +129,20 @@ export function createConfirmModal(screen, theme) {
         });
     }
 
+    // Закрытие при клике мышью мимо модального окна
+    screen.on("click", (data) => {
+        if (!modal.visible) return;
+        const inside = isInsideBox(data.x, data.y, {
+            left: modal.aleft,
+            top: modal.atop,
+            width: modal.width,
+            height: modal.height,
+        });
+        if (!inside) {
+            hide();
+        }
+    });
+
     return {
         modal,
         ask: (text, onConfirm) => {