@emaxe/tuigram 1.2.0 → 1.4.0

package/src/ui/components/chatView.js

@@ -3,21 +3,36 @@ import { formatMessageTime, formatDateDivider } from "../../utils/time.js";
 import { formatMessageText, escapeBlessed } from "../../telegram/formatter.js";
 import { fg } from "../theme.js";
 
+import { getMessagePartAtPoint, isRightClick, stringCellWidth } from "../../utils/mouse.js";
+
+/** Отступ тела сообщения от левого края ленты, в ячейках. */
+const BODY_INDENT = 2;
+
 /**
  * Создаёт компонент просмотра сообщений чата (правая центральная панель).
  * @param {blessed.Widgets.Screen} screen
  * @param {object} theme
  * @param {object} callbacks
  * @param {() => void} [callbacks.onLoadMoreHistory]
- * @param {(msg: object) => void} [callbacks.onActionMenu]
+ * @param {(msg: object) => void} [callbacks.onActionMenu] правый клик / Enter / Ctrl+A
+ * @param {(msg: object) => void} [callbacks.onSelectMessage] сообщение выделено
+ * @param {(msg: object) => void} [callbacks.onOpenImage] клик по превью изображения
+ * @param {() => void} [callbacks.onFocusRequest] вызывается перед взятием фокуса мышью
  */
-export function createChatView(screen, theme, { onLoadMoreHistory, onActionMenu } = {}) {
+export function createChatView(screen, theme, {
+    onLoadMoreHistory,
+    onActionMenu,
+    onSelectMessage,
+    onOpenImage,
+    onFocusRequest,
+} = {}) {
     const container = blessed.box({
         parent: screen,
         top: 4,
         left: "35%",
         right: 0,
         bottom: 6,
+        mouse: true,
         border: {
             type: "line",
         },
@@ -38,9 +53,13 @@ export function createChatView(screen, theme, { onLoadMoreHistory, onActionMenu
         bottom: 0,
         tags: true,
         scrollable: true,
+        // alwaysScroll обязателен: без него blessed копит смещение в childOffset,
+        // не двигая содержимое (первые щелчки колеса «проглатываются»), а getScroll()
+        // перестаёт совпадать с реальным сдвигом ленты — клики попадали не в то сообщение.
+        alwaysScroll: true,
         mouse: true,
-        keys: true,
-        vi: true,
+        // keys/vi намеренно выключены: их встроенные обработчики скроллят ленту на
+        // стрелках, а стрелки здесь двигают выделение. Все клавиши навешаны явно ниже.
         scrollbar: {
             ch: "│",
             style: {
@@ -54,26 +73,49 @@ export function createChatView(screen, theme, { onLoadMoreHistory, onActionMenu
         },
     });
 
+    // blessed сам вешает на scrollable-box с mouse:true прокрутку колесом на пол-экрана.
+    // Вместе с нашими обработчиками получалось height/2 + 3 строки за щелчок.
+    scrollBox.removeAllListeners("wheelup");
+    scrollBox.removeAllListeners("wheeldown");
+
+    /** Подсвечивает рамку, когда лента сообщений в фокусе. */
+    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 = [];
+    let selectedId = null;
 
     /**
-     * Форматирует список сообщений в единую ленту текста с разметкой Blessed.
+     * Форматирует список сообщений в единую ленту текста с разметкой Blessed
+     * и вычисляет координаты строк каждого сообщения для кликов мыши.
      * @param {Array<object>} messages
-     * @returns {string}
+     * @returns {{ text: string, ranges: Array<object> }}
      */
-    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;
             }
 
@@ -90,10 +132,14 @@ export function createChatView(screen, theme, { onLoadMoreHistory, onActionMenu
                 authorTag = `${fg(theme.chatView.incomingName, `{bold}${name}{/bold}`)} ${timeTag}`;
             }
 
+            // Метка редактирования
+            const editedTag = msg.editDate ? ` ${fg(theme.chatView.time, "(изменено)")}` : "";
+
+            const lines = [` ${authorTag}${editedTag}`];
+
             // Блок ответа (Reply)
-            let replyBlock = "";
             if (msg.replyToMsgId) {
-                replyBlock = `  ${fg(theme.chatView.replyBorder, `┌─ Ответ на сообщение #${msg.replyToMsgId}`)}\n`;
+                lines.push(`  ${fg(theme.chatView.replyBorder, `┌─ Ответ на сообщение #${msg.replyToMsgId}`)}`);
             }
 
             // Текст сообщения и entities
@@ -113,29 +159,65 @@ export function createChatView(screen, theme, { onLoadMoreHistory, onActionMenu
                 bodyText = bodyText ? `${mediaBlock}\n${bodyText}` : mediaBlock;
             }
 
-            // Отступ строк текста сообщения
-            const indentedBody = bodyText
-                .split("\n")
-                .map((line) => `  ${line}`)
-                .join("\n");
+            // Строка, с которой начинается тело — нужна для координат превью
+            const bodyStartOffset = lines.length;
+            for (const line of bodyText.split("\n")) {
+                lines.push(`  ${line}`);
+            }
 
             // Реакции
-            let reactionsLine = "";
             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}`)}`;
+                lines.push(`  ${fg(theme.chatView.reactionFg, `{bold}${list}{/bold}`)}`);
             }
 
-            // Метка редактирования
-            let editedTag = "";
-            if (msg.editDate) {
-                editedTag = ` ${fg(theme.chatView.time, "(изменено)")}`;
+            const startLine = lineCursor;
+
+            // Прямоугольник превью изображения внутри сообщения
+            let image = null;
+            if (msg.imagePreview) {
+                const descLines = msg.mediaDescription ? msg.mediaDescription.split("\n").length : 0;
+                const previewLines = msg.imagePreview.split("\n");
+                const imageStart = startLine + bodyStartOffset + descLines;
+                const width = previewLines.reduce((max, line) => Math.max(max, stringCellWidth(line)), 0);
+                image = {
+                    startLine: imageStart,
+                    endLine: imageStart + previewLines.length - 1,
+                    left: BODY_INDENT,
+                    right: BODY_INDENT + width,
+                };
             }
 
-            output += ` ${authorTag}${editedTag}\n${replyBlock}${indentedBody}${reactionsLine}\n\n`;
+            // Выделенное сообщение помечается полосой в первой колонке. Первая колонка
+            // каждой строки — пробел отступа, поэтому ширина строк не меняется и карта
+            // координат остаётся верной.
+            const rendered = msg.id === selectedId
+                ? lines.map((line) => `${fg(theme.accent, "▌")}${line.slice(1)}`)
+                : lines;
+
+            ranges.push({
+                message: msg,
+                startLine,
+                endLine: startLine + lines.length - 1,
+                image,
+            });
+
+            // lines.length строк + одна пустая строка-разделитель между сообщениями
+            lineCursor += lines.length + 1;
+            output += `${rendered.join("\n")}\n\n`;
         }
 
-        return output;
+        return { text: output, ranges };
+    }
+
+    /** Перерисовывает ленту, сохраняя позицию прокрутки (например, после смены выделения). */
+    function redraw() {
+        const prevBase = scrollBox.childBase || 0;
+        const rendered = renderMessagesWithRanges(currentMessages);
+        currentRanges = rendered.ranges;
+        scrollBox.setContent(rendered.text);
+        scrollBox.scrollTo(prevBase);
+        screen.render();
     }
 
     /**
@@ -145,10 +227,17 @@ export function createChatView(screen, theme, { onLoadMoreHistory, onActionMenu
      */
     function setMessages(messages, autoScrollToBottom = true) {
         currentMessages = messages;
-        const prevScroll = scrollBox.getScroll();
+        const prevScroll = scrollBox.childBase || 0;
         const prevHeight = scrollBox.getScrollHeight();
 
-        scrollBox.setContent(renderMessages(messages));
+        // Выделенное сообщение могло быть удалено или относиться к другому чату
+        if (selectedId !== null && !messages.some((m) => m.id === selectedId)) {
+            selectedId = null;
+        }
+
+        const rendered = renderMessagesWithRanges(messages);
+        currentRanges = rendered.ranges;
+        scrollBox.setContent(rendered.text);
 
         if (autoScrollToBottom) {
             scrollBox.setScrollPerc(100);
@@ -166,10 +255,108 @@ export function createChatView(screen, theme, { onLoadMoreHistory, onActionMenu
         screen.render();
     }
 
+    /**
+     * Переводит номер отрисованной строки в номер строки исходного содержимого.
+     * blessed переносит длинные строки, поэтому напрямую индексы не совпадают.
+     * @param {number} renderedLine
+     * @returns {number}
+     */
+    function toContentLine(renderedLine) {
+        const rtof = scrollBox._clines?.rtof;
+        if (Array.isArray(rtof) && renderedLine >= 0 && renderedLine < rtof.length) {
+            return rtof[renderedLine];
+        }
+        return renderedLine;
+    }
+
+    /**
+     * Обратное преобразование: первая и последняя отрисованные строки для строки содержимого.
+     * @param {number} contentLine
+     * @param {"first"|"last"} edge
+     * @returns {number}
+     */
+    function toRenderedLine(contentLine, edge = "first") {
+        const ftor = scrollBox._clines?.ftor;
+        const mapped = Array.isArray(ftor) ? ftor[contentLine] : null;
+        if (!Array.isArray(mapped) || mapped.length === 0) return contentLine;
+        return edge === "first" ? mapped[0] : mapped[mapped.length - 1];
+    }
+
+    /** Подкручивает ленту так, чтобы выделенное сообщение было видно целиком. */
+    function scrollMessageIntoView(range) {
+        if (!range) return;
+        const visible = scrollBox.height - scrollBox.iheight;
+        const base = scrollBox.childBase || 0;
+        const top = toRenderedLine(range.startLine, "first");
+        const bottom = toRenderedLine(range.endLine, "last");
+
+        if (top < base) {
+            scrollBox.scrollTo(top);
+        } else if (bottom >= base + visible) {
+            scrollBox.scrollTo(Math.max(0, bottom - visible + 1));
+        }
+    }
+
+    /**
+     * Выделяет сообщение по идентификатору.
+     * @param {number|null} id
+     * @param {object} [options]
+     * @param {boolean} [options.scrollIntoView=false]
+     * @param {boolean} [options.notify=false] вызвать onSelectMessage
+     */
+    function setSelected(id, { scrollIntoView = false, notify = false } = {}) {
+        if (selectedId === id && !scrollIntoView) return;
+        selectedId = id;
+        redraw();
+
+        const range = currentRanges.find((r) => r.message.id === id);
+        if (scrollIntoView && range) {
+            scrollMessageIntoView(range);
+            screen.render();
+        }
+        if (notify && range) {
+            onSelectMessage?.(range.message);
+        }
+    }
+
+    /** @returns {object|null} выделенное сообщение */
+    function getSelected() {
+        if (selectedId === null) return null;
+        return currentMessages.find((m) => m.id === selectedId) || null;
+    }
+
+    /** Сообщение, над которым выполняются действия: выделенное, иначе последнее. */
+    function getTargetMessage() {
+        return getSelected() || currentMessages[currentMessages.length - 1] || null;
+    }
+
+    /**
+     * Двигает выделение на step сообщений и подкручивает ленту к нему.
+     * @param {number} step
+     */
+    function selectByOffset(step) {
+        if (currentMessages.length === 0) return;
+
+        const currentIndex = currentMessages.findIndex((m) => m.id === selectedId);
+        let nextIndex;
+        if (currentIndex === -1) {
+            nextIndex = currentMessages.length - 1;
+        } else {
+            nextIndex = Math.min(currentMessages.length - 1, Math.max(0, currentIndex + step));
+        }
+
+        setSelected(currentMessages[nextIndex].id, { scrollIntoView: true, notify: true });
+
+        // Дошли до верха ленты — подтягиваем предыдущую страницу истории
+        if (nextIndex === 0 && step < 0) {
+            onLoadMoreHistory?.();
+        }
+    }
+
     // Обработка прокрутки вверх для подгрузки истории
     function handleScrollUp(step = 10) {
         scrollBox.scroll(-step);
-        if (scrollBox.getScroll() <= 0) {
+        if ((scrollBox.childBase || 0) <= 0) {
             onLoadMoreHistory?.();
         }
         screen.render();
@@ -182,8 +369,8 @@ export function createChatView(screen, theme, { onLoadMoreHistory, onActionMenu
 
     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(["up", "k"], () => selectByOffset(-1));
+    scrollBox.key(["down", "j"], () => selectByOffset(1));
     scrollBox.key(["home"], () => {
         scrollBox.scrollTo(0);
         onLoadMoreHistory?.();
@@ -194,18 +381,48 @@ export function createChatView(screen, theme, { onLoadMoreHistory, onActionMenu
         screen.render();
     });
 
-    scrollBox.on("wheelup", () => {
-        if (scrollBox.getScroll() <= 0) {
-            onLoadMoreHistory?.();
+    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 renderedLine = data.y - (scrollBox.atop || 0) - (scrollBox.itop || 0) + (scrollBox.childBase || 0);
+        const relX = data.x - (scrollBox.aleft || 0) - (scrollBox.ileft || 0);
+        const hit = getMessagePartAtPoint(toContentLine(renderedLine), relX, currentRanges);
+
+        if (!hit) {
+            // Клик по пустому месту ленты — просто передаём ей фокус
+            onFocusRequest?.();
+            scrollBox.focus();
+            screen.render();
+            return;
+        }
+
+        if (isRightClick(data)) {
+            setSelected(hit.message.id);
+            onActionMenu?.(hit.message);
+            return;
+        }
+
+        if (hit.part === "image") {
+            setSelected(hit.message.id);
+            onOpenImage?.(hit.message);
+            return;
         }
+
+        onFocusRequest?.();
+        scrollBox.focus();
+        setSelected(hit.message.id, { notify: true });
     });
 
     // Ctrl+M терминал шлёт как "\r" (имя клавиши "return"), поэтому меню действий
     // висит на Ctrl+A — иначе оно недостижимо.
-    scrollBox.key(["C-a"], () => {
-        if (currentMessages.length > 0) {
-            const lastMsg = currentMessages[currentMessages.length - 1];
-            onActionMenu?.(lastMsg);
+    scrollBox.key(["C-a", "enter", "return"], () => {
+        const msg = getTargetMessage();
+        if (msg) {
+            setSelected(msg.id);
+            onActionMenu?.(msg);
         }
     });
 
@@ -213,6 +430,10 @@ export function createChatView(screen, theme, { onLoadMoreHistory, onActionMenu
         container,
         scrollBox,
         setMessages,
+        setSelected,
+        getSelected,
+        getTargetMessage,
+        selectByOffset,
         loadMore: () => onLoadMoreHistory?.(),
         scrollToBottom: () => {
             scrollBox.setScrollPerc(100);

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, isRightClick } 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,20 @@ export function createHeader(screen, theme) {
         },
     });
 
+    headerBox.on("click", (data) => {
+        if (isRightClick(data)) return;
+        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 +61,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, isRightClick } 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,33 @@ export function createInputBox(screen, theme, { onSubmit, onCancelContext, onSla
         screen.render();
     }
 
+    contextBar.on("click", (data) => {
+        if (isRightClick(data)) return;
+        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,9 @@ import blessed from "neo-blessed";
 import { escapeBlessed } from "../../../telegram/formatter.js";
 import { fg } from "../../theme.js";
 
+import { isRightClick } from "../../../utils/mouse.js";
+import { bindOutsideClickClose } from "../../modalMouse.js";
+
 /**
  * Создаёт модальное окно контекстных действий над сообщением.
  * @param {blessed.Widgets.Screen} screen
@@ -19,6 +22,7 @@ export function createActionModal(screen, theme, { onAction } = {}) {
         height: "55%",
         hidden: true,
         tags: true,
+        mouse: true,
         border: {
             type: "line",
         },
@@ -66,6 +70,21 @@ export function createActionModal(screen, theme, { onAction } = {}) {
         },
     });
 
+    const baseCreateItem = list.createItem.bind(list);
+    list.createItem = (content) => {
+        const item = baseCreateItem(content);
+        item.on("click", (data) => {
+            if (isRightClick(data)) return;
+            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;
@@ -111,6 +130,7 @@ export function createActionModal(screen, theme, { onAction } = {}) {
 
         list.setItems(currentActions.map((a) => a.label));
         previousFocus = screen.focused;
+        armOutsideClose();
         modal.show();
         modal.setFront();
         list.focus();
@@ -128,6 +148,9 @@ export function createActionModal(screen, theme, { onAction } = {}) {
     // Фокус получает список — на нём и живут клавиши закрытия.
     list.key(["escape", "q"], hide);
 
+    // Закрытие при клике мышью мимо модального окна
+    const armOutsideClose = bindOutsideClickClose(screen, modal, 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 { bindOutsideClickClose } from "../../modalMouse.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,
@@ -107,6 +111,7 @@ export function createChatInfoModal(screen, theme) {
 
         infoText.setContent(body);
         previousFocus = screen.focused;
+        armOutsideClose();
         modal.show();
         modal.setFront();
         closeBtn.focus();
@@ -114,9 +119,13 @@ export function createChatInfoModal(screen, theme) {
     }
 
     closeBtn.on("press", hide);
+    closeBtn.on("click", hide);
     // Клавиши вешаем на кнопку: blessed отдаёт события только сфокусированному элементу.
     closeBtn.key(["escape", "q"], hide);
 
+    // Закрытие при клике мышью мимо модального окна
+    const armOutsideClose = bindOutsideClickClose(screen, modal, hide);
+
     return {
         modal,
         show,