a (#16536)

Co-authored-by: DreamySkrell <>
Co-authored-by: Werner <[email protected]>

html/changelogs/DreamySkrell-tgchat-clear.yml

@@ -0,0 +1,41 @@
+################################
+# Example Changelog File
+#
+# Note: This file, and files beginning with ".", and files that don't end in ".yml" will not be read. If you change this file, you will look really dumb.
+#
+# Your changelog will be merged with a master changelog. (New stuff added only, and only on the date entry for the day it was merged.)
+# When it is, any changes listed below will disappear.
+#
+# Valid Prefixes:
+#   bugfix
+#   wip (For works in progress)
+#   tweak
+#   soundadd
+#   sounddel
+#   rscadd (general adding of nice things)
+#   rscdel (general deleting of nice things)
+#   imageadd
+#   imagedel
+#   maptweak
+#   spellcheck (typo fixes)
+#   experiment
+#   balance
+#   admin
+#   backend
+#   security
+#   refactor
+#################################
+
+# Your name.
+author: DreamySkrell
+
+# Optional: Remove this file after generating master changelog.  Useful for PR changelogs that won't get used again.
+delete-after: True
+
+# Any changes you've made.  See valid prefix list above.
+# INDENT WITH TWO SPACES.  NOT TABS.  SPACES.
+# SCREW THIS UP AND IT WON'T WORK.
+# Also, all entries are changed into a single [] after a master changelog generation. Just remove the brackets when you add new entries.
+# Please surround your changes in  double quotes ("), as certain characters otherwise screws up compiling. The quotes will not show up in the changelog.
+changes:
+  - rscadd: "Clear chat button."

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

@@ -19,3 +19,4 @@ export const toggleAcceptedType = createAction('chat/toggleAcceptedType');
 export const removeChatPage = createAction('chat/removePage');
 export const changeScrollTracking = createAction('chat/changeScrollTracking');
 export const saveChatToDisk = createAction('chat/saveToDisk');
+export const clearChatMessages = createAction('chat/clearChat');

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, loadChat, rebuildChat, removeChatPage, saveChatToDisk, clearChatMessages, toggleAcceptedType, updateMessageCount } from './actions';
 import { MAX_PERSISTED_MESSAGES, MESSAGE_SAVE_INTERVAL } from './constants';
 import { createMessage, serializeMessage } from './model';
 import { chatRenderer } from './renderer';
@@ -139,6 +139,10 @@ export const chatMiddleware = (store) => {
       chatRenderer.saveToDisk();
       return;
     }
+    if (type === clearChatMessages.type) {
+      chatRenderer.clear();
+      return;
+    }
     return next(action);
   };
 };

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

@@ -470,7 +470,7 @@ class ChatRenderer {
     }
   }
 
-  pruneMessages() {
+  pruneMessagesTo(max_visible_messages, max_persisted_messages) {
     if (!this.isReady()) {
       return;
     }
@@ -483,7 +483,7 @@ class ChatRenderer {
     // Visible messages
     {
       const messages = this.visibleMessages;
-      const fromIndex = Math.max(0, messages.length - MAX_VISIBLE_MESSAGES);
+      const fromIndex = Math.max(0, messages.length - max_visible_messages);
       if (fromIndex > 0) {
         this.visibleMessages = messages.slice(fromIndex);
         for (let i = 0; i < fromIndex; i++) {
@@ -504,7 +504,7 @@ class ChatRenderer {
     {
       const fromIndex = Math.max(
         0,
-        this.messages.length - MAX_PERSISTED_MESSAGES
+        this.messages.length - max_persisted_messages
       );
       if (fromIndex > 0) {
         this.messages = this.messages.slice(fromIndex);
@@ -513,6 +513,10 @@ class ChatRenderer {
     }
   }
 
+  pruneMessages() {
+    this.pruneMessagesTo(MAX_VISIBLE_MESSAGES, MAX_PERSISTED_MESSAGES);
+  }
+
   rebuildChat() {
     if (!this.isReady()) {
       return;
@@ -585,6 +589,10 @@ class ChatRenderer {
       .replace('T', '-');
     window.navigator.msSaveBlob(blob, `ss13-chatlog-${timestamp}.html`);
   }
+
+  clear() {
+    this.pruneMessagesTo(0, 0);
+  }
 }
 
 // Make chat renderer global so that we can continue using the same

tgui/packages/tgui-panel/settings/SettingsPanel.js

@@ -9,7 +9,7 @@ import { useLocalState } from 'tgui/backend';
 import { useDispatch, useSelector } from 'common/redux';
 import { Box, Button, ColorBox, Divider, Dropdown, Flex, Input, LabeledList, NumberInput, Section, Stack, Tabs, TextArea } from 'tgui/components';
 import { ChatPageSettings } from '../chat';
-import { rebuildChat, saveChatToDisk } from '../chat/actions';
+import { rebuildChat, saveChatToDisk, clearChatMessages } from '../chat/actions';
 import { THEMES } from '../themes';
 import { changeSettingsTab, updateSettings, addHighlightSetting, removeHighlightSetting, updateHighlightSetting } from './actions';
 import { SETTINGS_TABS, FONTS, MAX_HIGHLIGHT_SETTINGS } from './constants';
@@ -152,6 +152,9 @@ export const SettingsGeneral = (props, context) => {
         </LabeledList.Item>
       </LabeledList>
       <Divider />
+      <Button icon="eraser" onClick={() => dispatch(clearChatMessages())}>
+        Clear chat log
+      </Button>
       <Button icon="save" onClick={() => dispatch(saveChatToDisk())}>
         Save chat log
       </Button>