Reduces stuttering issues for 516 users

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

@@ -5,8 +5,8 @@
  */
 
 export const MAX_VISIBLE_MESSAGES = 2500;
-export const MAX_PERSISTED_MESSAGES = 1000;
-export const MESSAGE_SAVE_INTERVAL = 10000;
+export const MAX_PERSISTED_MESSAGES = 500;
+export const MESSAGE_SAVE_INTERVAL = 60000;
 export const MESSAGE_PRUNE_INTERVAL = 60000;
 export const COMBINE_MAX_MESSAGES = 5;
 export const COMBINE_MAX_TIME_WINDOW = 5000;

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

@@ -38,6 +38,12 @@ import { selectChat, selectCurrentChatPage } from './selectors';
 const FORBID_TAGS = ['a', 'iframe', 'link', 'video'];
 
 const saveChatToStorage = async (store) => {
+  // Early return if chat saving is disabled
+  const chatSavingEnabled = await storage.get('chat-saving-enabled');
+  if (chatSavingEnabled === false) {
+    return;
+  }
+
   const state = selectChat(store.getState());
   const fromIndex = Math.max(
     0,
@@ -51,6 +57,13 @@ const saveChatToStorage = async (store) => {
 };
 
 const loadChatFromStorage = async (store) => {
+  // Early return if chat saving is disabled
+  const chatSavingEnabled = await storage.get('chat-saving-enabled');
+  if (chatSavingEnabled === false) {
+    store.dispatch(loadChat());
+    return;
+  }
+
   const [state, messages] = await Promise.all([
     storage.get('chat-state'),
     storage.get('chat-messages'),

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

@@ -46,6 +46,7 @@ import {
 import { importChatSettings } from './settingsImExport';
 import { reconnectWebsocket, disconnectWebsocket } from '../websocket';
 import { chatRenderer } from '../chat/renderer';
+import { storage } from 'common/storage';
 
 export const SettingsPanel = (props, context) => {
   const activeTab = useSelector(context, selectActiveTab);
@@ -85,14 +86,24 @@ export const SettingsPanel = (props, context) => {
 };
 
 export const SettingsGeneral = (props, context) => {
-  const { theme, fontFamily, fontSize, lineHeight } = useSelector(
+  const { theme, fontFamily, fontSize, lineHeight, chatSaving } = useSelector(
     context,
     selectSettings,
   );
   const dispatch = useDispatch(context);
   const [freeFont, setFreeFont] = useLocalState('freeFont', false);
   const [editingPanes, setEditingPanes] = useLocalState('freeFont', false);
 
+  const updateChatSaving = (value) => {
+    const boolValue = value === true;
+    dispatch(
+      updateSettings({
+        chatSaving: boolValue,
+      }),
+    );
+    storage.set('chat-saving-enabled', boolValue);
+  };
+
   return (
     <Section>
       <LabeledList>
@@ -246,6 +257,14 @@ export const SettingsGeneral = (props, context) => {
             Import settings
           </Button.File>
         </Stack.Item>
+        <Stack.Item mt={0.15}>
+          <Button.Checkbox
+            checked={chatSaving === true}
+            content="Persistent Chat"
+            tooltip="Enable chat persistence"
+            onClick={() => updateChatSaving(!chatSaving)}
+          />
+        </Stack.Item>
         <Stack.Item grow mt={0.15}>
           <Button
             content="Save chat log"

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

@@ -17,6 +17,7 @@ import {
 } from './actions';
 import { createDefaultHighlightSetting } from './model';
 import { SETTINGS_TABS, FONTS } from './constants';
+import { storage } from 'common/storage';
 
 const defaultHighlightSetting = createDefaultHighlightSetting();
 
@@ -45,6 +46,8 @@ const initialState = {
   initialized: false,
   websocketEnabled: false,
   websocketServer: '',
+  // Chat persistence setting - default is false, but use stored value if available
+  chatSaving: storage.get('chat-saving-enabled') === true,
 };
 
 export const settingsReducer = (state = initialState, action) => {