wip

Author: acharneski

webapp/Solution

@@ -0,0 +1,7 @@
+npm run start
+npm run build
+npm run test
+npm run eject
+npm run lint
+npm run type-check
+npm run typecheck

webapp/package.json

@@ -85,7 +85,8 @@
     "eject": "react-scripts eject",
     "lint": "eslint \"src/**/*.{ts,tsx,js,jsx}\" --fix --max-warnings=0",
     "type-check": "tsc --noEmit",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "validate": "concurrently \"npm run lint\" \"npm run type-check\""
   },
   "version": "0.1.0"
 }

webapp/public/index.html

@@ -32,11 +32,38 @@
     <script>
       // Increase timeout and add more detailed error handling
       window.addEventListener('load', function() {
+        // Check if we're in archive mode
+        function isArchiveMode() {
+          return window.location.search.includes('archive=true') || 
+                 localStorage.getItem('archive_mode') === 'true' ||
+                 document.documentElement.outerHTML.length > 60000;
+        }
+        
+        // Check if the app is already rendering
+        function isAppRendering() {
+          var root = document.getElementById('root');
+          return root && root.children && root.children.length > 0 && 
+                 root.innerHTML.includes('App');
+        }
+        // Skip the check if we're in archive mode
+        if (isArchiveMode()) {
+          console.log('Archive mode detected, skipping React render check');
+          return;
+        }
+        
+        // Initial check - app might already be rendered
+        if (isAppRendering()) {
+          console.log('React app already rendered successfully');
+          return;
+        }
+        
         setTimeout(function() {
           var root = document.getElementById('root');
-          if (root && (!root.children || root.children.length === 0)) {
+          if (!isAppRendering()) {
             console.error('React app failed to render after timeout');
-            root.innerHTML = '<div style="padding: 20px; text-align: center;"><h2>Application Error</h2><p>The application failed to load properly. Please try refreshing the page or check the console for errors.</p></div>';
+            if (root) {
+              root.innerHTML = '<div style="padding: 20px; text-align: center;"><h2>Application Error</h2><p>The application failed to load properly. Please try refreshing the page or check the console for errors.</p><p><button onclick="window.location.reload()">Refresh Page</button></p></div>';
+            }
           }
         }, 10000); // Increased timeout to 10 seconds
       });

webapp/src/App.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import Prism from 'prismjs';
 import { Provider, useDispatch, useSelector } from 'react-redux';
 import { RootState, store } from './store';
-import { isArchive } from './services/appConfig';
 import { setConnectionStatus } from './store/slices/connectionSlice';
 import ErrorBoundary from './components/ErrorBoundary/ErrorBoundary';
 import ErrorFallback from './components/ErrorBoundary/ErrorFallback';
@@ -47,8 +46,8 @@ Prism.manual = true;
 
 
 // Add function to extract archived messages
-const getArchivedMessages = () => {
-    if (!isArchive) return null;
+const getArchivedMessages = (isArchiveMode: boolean) => {
+    if (!isArchiveMode) return null;
     try {
         const messagesEl = document.getElementById('archived-messages');
         if (!messagesEl || !messagesEl.textContent) {
@@ -61,12 +60,17 @@ const getArchivedMessages = () => {
         return [];
     }
 };
+// Interface for App props
+interface AppProps {
+    isArchive?: boolean;
+}
 
 
 
 // Create a separate component for the app content
-const AppContent: React.FC = () => {
-    if (!isArchive) {
+const AppContent: React.FC<AppProps> = ({ isArchive }) => {
+    const isArchiveMode = isArchive || false;
+    if (!isArchiveMode) {
         console.info(`${LOG_PREFIX} Initializing application v${APP_VERSION}`);
     } else {
         console.info(`${LOG_PREFIX} Initializing application v${APP_VERSION} in archive mode`);
@@ -79,6 +83,8 @@ const AppContent: React.FC = () => {
     const { isConnected, error } = useSelector((state: RootState) => state.connection);
     // Update connection status in Redux store when websocket status changes
     React.useEffect(() => {
+        if (isArchiveMode) return; // Skip websocket setup in archive mode
+        
         const handleConnectionChange = (connected: boolean) => {
             dispatch(setConnectionStatus(connected));
         };
@@ -108,44 +114,44 @@ const AppContent: React.FC = () => {
             websocket.removeConnectionHandler(handleConnectionChange);
             websocket.removeErrorHandler(handleError);
         };
-    }, [dispatch]);
+    }, [dispatch, isArchiveMode]);
 
     // Load archived messages on mount if in archive mode
     React.useEffect(() => {
-        if (isArchive && !archivedMessagesLoaded) {
-            const archivedMessages = getArchivedMessages();
+        if (isArchiveMode && !archivedMessagesLoaded) {
+        const archivedMessages = getArchivedMessages(isArchiveMode);
             if (archivedMessages) {
                 archivedMessages.forEach((msg: Message) => dispatch(addMessage(msg)));
                 setArchivedMessagesLoaded(true);
             }
         }
-    }, [dispatch, archivedMessagesLoaded]);
+    }, [dispatch, archivedMessagesLoaded, isArchiveMode]);
 
 
 
     // Only get sessionId if not in archive mode
     const sessionId = React.useMemo(() => {
-        if (isArchive) return '';
+        if (isArchiveMode) return '';
         return websocket.getSessionId();
-    }, [isArchive]);
+    }, [isArchiveMode]);
 
     React.useEffect(() => {
         // Skip websocket setup if loading from archive
-        if (isArchive) {
+        if (isArchiveMode) {
             return;
         }
 
         if (appConfig.applicationName) {
             document.title = appConfig.applicationName;
         }
-    }, [appConfig.applicationName]);
+    }, [appConfig.applicationName, isArchiveMode]);
 
     // Only log websocket disconnected if not in archive mode
     React.useEffect(() => {
-        if (!isArchive && !isConnected) {
+        if (!isArchiveMode && !isConnected) {
             console.warn(`${LOG_PREFIX} WebSocket disconnected - sessionId: ${sessionId}`);
         }
-    }, [isConnected, sessionId]);
+    }, [isConnected, sessionId, isArchiveMode]);
     // Log WebSocket errors for debugging
     React.useEffect(() => {
         if (error) {
@@ -168,21 +174,18 @@ const AppContent: React.FC = () => {
     }, []);
     // Add debug information to help diagnose rendering issues
     React.useEffect(() => {
-        console.log(`${LOG_PREFIX} Rendering AppContent component. isArchive:`, isArchive);
+        console.log(`${LOG_PREFIX} Rendering AppContent component. isArchive:`, isArchiveMode);
         console.log(`${LOG_PREFIX} Connection status:`, isConnected ? 'Connected' : 'Disconnected');
         // Check if the DOM is properly rendering
         const rootElement = document.getElementById('root');
         console.log(`${LOG_PREFIX} Root element:`, rootElement);
         console.log(`${LOG_PREFIX} Root element children:`, rootElement?.childNodes?.length);
-    }, [isArchive, isConnected]);
+    }, [isArchiveMode, isConnected]);
 
 
     return (
         <ThemeProvider>
             <div className="App">
-                <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                    <h1>SimiaCryptus AI Assistant</h1>
-                </div>
                 <Menu/>
                 <ChatInterface
                     sessionId={sessionId}
@@ -195,13 +198,13 @@ const AppContent: React.FC = () => {
     );
 };
 // Create the main App component that provides the Redux store
-const App: React.FC = () => {
+const App: React.FC<AppProps> = ({ isArchive }) => {
     // Add console log to verify App component is rendering
     console.log(`${LOG_PREFIX} Rendering App component`);
     return (
         <ErrorBoundary FallbackComponent={ErrorFallback}>
             <Provider store={store}>
-                <AppContent/>
+                <AppContent isArchive={isArchive}/>
             </Provider>
         </ErrorBoundary>
     );

webapp/src/components/MessageList.tsx

@@ -135,7 +135,7 @@ export const expandMessageReferences = (
 const MessageList: React.FC<MessageListProps> = ({ messages: propMessages }) => {
   // Add archive mode class to container in archive mode
   const currentTheme = useSelector((state: RootState) => state.ui.theme);
-  const containerClassName = `message-list-container${isArchive ? ' archive-mode' : ''} theme-${currentTheme}`;
+  const containerClassName = `message-list-container${isArchive() ? ' archive-mode' : ''} theme-${currentTheme}`;
   // Apply theme class to container
   React.useEffect(() => {
     if (messageListRef.current) {