wip

.gitignore

@@ -5,7 +5,6 @@ reports/
 build/
 .gradle/
 .idea/
-.*
 openai.key
 *.log
 *.log.*

webapp/chat-app/.eslintrc.json

@@ -0,0 +1,40 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": false,
+    "node": false
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react",
+    "@typescript-eslint",
+    "react-hooks"
+  ],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

webapp/chat-app/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

webapp/chat-app/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "endOfLine": "auto"
+}

webapp/chat-app/src/App.test.js

@@ -1,8 +1,18 @@
-import { render, screen } from '@testing-library/react';
+import {render, screen} from '@testing-library/react';
 import App from './App';
 
+console.log('Starting App component tests...');
+
+
 test('renders learn react link', () => {
+    console.log('Testing: Rendering App component');
   render(<App />);
+    console.log('Testing: Searching for "learn react" text');
   const linkElement = screen.getByText(/learn react/i);
+    console.log('Testing: Verifying element is in document');
   expect(linkElement).toBeInTheDocument();
+    console.log('Test completed successfully');
 });
+afterAll(() => {
+    console.log('All App component tests completed');
+});

webapp/chat-app/src/App.tsx

@@ -8,23 +8,51 @@ import ThemeProvider from './themes/ThemeProvider';
 import {Menu} from "./components/Menu/Menu";
 
 const App: React.FC = () => {
+    console.log('[App] Component rendering');
+
     const sessionId = websocket.getSessionId();
+    const isConnected = websocket.isConnected();
+    console.log('[App] WebSocket state:', {
+        sessionId,
+        isConnected,
+    });
+    React.useEffect(() => {
+        console.log('[App] Component mounted');
+        return () => {
+            console.log('[App] Component unmounting');
+        };
+    }, []);
 
     return (
         <Provider store={store}>
-            <ThemeProvider>
-                <GlobalStyles/>
-                <div className="App">
-                    <Menu/>
-                    <ChatInterface 
-                        sessionId={sessionId} 
-                        websocket={websocket}
-                        isConnected={websocket.isConnected()}
-                    />
-                </div>
-            </ThemeProvider>
+            {(() => {
+                console.log('[App] Rendering Provider with store');
+                return (
+                    <ThemeProvider>
+                        {(() => {
+                            console.log('[App] Rendering ThemeProvider');
+                            return (
+                                <>
+                                    <GlobalStyles/>
+                                    <div className="App">
+                                        <Menu/>
+                                        <ChatInterface
+                                            sessionId={sessionId}
+                                            websocket={websocket}
+                                            isConnected={isConnected}
+                                        />
+                                    </div>
+                                </>
+                            );
+                        })()}
+                    </ThemeProvider>
+                );
+            })()}
         </Provider>
     );
 };
+// Add version info to help with debugging
+console.log('[App] Version 1.0.0 loaded');
+
 
-export default App;
+export default App;

webapp/chat-app/src/components/Chat/index.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import styled from 'styled-components';
-import { DefaultTheme } from 'styled-components';
-import { Message } from '../../types';
+import React, {useEffect} from 'react';
+import styled, {DefaultTheme} from 'styled-components';
+import {Message} from '../../types';
+import {logger} from '../../utils/logger';
 
 const ChatContainer = styled.div`
   display: flex;
@@ -26,6 +26,26 @@ interface ChatProps {
 }
 
 const Chat: React.FC<ChatProps> = ({ messages, onSendMessage }) => {
+  // Log component mount and updates
+  useEffect(() => {
+    logger.component('Chat', 'Component mounted');
+    logger.component('Chat', 'Initial messages:', messages);
+    return () => {
+      logger.component('Chat', 'Component unmounting');
+    };
+  }, []);
+  // Log when messages change
+  useEffect(() => {
+    console.log('[Chat] Messages updated:', messages);
+  }, [messages]);
+  // Wrap onSendMessage to add logging
+  const handleSendMessage = (content: string) => {
+    console.log('[Chat] Sending message:', content);
+    onSendMessage(content);
+  };
+  // Log render
+  console.log('[Chat] Rendering with', messages.length, 'messages');
+
   return (
     <ChatContainer>
       <MessageList>
@@ -37,5 +57,8 @@ const Chat: React.FC<ChatProps> = ({ messages, onSendMessage }) => {
     </ChatContainer>
   );
 };
+// Add display name for better debugging
+Chat.displayName = 'Chat';
+
 
 export default Chat;

webapp/chat-app/src/components/ChatInterface.tsx

@@ -24,36 +24,50 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({
                                                          websocket,
                                                          isConnected,
                                                      }) => {
+    console.log('[ChatInterface] Rendering with props:', {propSessionId, isConnected});
     const [sessionId] = useState(() => propSessionId || window.location.hash.slice(1) || 'new');
     const dispatch = useDispatch();
     const ws = useWebSocket(sessionId);
 
     useEffect(() => {
+        console.log('[ChatInterface] Setting up message handler for sessionId:', sessionId);
+
         const handleMessage = (data: string) => {
+            console.log('[ChatInterface] Received message:', data);
+
             const [id, version, content] = data.split(',');
             const timestamp = Date.now();
+            const messageObject = {
+                id: `${id}-${timestamp}`,
+                content: content,
+                version,
+                type: id.startsWith('u') ? 'user' as const : 'response' as const,
+                timestamp,
+            };
+            console.log('[ChatInterface] Dispatching message:', messageObject);
 
-            dispatch(
-                addMessage({
-                    id: `${id}-${timestamp}`, // Make IDs more unique
-                    content: content,
-                    version,
-                    type: id.startsWith('u') ? 'user' : 'response',
-                    timestamp,
-                })
-            );
+            dispatch(addMessage(messageObject));
         };
 
         websocket.addMessageHandler(handleMessage);
-        return () => websocket.removeMessageHandler(handleMessage);
+        return () => {
+            console.log('[ChatInterface] Cleaning up message handler for sessionId:', sessionId);
+            websocket.removeMessageHandler(handleMessage);
+        };
     }, [dispatch, ws]);
+    const handleSendMessage = (msg: string) => {
+        console.log('[ChatInterface] Sending message:', msg);
+        ws.send(msg);
+    };
+
 
     return (
         <ChatContainer>
             <MessageList/>
-            <InputArea onSendMessage={(msg) => ws.send(msg)}/>
+            <InputArea onSendMessage={handleSendMessage}/>
         </ChatContainer>
     );
 };
+console.log('[ChatInterface] Component defined');
 
 export default ChatInterface;

webapp/chat-app/src/components/Header.tsx

@@ -21,10 +21,25 @@ interface HeaderProps {
 
 const Header: React.FC<HeaderProps> = ({onThemeChange}) => {
     const [currentTheme, setTheme] = useTheme();
+    React.useEffect(() => {
+        console.log('Header mounted with theme:', currentTheme);
+        return () => {
+            console.log('Header unmounting');
+        };
+    }, []);
+    React.useEffect(() => {
+        console.log('Theme changed to:', currentTheme);
+    }, [currentTheme]);
+    const handleThemeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const newTheme = e.target.value as ThemeName;
+        console.log('Theme selection changed:', newTheme);
+        setTheme(newTheme);
+    };
+
 
     return (
         <HeaderContainer>
-            <ThemeSelect value={currentTheme} onChange={(e) => setTheme(e.target.value as any)}>
+            <ThemeSelect value={currentTheme} onChange={handleThemeChange}>
                 <option value="main">Day</option>
                 <option value="night">Night</option>
                 <option value="forest">Forest</option>
@@ -34,5 +49,8 @@ const Header: React.FC<HeaderProps> = ({onThemeChange}) => {
         </HeaderContainer>
     );
 };
+// Log when the component is defined
+console.log('Header component defined');
+
 
 export default Header;

webapp/chat-app/src/components/InputArea.tsx

@@ -22,21 +22,33 @@ interface InputAreaProps {
 
 const InputArea: React.FC<InputAreaProps> = ({onSendMessage}) => {
     const [message, setMessage] = useState('');
+    console.log('[InputArea] Rendering with message:', message);
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
+        console.log('[InputArea] Form submitted with message:', message);
         if (message.trim()) {
+            console.log('[InputArea] Sending message:', message);
             onSendMessage(message);
             setMessage('');
+            console.log('[InputArea] Message sent and input cleared');
+        } else {
+            console.log('[InputArea] Empty message, not sending');
         }
     };
+    const handleMessageChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const newMessage = e.target.value;
+        console.log('[InputArea] Message changed:', newMessage);
+        setMessage(newMessage);
+    };
+
 
     return (
         <InputContainer>
             <form onSubmit={handleSubmit}>
                 <TextArea
                     value={message}
-                    onChange={(e) => setMessage(e.target.value)}
+                    onChange={handleMessageChange}
                     placeholder="Type a message..."
                     rows={3}
                 />
@@ -45,5 +57,8 @@ const InputArea: React.FC<InputAreaProps> = ({onSendMessage}) => {
         </InputContainer>
     );
 };
+// Log when component is imported
+console.log('[InputArea] Component loaded');
+
 
-export default InputArea;
+export default InputArea;

webapp/chat-app/src/components/Layout/index.tsx

@@ -18,7 +18,20 @@ interface LayoutProps {
 }
 
 const Layout: React.FC<LayoutProps> = ({ children }) => {
-  return (
+    // Log when component mounts
+    React.useEffect(() => {
+        console.log('[Layout] Component mounted');
+        return () => {
+            console.log('[Layout] Component will unmount');
+        };
+    }, []);
+    // Log when children prop changes
+    React.useEffect(() => {
+        console.log('[Layout] Children updated:', {children});
+    }, [children]);
+    console.log('[Layout] Rendering component');
+
+    return (
     <LayoutContainer>
       {/* Toolbar will go here */}
       {/* Menubar will go here */}