All-round TGChat improvements

tgui/packages/tgui-panel/chat/ChatPageSettings.js

@@ -16,9 +16,9 @@ export const ChatPageSettings = (props, context) => {
   return (
     <Section>
       <Stack align="center">
-        <Stack.Item grow={1}>
+        <Stack.Item grow>
           <Input
-            fluid
+            width="100%"
             value={page.name}
             onChange={(e, value) =>
               dispatch(
@@ -30,8 +30,25 @@ export const ChatPageSettings = (props, context) => {
             }
           />
         </Stack.Item>
+        <Stack.Item>
+          <Button.Checkbox
+            content="Mute"
+            checked={page.hideUnreadCount}
+            icon={page.hideUnreadCount ? 'bell-slash' : 'bell'}
+            tooltip="Disables unread counter"
+            onClick={() =>
+              dispatch(
+                updateChatPage({
+                  pageId: page.id,
+                  hideUnreadCount: !page.hideUnreadCount,
+                })
+              )
+            }
+          />
+        </Stack.Item>
         <Stack.Item>
           <Button
+            content="Remove"
             icon="times"
             color="red"
             onClick={() =>
@@ -40,9 +57,8 @@ export const ChatPageSettings = (props, context) => {
                   pageId: page.id,
                 })
               )
-            }>
-            Remove
-          </Button>
+            }
+          />
         </Stack.Item>
       </Stack>
       <Divider />

tgui/packages/tgui-panel/chat/ChatTabs.js

@@ -37,6 +37,7 @@ export const ChatTabs = (props, context) => {
               key={page.id}
               selected={page === currentPage}
               rightSlot={
+                !page.hideUnreadCount &&
                 page.unreadCount > 0 && (
                   <UnreadCountWidget value={page.unreadCount} />
                 )

tgui/packages/tgui-panel/chat/actions.js

@@ -9,6 +9,7 @@ import { createPage } from './model';
 
 export const loadChat = createAction('chat/load');
 export const rebuildChat = createAction('chat/rebuild');
+export const clearChat = createAction('chat/clear');
 export const updateMessageCount = createAction('chat/updateMessageCount');
 export const addChatPage = createAction('chat/addPage', () => ({
   payload: createPage(),

tgui/packages/tgui-panel/chat/middleware.js

@@ -8,7 +8,7 @@ import DOMPurify from 'dompurify';
 import { storage } from 'common/storage';
 import { loadSettings, updateSettings, addHighlightSetting, removeHighlightSetting, updateHighlightSetting } from '../settings/actions';
 import { selectSettings } from '../settings/selectors';
-import { addChatPage, changeChatPage, changeScrollTracking, loadChat, rebuildChat, removeChatPage, saveChatToDisk, toggleAcceptedType, updateMessageCount } from './actions';
+import { addChatPage, changeChatPage, changeScrollTracking, clearChat, loadChat, rebuildChat, removeChatPage, saveChatToDisk, toggleAcceptedType, updateMessageCount } from './actions';
 import { MAX_PERSISTED_MESSAGES, MESSAGE_SAVE_INTERVAL } from './constants';
 import { createMessage, serializeMessage } from './model';
 import { chatRenderer } from './renderer';
@@ -173,6 +173,10 @@ export const chatMiddleware = (store) => {
       chatRenderer.saveToDisk();
       return;
     }
+    if (type === clearChat.type) {
+      chatRenderer.clearChat();
+      return;
+    }
     return next(action);
   };
 };

tgui/packages/tgui-panel/chat/model.js

@@ -22,6 +22,7 @@ export const createPage = (obj) => {
     name: 'New Tab',
     acceptedTypes: acceptedTypes,
     unreadCount: 0,
+    hideUnreadCount: false,
     createdAt: Date.now(),
     ...obj,
   };

tgui/packages/tgui-panel/chat/renderer.js

@@ -192,7 +192,8 @@ class ChatRenderer {
       const highlightWholeMessage = setting.highlightWholeMessage;
       const matchWord = setting.matchWord;
       const matchCase = setting.matchCase;
-      const allowedRegex = /^[a-z0-9_\-$/^[\s\]\\]+$/gi;
+      const enabled = setting.enabled;
+      const allowedRegex = /^[a-zа-яё0-9_\-$/^[\s\]\\]+$/gi;
       const lines = String(text)
         .split(',')
         .map((str) => str.trim())
@@ -247,6 +248,7 @@ class ChatRenderer {
         this.highlightParsers = [];
       }
       this.highlightParsers.push({
+        enabled,
         highlightWords,
         highlightRegex,
         highlightColor,
@@ -402,17 +404,19 @@ class ChatRenderer {
 
         // Highlight text
         if (!message.avoidHighlighting && this.highlightParsers) {
-          this.highlightParsers.map((parser) => {
-            const highlighted = highlightNode(
-              node,
-              parser.highlightRegex,
-              parser.highlightWords,
-              (text) => createHighlightNode(text, parser.highlightColor)
-            );
-            if (highlighted && parser.highlightWholeMessage) {
-              node.className += ' ChatMessage--highlighted';
-            }
-          });
+          this.highlightParsers
+            .filter((parser) => parser.enabled)
+            .map((parser) => {
+              const highlighted = highlightNode(
+                node,
+                parser.highlightRegex,
+                parser.highlightWords,
+                (text) => createHighlightNode(text, parser.highlightColor)
+              );
+              if (highlighted && parser.highlightWholeMessage) {
+                node.className += ' ChatMessage--highlighted';
+              }
+            });
         }
         // Linkify text
         const linkifyNodes = node.querySelectorAll('.linkify');
@@ -537,6 +541,29 @@ class ChatRenderer {
     });
   }
 
+  /**
+   * @clearChat
+   * @copyright 2023
+   * @author Cheffie
+   * @link https://github.com/CheffieGithub
+   * @license MIT
+   */
+  clearChat() {
+    const messages = this.visibleMessages;
+    this.visibleMessages = [];
+    for (let i = 0; i < messages.length; i++) {
+      const message = messages[i];
+      this.rootNode.removeChild(message.node);
+      // Mark this message as pruned
+      message.node = 'pruned';
+    }
+    // Remove pruned messages from the message array
+    this.messages = this.messages.filter(
+      (message) => message.node !== 'pruned'
+    );
+    logger.log(`Cleared chat`);
+  }
+
   saveToDisk() {
     // Allow only on IE11
     if (Byond.IS_LTE_IE10) {

tgui/packages/tgui-panel/chat/replaceInTextNode.js

@@ -93,7 +93,7 @@ export const replaceInTextNode = (regex, words, createNode) => (node) => {
     for (let word of words) {
       // Capture if the word is at the beginning, end, middle,
       // or by itself in a message
-      wordRegexStr += `^${word}\\W|\\W${word}\\W|\\W${word}$|^${word}$`;
+      wordRegexStr += `^${word}\\s\\W|\\s\\W${word}\\s\\W|\\s\\W${word}$|^${word}\\s\\W$`;
       // Make sure the last character for the expression is NOT '|'
       if (++i !== words.length) {
         wordRegexStr += '|';