@emaxe/tuigram 1.4.0 → 1.5.0

package/src/ui/components/chatView.js

@@ -4,6 +4,7 @@ import { formatMessageText, escapeBlessed } from "../../telegram/formatter.js";
 import { fg } from "../theme.js";
 
 import { getMessagePartAtPoint, isRightClick, stringCellWidth } from "../../utils/mouse.js";
+import { isMessageVideo } from "../../utils/video.js";
 
 /** Отступ тела сообщения от левого края ленты, в ячейках. */
 const BODY_INDENT = 2;
@@ -17,14 +18,20 @@ const BODY_INDENT = 2;
  * @param {(msg: object) => void} [callbacks.onActionMenu] правый клик / Enter / Ctrl+A
  * @param {(msg: object) => void} [callbacks.onSelectMessage] сообщение выделено
  * @param {(msg: object) => void} [callbacks.onOpenImage] клик по превью изображения
+ * @param {(msg: object) => void} [callbacks.onPlayVideo] клик по превью видео
  * @param {() => void} [callbacks.onFocusRequest] вызывается перед взятием фокуса мышью
+ * @param {(maxReadId: number) => void} [callbacks.onMessagesRead] вызывается при прокрутке и прочтении сообщений
+ * @param {(visibleMessages: Array<object>) => void} [callbacks.onVisibleMessagesChanged] вызывается при смене видимой области для Lazy Loading превью
  */
 export function createChatView(screen, theme, {
     onLoadMoreHistory,
     onActionMenu,
     onSelectMessage,
     onOpenImage,
+    onPlayVideo,
     onFocusRequest,
+    onMessagesRead,
+    onVisibleMessagesChanged,
 } = {}) {
     const container = blessed.box({
         parent: screen,
@@ -90,14 +97,107 @@ export function createChatView(screen, theme, {
     let currentMessages = [];
     let currentRanges = [];
     let selectedId = null;
+    let currentFirstUnreadId = null;
+    let lastReportedMaxReadId = 0;
+
+    // Кэш отформатированных строк сообщений для мгновенной перерисовки и прокрутки ленты
+    const messageLinesCache = new Map();
+    const MAX_LINES_CACHE = 1000;
+
+    /**
+     * Форматирует одиночное сообщение или возвращает готовые строки из кэша.
+     * @param {object} msg
+     * @returns {{ lines: Array<string>, bodyStartOffset: number, imageMeta: object|null }}
+     */
+    function getFormattedMessage(msg) {
+        const previewLen = msg.imagePreview ? msg.imagePreview.length : 0;
+        const reactionsCount = msg.reactions?.length || 0;
+        const cacheKey = `${msg.id}_${msg.editDate || 0}_${previewLen}_${reactionsCount}_${msg.senderName || ""}_${msg.text || ""}`;
+
+        if (messageLinesCache.has(cacheKey)) {
+            return messageLinesCache.get(cacheKey);
+        }
+
+        const time = formatMessageTime(msg.date);
+        const timeTag = fg(theme.chatView.time, `[${time}]`);
+
+        // Отправитель
+        let authorTag = "";
+        if (msg.out) {
+            const readCheck = fg(theme.chatView.outgoingName, "✓✓");
+            authorTag = `${fg(theme.chatView.outgoingName, "{bold}Вы{/bold}")} ${timeTag} ${readCheck}`;
+        } else {
+            const name = escapeBlessed(msg.senderName || "Собеседник");
+            authorTag = `${fg(theme.chatView.incomingName, `{bold}${name}{/bold}`)} ${timeTag}`;
+        }
+
+        // Метка редактирования
+        const editedTag = msg.editDate ? ` ${fg(theme.chatView.time, "(изменено)")}` : "";
+        const lines = [` ${authorTag}${editedTag}`];
+
+        // Блок ответа (Reply)
+        if (msg.replyToMsgId) {
+            lines.push(`  ${fg(theme.chatView.replyBorder, `┌─ Ответ на сообщение #${msg.replyToMsgId}`)}`);
+        }
+
+        // Текст сообщения и entities
+        let bodyText = formatMessageText(msg.text, msg.entities);
+
+        // Блок медиа-вложения и превью изображения
+        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;
+        }
+
+        // Строка, с которой начинается тело — нужна для координат превью
+        const bodyStartOffset = lines.length;
+        for (const line of bodyText.split("\n")) {
+            lines.push(`  ${line}`);
+        }
+
+        // Реакции
+        if (msg.reactions && msg.reactions.length > 0) {
+            const list = msg.reactions.map((r) => `${r.emoticon} ${r.count}`).join("  ");
+            lines.push(`  ${fg(theme.chatView.reactionFg, `{bold}${list}{/bold}`)}`);
+        }
+
+        let imageMeta = null;
+        if (msg.imagePreview) {
+            const descLines = msg.mediaDescription ? msg.mediaDescription.split("\n").length : 0;
+            const previewLines = msg.imagePreview.split("\n");
+            const width = previewLines.reduce((max, line) => Math.max(max, stringCellWidth(line)), 0);
+            imageMeta = {
+                descLines,
+                lineCount: previewLines.length,
+                width,
+            };
+        }
+
+        const result = { lines, bodyStartOffset, imageMeta };
+        if (messageLinesCache.size >= MAX_LINES_CACHE) {
+            const firstKey = messageLinesCache.keys().next().value;
+            messageLinesCache.delete(firstKey);
+        }
+        messageLinesCache.set(cacheKey, result);
+        return result;
+    }
 
     /**
      * Форматирует список сообщений в единую ленту текста с разметкой Blessed
      * и вычисляет координаты строк каждого сообщения для кликов мыши.
      * @param {Array<object>} messages
+     * @param {number|null} [firstUnreadId=null]
      * @returns {{ text: string, ranges: Array<object> }}
      */
-    function renderMessagesWithRanges(messages) {
+    function renderMessagesWithRanges(messages, firstUnreadId = null) {
         if (!messages || messages.length === 0) {
             return {
                 text: `\n\n  ${fg(theme.muted, "Сообщений пока нет. Напишите первое сообщение ниже!")}`,
@@ -119,79 +219,33 @@ export function createChatView(screen, theme, {
                 lastDateString = dateStr;
             }
 
-            const time = formatMessageTime(msg.date);
-            const timeTag = fg(theme.chatView.time, `[${time}]`);
-
-            // Отправитель
-            let authorTag = "";
-            if (msg.out) {
-                const readCheck = fg(theme.chatView.outgoingName, "✓✓");
-                authorTag = `${fg(theme.chatView.outgoingName, "{bold}Вы{/bold}")} ${timeTag} ${readCheck}`;
-            } else {
-                const name = escapeBlessed(msg.senderName || "Собеседник");
-                authorTag = `${fg(theme.chatView.incomingName, `{bold}${name}{/bold}`)} ${timeTag}`;
-            }
-
-            // Метка редактирования
-            const editedTag = msg.editDate ? ` ${fg(theme.chatView.time, "(изменено)")}` : "";
-
-            const lines = [` ${authorTag}${editedTag}`];
-
-            // Блок ответа (Reply)
-            if (msg.replyToMsgId) {
-                lines.push(`  ${fg(theme.chatView.replyBorder, `┌─ Ответ на сообщение #${msg.replyToMsgId}`)}`);
-            }
-
-            // Текст сообщения и entities
-            let bodyText = formatMessageText(msg.text, msg.entities);
-
-            // Блок медиа-вложения и превью изображения
-            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;
-            }
-
-            // Строка, с которой начинается тело — нужна для координат превью
-            const bodyStartOffset = lines.length;
-            for (const line of bodyText.split("\n")) {
-                lines.push(`  ${line}`);
-            }
-
-            // Реакции
-            if (msg.reactions && msg.reactions.length > 0) {
-                const list = msg.reactions.map((r) => `${r.emoticon} ${r.count}`).join("  ");
-                lines.push(`  ${fg(theme.chatView.reactionFg, `{bold}${list}{/bold}`)}`);
+            // Разделитель непрочитанных сообщений
+            if (firstUnreadId && msg.id === firstUnreadId) {
+                const unreadColor = theme.chatView.unreadDivider || theme.accent;
+                output += `\n  ${fg(unreadColor, "─────── Непрочитанные сообщения ───────")}\n\n`;
+                lineCursor += 3;
             }
 
+            const { lines, bodyStartOffset, imageMeta } = getFormattedMessage(msg);
             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);
+            if (imageMeta) {
+                const imageStart = startLine + bodyStartOffset + imageMeta.descLines;
                 image = {
                     startLine: imageStart,
-                    endLine: imageStart + previewLines.length - 1,
+                    endLine: imageStart + imageMeta.lineCount - 1,
                     left: BODY_INDENT,
-                    right: BODY_INDENT + width,
+                    right: BODY_INDENT + imageMeta.width,
                 };
             }
 
             // Выделенное сообщение помечается полосой в первой колонке. Первая колонка
             // каждой строки — пробел отступа, поэтому ширина строк не меняется и карта
             // координат остаётся верной.
-            const rendered = msg.id === selectedId
+            const isSelected = msg.id === selectedId;
+            const rendered = isSelected
                 ? lines.map((line) => `${fg(theme.accent, "▌")}${line.slice(1)}`)
                 : lines;
 
@@ -210,49 +264,155 @@ export function createChatView(screen, theme, {
         return { text: output, ranges };
     }
 
+    /**
+     * Вычисляет фактическую видимую высоту окна ленты сообщений в строках терминала.
+     * @returns {number}
+     */
+    function getVisibleHeight() {
+        const lpos = scrollBox.lpos || scrollBox._getCoords();
+        if (lpos && lpos.yl > lpos.yi) {
+            return Math.max(1, lpos.yl - lpos.yi - (scrollBox.iheight || 0));
+        }
+        return Math.max(1, (screen.height || 24) - 10);
+    }
+
+    /**
+     * Точно прокручивает ленту к указанной строке содержимого, избегая багов blessed с относительными высотами.
+     * @param {number} targetLine
+     */
+    function scrollToLine(targetLine) {
+        const totalLines = scrollBox._clines?.length || scrollBox.getScrollHeight() || 0;
+        const visible = getVisibleHeight();
+        const maxBase = Math.max(0, totalLines - visible);
+        const clamped = Math.max(0, Math.min(targetLine, maxBase));
+        scrollBox.childBase = clamped;
+        scrollBox.childOffset = 0;
+    }
+
+    /**
+     * Прокручивает ленту в самый низ (к последнему сообщению).
+     */
+    function scrollToBottom() {
+        const totalLines = scrollBox._clines?.length || scrollBox.getScrollHeight() || 0;
+        const visible = getVisibleHeight();
+        scrollBox.childBase = Math.max(0, totalLines - visible);
+        scrollBox.childOffset = 0;
+    }
+
     /** Перерисовывает ленту, сохраняя позицию прокрутки (например, после смены выделения). */
     function redraw() {
         const prevBase = scrollBox.childBase || 0;
-        const rendered = renderMessagesWithRanges(currentMessages);
+        const rendered = renderMessagesWithRanges(currentMessages, currentFirstUnreadId);
         currentRanges = rendered.ranges;
         scrollBox.setContent(rendered.text);
-        scrollBox.scrollTo(prevBase);
+        scrollToLine(prevBase);
         screen.render();
     }
 
+    /**
+     * Вычисляет видимые в данный момент сообщения, уведомляет о прочитанных
+     * и передаёт видимые сообщения для ленивой подгрузки превью (Lazy Loading).
+     */
+    function checkVisibleMessages() {
+        if (!currentRanges || currentRanges.length === 0) return;
+
+        const visibleHeight = getVisibleHeight();
+        const viewportTop = scrollBox.childBase || 0;
+        const viewportBottom = viewportTop + visibleHeight - 1;
+
+        // Буфер в 5 строк сверху и снизу для плавной подгрузки перед появлением на экране
+        const bufferTop = Math.max(0, viewportTop - 5);
+        const bufferBottom = viewportBottom + 5;
+
+        let maxVisibleId = 0;
+        const visibleMessages = [];
+
+        for (const range of currentRanges) {
+            const startRendered = toRenderedLine(range.startLine, "first");
+            const endRendered = toRenderedLine(range.endLine, "last");
+
+            // Проверка для отметки прочитанных (сообщение началось до низа экрана)
+            if (startRendered <= viewportBottom) {
+                if (range.message.id > maxVisibleId) {
+                    maxVisibleId = range.message.id;
+                }
+            }
+
+            // Проверка попадания в видимый диапазон (для Lazy Loading)
+            if (endRendered >= bufferTop && startRendered <= bufferBottom) {
+                visibleMessages.push(range.message);
+            }
+        }
+
+        if (maxVisibleId > lastReportedMaxReadId) {
+            lastReportedMaxReadId = maxVisibleId;
+            onMessagesRead?.(maxVisibleId);
+        }
+
+        if (visibleMessages.length > 0) {
+            onVisibleMessagesChanged?.(visibleMessages);
+        }
+    }
+
     /**
      * Устанавливает сообщения в ленту.
      * @param {Array<object>} messages
-     * @param {boolean} [autoScrollToBottom=true]
+     * @param {boolean|object} [scrollOption=true]
      */
-    function setMessages(messages, autoScrollToBottom = true) {
+    function setMessages(messages, scrollOption = true) {
         currentMessages = messages;
         const prevScroll = scrollBox.childBase || 0;
         const prevHeight = scrollBox.getScrollHeight();
 
+        let autoScrollToBottom = true;
+        let firstUnreadId = null;
+        let preserveScroll = false;
+
+        if (typeof scrollOption === "boolean") {
+            autoScrollToBottom = scrollOption;
+            preserveScroll = !scrollOption;
+        } else if (scrollOption && typeof scrollOption === "object") {
+            autoScrollToBottom = Boolean(scrollOption.autoScrollToBottom);
+            firstUnreadId = scrollOption.firstUnreadId !== undefined ? scrollOption.firstUnreadId : null;
+            preserveScroll = Boolean(scrollOption.preserveScroll);
+        }
+
+        if (firstUnreadId !== undefined) {
+            currentFirstUnreadId = firstUnreadId;
+        }
+
         // Выделенное сообщение могло быть удалено или относиться к другому чату
         if (selectedId !== null && !messages.some((m) => m.id === selectedId)) {
             selectedId = null;
         }
 
-        const rendered = renderMessagesWithRanges(messages);
+        const rendered = renderMessagesWithRanges(messages, currentFirstUnreadId);
         currentRanges = rendered.ranges;
         scrollBox.setContent(rendered.text);
 
-        if (autoScrollToBottom) {
-            scrollBox.setScrollPerc(100);
-        } else {
+        if (currentFirstUnreadId) {
+            const range = currentRanges.find((r) => r.message.id === currentFirstUnreadId);
+            if (range) {
+                const targetLine = toRenderedLine(range.startLine, "first");
+                scrollToLine(Math.max(0, targetLine - 2));
+            } else if (autoScrollToBottom) {
+                scrollToBottom();
+            }
+        } else if (autoScrollToBottom) {
+            scrollToBottom();
+        } else if (preserveScroll) {
             // Сохраняем относительную позицию скролла: если добавились старые сообщения сверху,
             // компенсируем сдвиг высоты ленты
             const newHeight = scrollBox.getScrollHeight();
             const addedLines = newHeight - prevHeight;
             if (addedLines > 0 && prevScroll > 0) {
-                scrollBox.scrollTo(prevScroll + addedLines);
+                scrollToLine(prevScroll + addedLines);
             } else if (prevScroll > 0) {
-                scrollBox.scrollTo(prevScroll);
+                scrollToLine(prevScroll);
             }
         }
         screen.render();
+        checkVisibleMessages();
     }
 
     /**
@@ -285,15 +445,15 @@ export function createChatView(screen, theme, {
     /** Подкручивает ленту так, чтобы выделенное сообщение было видно целиком. */
     function scrollMessageIntoView(range) {
         if (!range) return;
-        const visible = scrollBox.height - scrollBox.iheight;
+        const visible = getVisibleHeight();
         const base = scrollBox.childBase || 0;
         const top = toRenderedLine(range.startLine, "first");
         const bottom = toRenderedLine(range.endLine, "last");
 
         if (top < base) {
-            scrollBox.scrollTo(top);
+            scrollToLine(top);
         } else if (bottom >= base + visible) {
-            scrollBox.scrollTo(Math.max(0, bottom - visible + 1));
+            scrollToLine(Math.max(0, bottom - visible + 1));
         }
     }
 
@@ -355,16 +515,20 @@ export function createChatView(screen, theme, {
 
     // Обработка прокрутки вверх для подгрузки истории
     function handleScrollUp(step = 10) {
-        scrollBox.scroll(-step);
+        const current = scrollBox.childBase || 0;
+        scrollToLine(Math.max(0, current - step));
         if ((scrollBox.childBase || 0) <= 0) {
             onLoadMoreHistory?.();
         }
         screen.render();
+        checkVisibleMessages();
     }
 
     function handleScrollDown(step = 10) {
-        scrollBox.scroll(step);
+        const current = scrollBox.childBase || 0;
+        scrollToLine(current + step);
         screen.render();
+        checkVisibleMessages();
     }
 
     scrollBox.key(["pageup", "C-u"], () => handleScrollUp(10));
@@ -372,13 +536,15 @@ export function createChatView(screen, theme, {
     scrollBox.key(["up", "k"], () => selectByOffset(-1));
     scrollBox.key(["down", "j"], () => selectByOffset(1));
     scrollBox.key(["home"], () => {
-        scrollBox.scrollTo(0);
+        scrollToLine(0);
         onLoadMoreHistory?.();
         screen.render();
+        checkVisibleMessages();
     });
     scrollBox.key(["end"], () => {
-        scrollBox.setScrollPerc(100);
+        scrollToBottom();
         screen.render();
+        checkVisibleMessages();
     });
 
     scrollBox.on("wheelup", () => handleScrollUp(3));
@@ -407,7 +573,11 @@ export function createChatView(screen, theme, {
 
         if (hit.part === "image") {
             setSelected(hit.message.id);
-            onOpenImage?.(hit.message);
+            if (isMessageVideo(hit.message) && onPlayVideo) {
+                onPlayVideo(hit.message);
+            } else {
+                onOpenImage?.(hit.message);
+            }
             return;
         }
 
@@ -426,6 +596,11 @@ export function createChatView(screen, theme, {
         }
     });
 
+    // Отслеживание прокрутки для обновления прочитанных сообщений
+    scrollBox.on("scroll", () => {
+        checkVisibleMessages();
+    });
+
     return {
         container,
         scrollBox,
@@ -434,10 +609,16 @@ export function createChatView(screen, theme, {
         getSelected,
         getTargetMessage,
         selectByOffset,
+        resetReadState: (initialReadMaxId = 0) => {
+            lastReportedMaxReadId = initialReadMaxId;
+            currentFirstUnreadId = null;
+        },
+        checkVisibleMessages,
         loadMore: () => onLoadMoreHistory?.(),
         scrollToBottom: () => {
-            scrollBox.setScrollPerc(100);
+            scrollToBottom();
             screen.render();
+            checkVisibleMessages();
         },
         focus: () => scrollBox.focus(),
     };

package/src/ui/components/inputBox.js

@@ -146,8 +146,10 @@ export function createInputBox(screen, theme, {
     });
 
     textarea.on("click", () => {
-        textarea.focus();
-        screen.render();
+        if (screen.focused !== textarea) {
+            textarea.focus();
+            screen.render();
+        }
     });
 
     textarea.key(["enter"], () => {
@@ -230,7 +232,9 @@ export function createInputBox(screen, theme, {
                 textarea.setValue(target.text);
             }
             renderContext();
-            textarea.focus();
+            if (screen.focused !== textarea) {
+                textarea.focus();
+            }
         },
         /**
          * Текущий режим ввода — нужен, чтобы отправить файл ответом.
@@ -246,7 +250,11 @@ export function createInputBox(screen, theme, {
             textarea.setValue("");
             screen.render();
         },
-        focus: () => textarea.focus(),
+        focus: () => {
+            if (screen.focused !== textarea) {
+                textarea.focus();
+            }
+        },
         /**
          * Завершает режим ввода, отдавая фокус предыдущей панели.
          * Нужно вызывать перед открытием модального окна: иначе textarea по blur

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

@@ -1,6 +1,7 @@
 import blessed from "neo-blessed";
 import { escapeBlessed } from "../../../telegram/formatter.js";
 import { fg } from "../../theme.js";
+import { isMessageVideo } from "../../../utils/video.js";
 
 import { isRightClick } from "../../../utils/mouse.js";
 import { bindOutsideClickClose } from "../../modalMouse.js";
@@ -111,6 +112,10 @@ export function createActionModal(screen, theme, { onAction } = {}) {
             { id: "reply", label: "↩️  Ответить (Reply)" },
         ];
 
+        if (isMessageVideo(msg)) {
+            currentActions.push({ id: "play_video", label: "▶️  Воспроизвести видео" });
+        }
+
         if (msg.out) {
             currentActions.push({ id: "edit", label: "✏️  Редактировать текст" });
         }

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

@@ -55,7 +55,8 @@ export function createHelpModal(screen, theme) {
    ${K_CYAN}Колесо мыши${K_END}          Прокрутка списка чатов и сообщений (вверх — подгрузка истории)
    ${K_CYAN}Левый клик по сообщению${K_END}  Выделить сообщение (помечается полосой ▌ слева)
    ${K_CYAN}Правый клик по сообщению${K_END} Меню действий над сообщением
-   ${K_CYAN}Клик по картинке${K_END}     Открыть изображение на весь экран (${K_CYAN}[Esc]${K_END} — закрыть)
+   ${K_CYAN}Клик по превью фото/видео${K_END}Открыть изображение или воспроизвести видео
+   ${K_CYAN}  [Space] / [r]${K_END}          — в видеоплеере: пауза / перезапуск
    ${K_CYAN}Клик по вкладкам/кнопкам${K_END} Переключение фильтров и вызов действий
    ${K_GRAY}macOS Terminal.app перехватывает правый клик — там пользуйтесь [Enter] или [Ctrl+A]${K_END}
    ${K_CYAN}[F12]${K_END}               Отдать мышь терминалу, чтобы выделить и скопировать текст