wip

Author: acharneski

webapp/src/App.css

@@ -224,23 +224,27 @@
     pointer-events: none;
     transition: all 0.3s ease;
 }
+
 /* Enhanced Loading States */
 .loading-container {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 2rem;
 }
+
 .spinner-border.large {
     width: 3rem;
     height: 3rem;
     border-width: 0.3em;
 }
+
 .spinner-border.small {
     width: 1rem;
     height: 1rem;
     border-width: 0.2em;
 }
+
 /* Loading state with text */
 .loading-container .loading-text {
     margin-left: 1rem;
@@ -275,6 +279,7 @@
     var(--color-gradient-end)
     );
 }
+
 /* Add loading and error container styles */
 .loading-container,
 .error-container {
@@ -288,6 +293,7 @@
     background: var(--background-color, #fff);
     color: var(--text-color, #333);
 }
+
 .error-container {
     color: var(--error-color, #dc3545);
 }

webapp/src/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import {Provider, useSelector} from 'react-redux';
-import {store, RootState} from './store';
+import {Provider, useDispatch, useSelector} from 'react-redux';
+import {RootState, store} from './store';
+import {isArchive} from './services/appConfig';
 import ErrorBoundary from './components/ErrorBoundary/ErrorBoundary';
 import ErrorFallback from './components/ErrorBoundary/ErrorFallback';
 import './App.css';
@@ -43,6 +44,20 @@ import 'prismjs/plugins/show-language/prism-show-language';
 import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
 // import 'prismjs/plugins/autoloader/prism-autoloader';
 import QRCode from 'qrcode-generator';
+import {addMessage} from "./store/slices/messageSlice";
+import {Message} from './types/messages';
+// Add function to extract archived messages
+const getArchivedMessages = () => {
+    if (!isArchive) return null;
+    try {
+        const messagesEl = document.getElementById('archived-messages');
+        if (!messagesEl) return null;
+        return JSON.parse(messagesEl.textContent || '[]');
+    } catch (err) {
+        console.error('Failed to parse archived messages:', err);
+        return null;
+    }
+};
 
 const APP_VERSION = '1.0.0';
 const LOG_PREFIX = '[App]';
@@ -51,13 +66,30 @@ Prism.manual = true;
 
 // Create a separate component for the app content
 const AppContent: React.FC = () => {
-    console.group(`${LOG_PREFIX} Initializing v${APP_VERSION}`);
+    if (!isArchive) {
+        console.group(`${LOG_PREFIX} Initializing v${APP_VERSION}`);
+    }
     console.log('Starting component render');
     const appConfig = useSelector((state: RootState) => state.config);
+    const dispatch = useDispatch();
+    // Load archived messages on mount if in archive mode
+    React.useEffect(() => {
+        if (isArchive) {
+            const archivedMessages = getArchivedMessages();
+            if (archivedMessages) {
+                archivedMessages.forEach((msg: Message) => dispatch(addMessage(msg)));
+            }
+        }
+    }, [dispatch]);
 
     const sessionId = websocket.getSessionId();
     const isConnected = websocket.isConnected();
     React.useEffect(() => {
+        // Skip websocket setup if loading from archive
+        if (appConfig.isArchive) {
+            return;
+        }
+
         if (appConfig.applicationName) {
             document.title = appConfig.applicationName;
             console.log(`${LOG_PREFIX} Updated page title to:`, appConfig.applicationName);
@@ -108,7 +140,7 @@ const App: React.FC = () => {
     return (
         <ErrorBoundary FallbackComponent={ErrorFallback}>
             <Provider store={store}>
-                <AppContent />
+                <AppContent/>
             </Provider>
         </ErrorBoundary>
     );

webapp/src/components/ChatInterface.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import styled from 'styled-components';
-import {fetchAppConfig} from '../services/appConfig';
+import {fetchAppConfig, isArchive} from '../services/appConfig';
 import {useWebSocket} from '../hooks/useWebSocket';
 import {addMessage} from '../store/slices/messageSlice';
 import MessageList from './MessageList';
@@ -42,17 +42,20 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({
         }
     };
     const [messages, setMessages] = React.useState<Message[]>([]);
+    const [sessionId] = useState(() => propSessionId || window.location.hash.slice(1) || 'new');
+    const dispatch = useDispatch();
+    const ws = useWebSocket(sessionId);
     console.log(`${LOG_PREFIX} Rendering with props:`, {
         propSessionId,
         isConnected,
         hashedSessionId: window.location.hash
     });
 
-    const [sessionId] = useState(() => propSessionId || window.location.hash.slice(1) || 'new');
-    const dispatch = useDispatch();
-    const ws = useWebSocket(sessionId);
 
     useEffect(() => {
+        // Skip effect in archive mode
+        if (isArchive) return;
+
         let mounted = true;
         const loadAppConfig = async () => {
             if (!sessionId) return;
@@ -75,6 +78,9 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({
     }, [sessionId]); // Only depend on sessionId
 
     useEffect(() => {
+        // Skip effect in archive mode
+        if (isArchive) return;
+
         debugLog('Setting up message handler', {
             sessionId,
             isConnected,
@@ -162,7 +168,11 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({
         ws.send(msg);
     };
 
-    return (
+    return isArchive ? (
+        <ChatContainer>
+            <MessageList/>
+        </ChatContainer>
+    ) : (
         <ChatContainer>
             <MessageList/>
             <InputArea onSendMessage={handleSendMessage}/>

webapp/src/components/InputArea.tsx

@@ -1,5 +1,5 @@
 import React, {memo, useCallback, useState} from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import {useSelector} from 'react-redux';
 import {RootState} from '../store';
 
@@ -18,6 +18,7 @@ const log = (message: string, data?: unknown) => {
 interface InputContainerProps {
     $hide?: boolean;
 }
+
 const InputContainer = styled.div<InputContainerProps>`
     padding: 1.5rem;
     background-color: ${(props) => props.theme.colors.surface};

webapp/src/components/Menu/Menu.tsx

@@ -2,16 +2,17 @@ import React from 'react';
 import styled from 'styled-components';
 import {useDispatch, useSelector} from 'react-redux';
 import {useModal} from '../../hooks/useModal';
-interface MenuContainerProps {
-    $hidden?: boolean;
-}
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCog, faHome, faSignInAlt, faSignOutAlt} from '@fortawesome/free-solid-svg-icons';
 import {ThemeMenu} from "./ThemeMenu";
 import {WebSocketMenu} from "./WebSocketMenu";
 import {RootState} from "../../store/index";
 import {toggleVerbose} from '../../store/slices/uiSlice';
 
+interface MenuContainerProps {
+    $hidden?: boolean;
+}
+
 const isDevelopment = process.env.NODE_ENV === 'development';
 
 function long64(): string {

webapp/src/components/Menu/ThemeMenu.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import {useTheme} from '../../hooks/useTheme';
 import {themes} from '../../themes/themes';
 import {useDispatch} from 'react-redux';
-import {showModal, setModalContent} from '../../store/slices/uiSlice';
+import {setModalContent, showModal} from '../../store/slices/uiSlice';
 
 const LOG_PREFIX = '[ThemeMenu Component]';
 const logWithPrefix = (message: string, ...args: any[]) => {
@@ -102,9 +102,8 @@ const ThemeList = styled.div`
     padding: ${({theme}) => theme.sizing.spacing.xs};
     z-index: 10;
     min-width: 200px;
-    box-shadow: 
-        0 4px 16px ${({theme}) => `${theme.colors.primary}20`},
-        0 0 0 1px ${({theme}) => `${theme.colors.border}40`};
+    box-shadow: 0 4px 16px ${({theme}) => `${theme.colors.primary}20`},
+    0 0 0 1px ${({theme}) => `${theme.colors.border}40`};
     backdrop-filter: blur(8px);
     transform-origin: top;
     animation: slideIn 0.2s ease-out;
@@ -115,6 +114,7 @@ const ThemeList = styled.div`
         ${theme.colors.surface}e8
     )`};
     /* Add glass effect */
+
     &::before {
         content: '';
         position: absolute;
@@ -125,6 +125,7 @@ const ThemeList = styled.div`
         backdrop-filter: blur(8px);
         z-index: -1;
     }
+
     @keyframes slideIn {
         from {
             opacity: 0;
@@ -183,13 +184,13 @@ export const ThemeMenu: React.FC = () => {
         return () => {
             document.removeEventListener('keydown', handleEscapeKey);
         };
-}, [isOpen]);
+    }, [isOpen]);
 // Add keyboard shortcut handler
-React.useEffect(() => {
-    const handleKeyboardShortcut = (event: KeyboardEvent) => {
-        if (event.altKey && event.key.toLowerCase() === 't') {
-            event.preventDefault();
-            const themeContent = `
+    React.useEffect(() => {
+        const handleKeyboardShortcut = (event: KeyboardEvent) => {
+            if (event.altKey && event.key.toLowerCase() === 't') {
+                event.preventDefault();
+                const themeContent = `
                 <div>
                     ${Object.keys(themes).map(themeName => `
                         <button 
@@ -201,25 +202,25 @@ React.useEffect(() => {
                     `).join('')}
                 </div>
             `;
-        dispatch(showModal('Theme Selection'));
-        dispatch(setModalContent(themeContent));
-            logDebug('Theme modal opened via keyboard shortcut (Alt+T)');
-        }
-    };
-    document.addEventListener('keydown', handleKeyboardShortcut);
-    return () => {
-        document.removeEventListener('keydown', handleKeyboardShortcut);
-    };
-}, [currentTheme, dispatch]);
-React.useEffect(() => {
-    const handleThemeChangeEvent = (event: CustomEvent<string>) => {
-        handleThemeChange(event.detail as keyof typeof themes);
-    };
-    window.addEventListener('themeChange', handleThemeChangeEvent as EventListener);
-    return () => {
-        window.removeEventListener('themeChange', handleThemeChangeEvent as EventListener);
-    };
-}, []);
+                dispatch(showModal('Theme Selection'));
+                dispatch(setModalContent(themeContent));
+                logDebug('Theme modal opened via keyboard shortcut (Alt+T)');
+            }
+        };
+        document.addEventListener('keydown', handleKeyboardShortcut);
+        return () => {
+            document.removeEventListener('keydown', handleKeyboardShortcut);
+        };
+    }, [currentTheme, dispatch]);
+    React.useEffect(() => {
+        const handleThemeChangeEvent = (event: CustomEvent<string>) => {
+            handleThemeChange(event.detail as keyof typeof themes);
+        };
+        window.addEventListener('themeChange', handleThemeChangeEvent as EventListener);
+        return () => {
+            window.removeEventListener('themeChange', handleThemeChangeEvent as EventListener);
+        };
+    }, []);
     React.useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
             if (menuRef.current && !menuRef.current.contains(event.target as Node)) {