wip

Author: acharneski

webapp/src/components/MessageList.tsx

@@ -3,13 +3,13 @@ import {useSelector} from 'react-redux';
 import {useTheme} from '../hooks/useTheme';
 import {RootState} from '../store';
 import {isArchive} from '../services/appConfig';
-import WebSocketService from '../services/websocket';
+
+import {debounce, resetTabState, updateTabs} from '../utils/tabHandling';
+import WebSocketService from "../services/websocket";
 import Prism from 'prismjs';
-import {Message} from '../types/messages';
+import {Message} from "../types/messages";
 import Spinner from './common/Spinner';
 import './MessageList.css';
-import mermaid from 'mermaid';
-import {debouncedUpdate} from '../store/slices/messageSlice';
 
 const DEBUG_LOGGING = process.env.NODE_ENV === 'development';
 const CONTAINER_ID = 'message-list-' + Math.random().toString(36).substr(2, 9);
@@ -237,37 +237,24 @@ const MessageList: React.FC<MessageListProps> = ({messages: propMessages}) => {
       mounted = false;
     };
   }, [messages, verboseMode]);
-
-  useTheme();
-
-
-  console.log('[MessageList]: Rendering component');
-
-  // --- Mermaid and Tabs Effect ---
-  React.useLayoutEffect(() => {
-    // Always update tabs after DOM update
-    debouncedUpdate();
-    if (!messageListRef.current) {
-      console.error(`[MessageList ${CONTAINER_ID}] Critical: messageListRef is null`);
-      return;
-    }
+    const debouncedUpdateTabs = React.useCallback(
+        debounce(() => {
     try {
-      // Always re-render all mermaid blocks, not just unprocessed ones, to avoid disappearing diagrams
-      const mermaidBlocks = messageListRef.current.querySelectorAll('.mermaid');
-      if (mermaidBlocks.length > 0) {
-        console.info("[MessageList] Rendering mermaid diagrams");
-        mermaid.initialize({ startOnLoad: true });
-        mermaidBlocks.forEach((el) => {
-          el.classList.add('mermaid-processed');
-          el.classList.remove('mermaid');
-        });
-        console.info("[MessageList] Mermaid diagrams rendered successfully");
-      }
+                updateTabs();
     } catch (error) {
-      console.error(`[MessageList ${CONTAINER_ID}] Failed to render mermaid diagram`, error);
+                console.error(`[MessageList ${CONTAINER_ID}] Failed to update tabs`, error);
+                resetTabState();
     }
-    // Use only dependencies that affect DOM: finalMessages, verboseMode, theme, etc.
-  }, [finalMessages, verboseMode, currentTheme]);
+        }, 250),
+        []
+    );
+
+    useTheme();
+    console.log('MessageList', 'Rendering component', {hasPropMessages: !!propMessages});
+
+    React.useEffect(() => {
+        debouncedUpdateTabs();
+    }, [finalMessages]);
 
   return (
       <div

webapp/src/services/websocket.ts

@@ -326,10 +326,18 @@ export class WebSocketService implements WebSocketLike {
     }
 
     private getWebSocketPath(): string {
-        // Use window.location.pathname as the base, ensuring trailing slash
-        let basePath = window.location.pathname;
-        if (!basePath.endsWith('/')) basePath += '/';
-        return basePath;
+        const path = window.location.pathname;
+        // Simplify path handling to use the base path
+        let wsPath = '/';
+        // If we're in a subdirectory, use that as the base path
+        if (path !== '/' && path.length > 0) {
+            // Extract the first path segment
+            const match = path.match(/^\/([^/]+)/);
+            if (match && match[1]) {
+                wsPath = `/${match[1]}/`;
+            }
+        }
+        return wsPath;
     }
 
     private setupEventHandlers(): () => void {

webapp/src/store/slices/messageSlice.ts

@@ -2,7 +2,9 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { Message, MessageState, MessageUpdate } from '../../types/messages';
 import DOMPurify from 'dompurify';
 import { debounce, getAllTabStates, restoreTabStates, updateTabs } from '../../utils/tabHandling';
-import Prism from 'prismjs';
+import Prism from "prismjs";
+import mermaid from "mermaid";
+
 
 const initialState: MessageState = {
     messages: [],
@@ -23,10 +25,16 @@ const sanitizeHtmlContent = (content: string): string => {
     });
 };
 
-export const debouncedUpdate = debounce(() => {
+const debouncedUpdate = debounce(() => {
     restoreTabStates(getAllTabStates());
     updateTabs();
     Prism.highlightAll();
+    try {
+        mermaid.init(undefined, document.querySelectorAll('.mermaid:not(.mermaid-processed)'));
+        document.querySelectorAll('.mermaid').forEach(el => el.classList.add('mermaid-processed'));
+    } catch (error) {
+        console.error('Failed to render mermaid diagram:', error);
+    }
 }, 100);
 
 const messageSlice = createSlice({

webapp/src/utils/tabHandling.ts

@@ -360,7 +360,8 @@ export const updateTabs = debounce(() => {
         isMutating = false;
     }
 }, 250);
-// Do NOT call updateTabs() immediately here! It causes infinite loops and breaks tab system.
+                // Wrap updateTabs in requestAnimationFrame to batch DOM updates
+                requestAnimationFrame(() => updateTabs());
 
 
 function setupTabContainer(container: Element) {