wip

Author: acharneski

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

@@ -1,10 +1,11 @@
-import React, {useState} from 'react';
+import React, {useState, useCallback, memo} from 'react';
 import styled from 'styled-components';
 import {useSelector} from 'react-redux';
 import {RootState} from '../store';
+
 // Debug logging utility
-const DEBUG = true;
-const log = (message: string, data?: any) => {
+const DEBUG = process.env.NODE_ENV === 'development';
+const log = (message: string, data?: unknown) => {
     if (DEBUG) {
         if (data) {
             console.log(`[InputArea] ${message}`, data);
@@ -20,8 +21,17 @@ const InputContainer = styled.div`
     border-top: 1px solid ${(props) => props.theme.colors.border};
     display: ${({theme}) => theme.config?.singleInput ? 'none' : 'block'};
     max-height: 10vh;
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+`;
+const StyledForm = styled.form`
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
 `;
 
+
 const TextArea = styled.textarea`
     width: 100%;
     padding: 0.5rem;
@@ -31,44 +41,77 @@ const TextArea = styled.textarea`
     resize: vertical;
     min-height: 40px;
     max-height: ${({theme}) => theme.sizing.console.maxHeight};
+    &:focus {
+        outline: 2px solid ${(props) => props.theme.colors.primary};
+        border-color: ${(props) => props.theme.colors.primary};
+    }
+    &:disabled {
+        background-color: ${(props) => props.theme.colors.disabled};
+    }
+`;
+const SendButton = styled.button`
+    padding: 0.5rem 1rem;
+    background-color: ${(props) => props.theme.colors.primary};
+    color: white;
+    border: none;
+    border-radius: ${(props) => props.theme.sizing.borderRadius.md};
+    cursor: pointer;
+    transition: opacity 0.2s;
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+    &:hover:not(:disabled) {
+        opacity: 0.9;
+    }
 `;
 
 interface InputAreaProps {
     onSendMessage: (message: string) => void;
 }
 
-const InputArea: React.FC<InputAreaProps> = ({onSendMessage}) => {
+const InputArea = memo(function InputArea({onSendMessage}: InputAreaProps) {
     log('Initializing component');
     const [message, setMessage] = useState('');
     const config = useSelector((state: RootState) => state.config);
     const [isSubmitting, setIsSubmitting] = useState(false);
 
-    const handleSubmit = (e: React.FormEvent) => {
+    const handleSubmit = useCallback((e: React.FormEvent) => {
         e.preventDefault();
+        if (isSubmitting) return;
+        
         log('Submit attempt');
         if (message.trim()) {
             setIsSubmitting(true);
             log('Sending message', {
                 messageLength: message.length,
                 message: message.substring(0, 100) + (message.length > 100 ? '...' : '')
             });
-            onSendMessage(message);
-            setMessage('');
-            setIsSubmitting(false);
-            log('Message sent and form reset');
+            Promise.resolve(onSendMessage(message)).finally(() => {
+                setMessage('');
+                setIsSubmitting(false);
+                log('Message sent and form reset');
+            });
         } else {
             log('Empty message, not sending');
         }
-    };
+    }, [message, onSendMessage]);
 
-    const handleMessageChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const handleMessageChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
         const newMessage = e.target.value;
         log('Message changed', {
             length: newMessage.length,
             isEmpty: newMessage.trim().length === 0
         });
         setMessage(newMessage);
-    };
+    }, []);
+
+    const handleKeyPress = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit(e);
+        }
+    }, [handleSubmit]);
 
     React.useEffect(() => {
         log('Component mounted', {configState: config});
@@ -80,20 +123,27 @@ const InputArea: React.FC<InputAreaProps> = ({onSendMessage}) => {
 
     return (
         <InputContainer>
-            <form onSubmit={handleSubmit}>
+            <StyledForm onSubmit={handleSubmit}>
                 <TextArea
                     value={message}
                     onChange={handleMessageChange}
+                    onKeyPress={handleKeyPress}
                     placeholder="Type a message..."
                     rows={3}
+                    aria-label="Message input"
+                    disabled={isSubmitting}
                 />
-                <button type="submit">Send</button>
-            </form>
+                <SendButton 
+                    type="submit" 
+                    disabled={isSubmitting || !message.trim()}
+                    aria-label="Send message"
+                >
+                    Send
+                </SendButton>
+            </StyledForm>
         </InputContainer>
     );
-};
-// Log when module is imported
-log('Module loaded');
+});
 
 
 export default InputArea;

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

@@ -8,6 +8,7 @@ import {ThemeMenu} from "./ThemeMenu";
 import {WebSocketMenu} from "./WebSocketMenu";
 import {RootState} from "../../store/index";
 import {toggleVerbose} from "../../store/slices/uiSlice";
+const isDevelopment = process.env.NODE_ENV === 'development';
 
 const MenuContainer = styled.div`
     display: flex;
@@ -140,12 +141,16 @@ export const Menu: React.FC = () => {
                     </DropdownContent>
                 </Dropdown>
 
-                <Dropdown>
-                    <DropButton onClick={() => console.log('[Menu] Config menu clicked')}>Config</DropButton>
-                    <DropdownContent>
-                        <WebSocketMenu/>
-                    </DropdownContent>
-                </Dropdown>
+                {isDevelopment && (
+                    <Dropdown>
+                        <DropButton onClick={() => console.log('[Menu] Config menu clicked')}>
+                            Config
+                        </DropButton>
+                        <DropdownContent>
+                            <WebSocketMenu/>
+                        </DropdownContent>
+                    </Dropdown>
+                )}
 
             </ToolbarLeft>
 
@@ -163,4 +168,4 @@ export const Menu: React.FC = () => {
             </Dropdown>
         </MenuContainer>
     );
-};
+};

webapp/chat-app/src/store/slices/configSlice.ts

@@ -13,6 +13,17 @@ const loadSavedTheme = (): ThemeName => {
 };
 // Load websocket config from localStorage or use defaults
 const loadWebSocketConfig = () => {
+    // In production, always use the current host
+    if (process.env.NODE_ENV !== 'development') {
+        return {
+            url: window.location.hostname,
+            port: window.location.port || (window.location.protocol === 'https:' ? '443' : '80'),
+            protocol: window.location.protocol === 'https:' ? 'wss:' : 'ws:',
+            retryAttempts: 3,
+            timeout: 5000
+        };
+    }
+
     try {
         const savedConfig = localStorage.getItem('websocketConfig');
         if (savedConfig) {
@@ -134,6 +145,12 @@ export const configSlice = createSlice({
             state.theme.autoSwitch = !state.theme.autoSwitch;
         },
         updateWebSocketConfig: (state, action: PayloadAction<Partial<AppConfig['websocket']>>) => {
+            // Only allow WebSocket config updates in development mode
+            if (process.env.NODE_ENV !== 'development') {
+                console.warn('[ConfigSlice] WebSocket config updates are only allowed in development mode');
+                return;
+            }
+
             console.log('[ConfigSlice] Updating WebSocket config:', {
                 previous: state.websocket,
                 updates: action.payload,

webapp/chat-app/src/styled.d.ts

@@ -100,6 +100,7 @@ declare module 'styled-components' {
             info: string;
             primaryDark?: string;
             hover?: string;
+        disabled: string;
         };
     }
 }

webapp/chat-app/src/themes/themes.ts

@@ -54,6 +54,7 @@ interface ThemeColors {
     info: string;
     hover?: string;
     primaryDark?: string;
+    disabled: string;  // Remove optional marker to make it required
 }
 
 interface ThemeSizing {
@@ -277,6 +278,7 @@ export const mainTheme: ExtendedTheme = {
         success: '#34C759',
         warning: '#FF9500',
         info: '#5856D6',
+        disabled: '#E5E5EA', // Make sure this is defined in all themes
         primaryDark: '#0056b3', // Add darker shade of primary
         hover: '#2C5282', // Add hover color
     },
@@ -301,6 +303,7 @@ export const nightTheme: ExtendedTheme = {
         warning: '#FF9F0A',
         info: '#5E5CE6',
         primaryDark: '#0066cc',
+        disabled: '#2C2C2E', // Ensure consistent property definition
     },
     ...baseTheme,
 };
@@ -323,6 +326,7 @@ export const forestTheme: ExtendedTheme = {
         warning: '#F77F00',
         info: '#4895EF',
         primaryDark: '#1b4332',
+        disabled: '#2D3B35', // Ensure consistent property definition
     },
     ...baseTheme,
 };
@@ -345,6 +349,7 @@ export const ponyTheme: ExtendedTheme = {
         warning: '#FFB6C1',
         info: '#DB7093',
         primaryDark: '#ff1493',
+        disabled: '#F8E1E7', // Ensure consistent property definition
     },
     ...baseTheme,
 };
@@ -367,6 +372,7 @@ export const alienTheme: ExtendedTheme = {
         warning: '#FFFF00',
         info: '#00FFFF',
         primaryDark: '#2bbb0e',
+        disabled: '#1C1C1C', // Ensure consistent property definition
     },
     ...baseTheme,
 };

webapp/chat-app/src/types/styled.d.ts

@@ -84,6 +84,7 @@ declare module 'styled-components' {
             info: string;
             hover?: string;
             primaryDark?: string;
+        disabled: string;  // Keep as required to match ExtendedTheme
         };
         name: string;
         activeTab?: string;