From 02d7a1d5521d96c1b1228ab79aca623aea630a20 Mon Sep 17 00:00:00 2001
From: root <root>
Date: Wed, 2 Jul 2025 15:06:40 +0200
Subject: [PATCH] feat: Add mobile support and testing utilities

- Add mobile keyboard handler for better mobile experience
- Create mobile test page for responsive testing
- Add chat test utilities for development and debugging
- Improve overall mobile usability and testing capabilities
---
 html/kidsai/mobile-keyboard-handler.js | 388 +++++++++++++++++++++++++
 html/kidsai/mobile-test.html           | 203 +++++++++++++
 html/kidsai/test-chat.html             |   0
 3 files changed, 591 insertions(+)
 create mode 100644 html/kidsai/mobile-keyboard-handler.js
 create mode 100644 html/kidsai/mobile-test.html
 create mode 100644 html/kidsai/test-chat.html

diff --git a/html/kidsai/mobile-keyboard-handler.js b/html/kidsai/mobile-keyboard-handler.js
new file mode 100644
index 0000000..4a8cbea
--- /dev/null
+++ b/html/kidsai/mobile-keyboard-handler.js
@@ -0,0 +1,388 @@
+// Mobile Keyboard Overlay Handler
+// This script dynamically adjusts the layout when the virtual keyboard appears
+
+(function() {
+    'use strict';
+    
+    // Only run on mobile devices
+    if (!/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+        return;
+    }
+    
+    let initialViewportHeight = window.innerHeight;
+    let isKeyboardOpen = false;
+    let activeInputContainer = null; // Track which input container is currently active
+    let focusedInput = null; // Track the currently focused input element
+    
+    // Function to handle viewport changes (keyboard show/hide)
+    function handleViewportChange() {
+        const currentHeight = window.innerHeight;
+        const heightDifference = initialViewportHeight - currentHeight;
+        const threshold = 150; // Minimum height change to consider keyboard open
+        
+        const conversationContainer = document.querySelector('.conversation-container');
+        const allChatInputContainers = document.querySelectorAll('.chat-input-container');
+        const body = document.body;
+        
+        // Update debug counter
+        const visibleInputs = Array.from(allChatInputContainers).filter(
+            container => container.style.display !== 'none'
+        ).length;
+        body.setAttribute('data-visible-inputs', visibleInputs);
+        
+        if (heightDifference > threshold && !isKeyboardOpen) {
+            // Keyboard opened
+            isKeyboardOpen = true;
+            console.log('Keyboard opened, adjusting layout. Found', allChatInputContainers.length, 'input containers');
+            
+            if (conversationContainer) {
+                conversationContainer.classList.add('keyboard-open');
+                conversationContainer.style.height = `${currentHeight * 0.4}px`;
+                conversationContainer.style.maxHeight = `${currentHeight * 0.4}px`;
+            }
+            
+            // Apply keyboard positioning to ALL chat input containers
+            allChatInputContainers.forEach((chatInputContainer, index) => {
+                if (chatInputContainer) {
+                    console.log(`Processing input container ${index + 1}/${allChatInputContainers.length}`);
+                    chatInputContainer.style.position = 'fixed';
+                    chatInputContainer.style.bottom = '0';
+                    chatInputContainer.style.left = '0';
+                    chatInputContainer.style.right = '0';
+                    chatInputContainer.style.zIndex = '1000';
+                    chatInputContainer.style.background = 'white';
+                    chatInputContainer.style.borderTop = '1px solid #e2e8f0';
+                    chatInputContainer.style.padding = '15px';
+                    chatInputContainer.style.paddingBottom = '20px';
+                    chatInputContainer.style.boxShadow = '0 -2px 10px rgba(0, 0, 0, 0.1)';
+                    chatInputContainer.style.margin = '0';
+                    chatInputContainer.style.borderRadius = '0';
+                    chatInputContainer.classList.add('keyboard-fixed');
+                    
+                    // Ensure the input area is properly styled
+                    const inputArea = chatInputContainer.querySelector('.input-area');
+                    if (inputArea) {
+                        inputArea.style.margin = '0';
+                        inputArea.style.borderRadius = '20px';
+                        inputArea.style.background = '#f8f9fa';
+                    }
+                }
+            });
+            
+            // Hide non-active input containers
+            if (activeInputContainer) {
+                allChatInputContainers.forEach(container => {
+                    if (container !== activeInputContainer) {
+                        container.style.display = 'none';
+                        console.log('Hiding non-active input container');
+                    } else {
+                        console.log('Keeping active input container visible');
+                    }
+                });
+            }
+            
+            body.classList.add('keyboard-open');
+            
+            // Update debug counter after hiding
+            const visibleAfter = Array.from(allChatInputContainers).filter(
+                container => container.style.display !== 'none'
+            ).length;
+            body.setAttribute('data-visible-inputs', visibleAfter);
+            
+        } else if (heightDifference <= threshold && isKeyboardOpen) {
+            // Keyboard closed
+            isKeyboardOpen = false;
+            console.log('Keyboard closed, restoring layout for', allChatInputContainers.length, 'input containers');
+            
+            if (conversationContainer) {
+                conversationContainer.classList.remove('keyboard-open');
+                conversationContainer.style.removeProperty('height');
+                conversationContainer.style.removeProperty('max-height');
+            }
+            
+            // Reset ALL chat input containers
+            allChatInputContainers.forEach((chatInputContainer, index) => {
+                if (chatInputContainer) {
+                    console.log(`Restoring input container ${index + 1}/${allChatInputContainers.length}`);
+                    chatInputContainer.style.removeProperty('position');
+                    chatInputContainer.style.removeProperty('bottom');
+                    chatInputContainer.style.removeProperty('left');
+                    chatInputContainer.style.removeProperty('right');
+                    chatInputContainer.style.removeProperty('z-index');
+                    chatInputContainer.style.removeProperty('background');
+                    chatInputContainer.style.removeProperty('border-top');
+                    chatInputContainer.style.removeProperty('padding');
+                    chatInputContainer.style.removeProperty('padding-bottom');
+                    chatInputContainer.style.removeProperty('box-shadow');
+                    chatInputContainer.style.removeProperty('margin');
+                    chatInputContainer.style.removeProperty('border-radius');
+                    chatInputContainer.style.removeProperty('display');
+                    chatInputContainer.classList.remove('keyboard-fixed');
+                    
+                    // Reset input area styles
+                    const inputArea = chatInputContainer.querySelector('.input-area');
+                    if (inputArea) {
+                        inputArea.style.removeProperty('margin');
+                        inputArea.style.removeProperty('border-radius');
+                        inputArea.style.removeProperty('background');
+                    }
+                }
+            });
+            
+            activeInputContainer = null;
+            body.classList.remove('keyboard-open');
+            body.removeAttribute('data-visible-inputs');
+        }
+    }
+    
+    // Function to scroll input into view when focused
+    function scrollInputIntoView(inputElement) {
+        setTimeout(() => {
+            // Always ensure input is visible when focused
+            const elementRect = inputElement.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            const keyboardHeight = initialViewportHeight - viewportHeight;
+            
+            // If there's likely a keyboard (height reduced by significant amount)
+            if (keyboardHeight > 150) {
+                const availableHeight = viewportHeight;
+                const inputBottom = elementRect.bottom;
+                
+                // If input is in bottom 40% of available viewport, scroll it up
+                if (inputBottom > availableHeight * 0.6) {
+                    // Scroll the input container's parent into view
+                    const container = inputElement.closest('.conversation-container') || 
+                                    inputElement.closest('.thinking-section');
+                    
+                    if (container) {
+                        container.scrollTop = container.scrollHeight - availableHeight * 0.5;
+                    }
+                    
+                    // Also try scrolling the window
+                    window.scrollTo({
+                        top: window.scrollY + (inputBottom - availableHeight * 0.4),
+                        behavior: 'smooth'
+                    });
+                }
+            }
+        }, 100); // Shorter delay for more responsive feel
+    }
+    
+    // Enhanced focus handler for chat textarea
+    function handleChatInputFocus(event) {
+        const chatTextarea = event.target;
+        focusedInput = chatTextarea;
+        
+        // Add focused class for styling
+        chatTextarea.classList.add('focused');
+        
+        // Immediately apply keyboard-friendly positioning
+        const chatInputContainer = chatTextarea.closest('.chat-input-container');
+        if (chatInputContainer && window.innerWidth <= 768) {
+            // Set this as the active input container
+            activeInputContainer = chatInputContainer;
+            
+            // Hide all other input containers immediately
+            const allInputContainers = document.querySelectorAll('.chat-input-container');
+            allInputContainers.forEach(container => {
+                if (container !== chatInputContainer) {
+                    container.style.display = 'none';
+                }
+            });
+            
+            // Apply keyboard positioning immediately on focus
+            setTimeout(() => {
+                chatInputContainer.style.position = 'fixed';
+                chatInputContainer.style.bottom = '0';
+                chatInputContainer.style.left = '0';
+                chatInputContainer.style.right = '0';
+                chatInputContainer.style.zIndex = '1001';
+                chatInputContainer.style.background = 'white';
+                chatInputContainer.style.borderTop = '1px solid #e2e8f0';
+                chatInputContainer.style.padding = '15px';
+                chatInputContainer.style.paddingBottom = '25px';
+                chatInputContainer.style.boxShadow = '0 -2px 10px rgba(0, 0, 0, 0.1)';
+                chatInputContainer.style.margin = '0';
+                chatInputContainer.style.display = 'block'; // Ensure this one is visible
+                chatInputContainer.classList.add('input-focused');
+                
+                // Add class to body for CSS targeting (fallback for :has() selector)
+                document.body.classList.add('input-focused-active');
+                
+                // Adjust conversation container
+                const conversationContainer = document.querySelector('.conversation-container');
+                if (conversationContainer) {
+                    conversationContainer.style.paddingBottom = '80px';
+                    conversationContainer.style.marginBottom = '0';
+                }
+            }, 50);
+        }
+        
+        // Scroll into view if keyboard is likely to appear
+        scrollInputIntoView(chatTextarea);
+        
+        // For iOS, prevent zoom by ensuring font-size is 16px
+        if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
+            chatTextarea.style.fontSize = '16px';
+        }
+    }
+    
+    function handleChatInputBlur(event) {
+        event.target.classList.remove('focused');
+        
+        // Clear focused input reference
+        if (focusedInput === event.target) {
+            focusedInput = null;
+        }
+        
+        // Clean up keyboard positioning when input loses focus
+        const chatInputContainer = event.target.closest('.chat-input-container');
+        if (chatInputContainer && chatInputContainer.classList.contains('input-focused')) {
+            setTimeout(() => {
+                // Only remove if keyboard is not detected as open
+                if (!isKeyboardOpen) {
+                    // Show all input containers again
+                    const allInputContainers = document.querySelectorAll('.chat-input-container');
+                    allInputContainers.forEach(container => {
+                        container.style.removeProperty('display');
+                    });
+                    
+                    chatInputContainer.style.removeProperty('position');
+                    chatInputContainer.style.removeProperty('bottom');
+                    chatInputContainer.style.removeProperty('left');
+                    chatInputContainer.style.removeProperty('right');
+                    chatInputContainer.style.removeProperty('z-index');
+                    chatInputContainer.style.removeProperty('background');
+                    chatInputContainer.style.removeProperty('border-top');
+                    chatInputContainer.style.removeProperty('padding');
+                    chatInputContainer.style.removeProperty('padding-bottom');
+                    chatInputContainer.style.removeProperty('box-shadow');
+                    chatInputContainer.style.removeProperty('margin');
+                    chatInputContainer.classList.remove('input-focused');
+                    
+                    // Remove body class
+                    document.body.classList.remove('input-focused-active');
+                    
+                    // Reset conversation container
+                    const conversationContainer = document.querySelector('.conversation-container');
+                    if (conversationContainer) {
+                        conversationContainer.style.removeProperty('padding-bottom');
+                        conversationContainer.style.removeProperty('margin-bottom');
+                    }
+                    
+                    // Clear active input container
+                    if (activeInputContainer === chatInputContainer) {
+                        activeInputContainer = null;
+                    }
+                }
+            }, 300); // Delay to avoid flicker
+        }
+    }
+    
+    // Debounced resize handler
+    let resizeTimeout;
+    function debouncedViewportChange() {
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(handleViewportChange, 150);
+    }
+    
+    // Initialize when DOM is ready
+    function initialize() {
+        console.log('Initializing mobile keyboard handler');
+        
+        // Store initial viewport height
+        initialViewportHeight = window.innerHeight;
+        
+        // Listen for viewport changes
+        window.addEventListener('resize', debouncedViewportChange);
+        
+        // Listen for orientation changes
+        window.addEventListener('orientationchange', () => {
+            setTimeout(() => {
+                initialViewportHeight = window.innerHeight;
+                handleViewportChange();
+            }, 500); // Wait for orientation change to complete
+        });
+        
+        // Add focus/blur handlers for chat inputs (using event delegation for dynamic content)
+        document.addEventListener('focus', (event) => {
+            if (event.target.matches('.chat-textarea, #question-input, .step-thinking-space textarea')) {
+                handleChatInputFocus(event);
+            }
+        }, true);
+        
+        document.addEventListener('blur', (event) => {
+            if (event.target.matches('.chat-textarea, #question-input, .step-thinking-space textarea')) {
+                handleChatInputBlur(event);
+            }
+        }, true);
+        
+        // Listen for new chat input containers being added to the DOM
+        if (window.MutationObserver) {
+            const observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    mutation.addedNodes.forEach((node) => {
+                        if (node.nodeType === 1) { // Element node
+                            // Check if the added node contains chat input containers
+                            const newInputContainers = node.querySelectorAll ? 
+                                node.querySelectorAll('.chat-input-container') : [];
+                            
+                            if (newInputContainers.length > 0) {
+                                console.log('New chat input containers detected:', newInputContainers.length);
+                                // If keyboard is currently open and we have an active input, hide the new ones
+                                if (isKeyboardOpen && activeInputContainer) {
+                                    newInputContainers.forEach(container => {
+                                        if (container !== activeInputContainer) {
+                                            container.style.display = 'none';
+                                        }
+                                    });
+                                }
+                            }
+                        }
+                    });
+                });
+            });
+            
+            // Observe the conversation container for new additions
+            const conversationContainer = document.querySelector('.conversation-container');
+            if (conversationContainer) {
+                observer.observe(conversationContainer, {
+                    childList: true,
+                    subtree: true
+                });
+            }
+            
+            // Also observe the main content area
+            const mainContent = document.querySelector('.main-content, .thinking-steps');
+            if (mainContent) {
+                observer.observe(mainContent, {
+                    childList: true,
+                    subtree: true
+                });
+            }
+        }
+        
+        // Visual Viewport API support (newer browsers)
+        if (window.visualViewport) {
+            window.visualViewport.addEventListener('resize', () => {
+                const heightDifference = window.innerHeight - window.visualViewport.height;
+                if (heightDifference > 150 && !isKeyboardOpen) {
+                    handleViewportChange();
+                } else if (heightDifference <= 150 && isKeyboardOpen) {
+                    handleViewportChange();
+                }
+            });
+        }
+    }
+    
+    // Wait for DOM to be ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initialize);
+    } else {
+        initialize();
+    }
+    
+    // Add utility class for JavaScript
+    document.documentElement.classList.add('js-mobile-keyboard-handler');
+    
+})();
diff --git a/html/kidsai/mobile-test.html b/html/kidsai/mobile-test.html
new file mode 100644
index 0000000..8319b58
--- /dev/null
+++ b/html/kidsai/mobile-test.html
@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>KidsAI Mobile Test</title>
+    <link rel="stylesheet" href="style.css">
+    <!-- Mobile keyboard handler -->
+    <script src="mobile-keyboard-handler.js"></script>
+    <style>
+        /* Add mobile simulator styling for testing */
+        @media (max-width: 768px) {
+            body::before {
+                content: "MOBILE VIEW ACTIVE";
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                background: #48bb78;
+                color: white;
+                text-align: center;
+                padding: 5px;
+                font-size: 12px;
+                z-index: 10000;
+            }
+            
+            .container {
+                margin-top: 25px;
+            }
+        }
+        
+        .debug-info {
+            position: fixed;
+            bottom: 10px;
+            right: 10px;
+            background: rgba(0,0,0,0.8);
+            color: white;
+            padding: 10px;
+            border-radius: 5px;
+            font-size: 12px;
+            z-index: 10001;
+        }
+    </style>
+</head>
+<body>
+    <div class="debug-info">
+        Screen: <span id="screen-size"></span><br>
+        Viewport: <span id="viewport-size"></span>
+    </div>
+    
+    <div class="container">
+        <!-- Header -->
+        <header class="header">
+            <div class="header-top">
+                <div class="language-switcher">
+                    <button class="lang-btn active">
+                        <span class="flag-icon">🇺🇸</span> English
+                    </button>
+                    <button class="lang-btn">
+                        <span class="flag-icon">🇩🇪</span> Deutsch
+                    </button>
+                </div>
+            </div>
+            <div class="logo">
+                <span class="brain-icon">🧠</span>
+                <h1>KidsAI Explorer</h1>
+            </div>
+            <p class="tagline">Think, Learn, Discover Together!</p>
+        </header>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <!-- Welcome Section -->
+            <section class="welcome-section">
+                <h2>Hi there, young explorer! 🚀</h2>
+                <p>Testing mobile responsiveness! This should look great on all screen sizes.</p>
+            </section>
+
+            <!-- Question Input Section -->
+            <section class="question-section">
+                <div class="input-container">
+                    <label for="question-input">What would you like to explore today?</label>
+                    <div class="input-wrapper">
+                        <textarea id="question-input" placeholder="Ask me anything!" rows="3"></textarea>
+                        <button class="ask-btn">
+                            <span class="rocket-icon">🚀</span>
+                            <span>Let's Explore!</span>
+                        </button>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Thinking Process Section (with conversation container test) -->
+            <section class="thinking-section chat-mode">
+                <div class="thinking-header">
+                    <h3><span class="lightbulb-icon">💡</span> Mobile Conversation Test</h3>
+                </div>
+                <div class="thinking-steps">
+                    <div class="conversation-container">
+                        <div class="chat-message ai-message visible">
+                            <div class="message-header">
+                                <span class="ai-avatar">🤖</span>
+                                <span class="ai-label">AI Teacher</span>
+                            </div>
+                            <div class="message-content">
+                                <p>This is a test message to see how the conversation container looks on mobile. It should be scrollable and properly sized.</p>
+                            </div>
+                        </div>
+                        
+                        <div class="chat-message user-message visible">
+                            <div class="message-content">
+                                <p>This is a user message. On mobile, it should take up most of the width and be easy to read.</p>
+                            </div>
+                        </div>
+                        
+                        <div class="chat-message ai-message visible">
+                            <div class="message-header">
+                                <span class="ai-avatar">🤖</span>
+                                <span class="ai-label">AI Teacher</span>
+                            </div>
+                            <div class="message-content">
+                                <p>Here's another message to test scrolling. The container should maintain its height and allow smooth scrolling on mobile devices.</p>
+                            </div>
+                        </div>
+                        
+                        <!-- More messages to test scrolling -->
+                        <div class="chat-message user-message visible">
+                            <div class="message-content">
+                                <p>Testing more content...</p>
+                            </div>
+                        </div>
+                        
+                        <div class="chat-message ai-message visible">
+                            <div class="message-header">
+                                <span class="ai-avatar">🤖</span>
+                                <span class="ai-label">AI Teacher</span>
+                            </div>
+                            <div class="message-content">
+                                <p>And even more content to ensure we can scroll properly on mobile devices.</p>
+                            </div>
+                        </div>
+                        
+                        <div class="chat-input-container visible">
+                            <div class="input-area">
+                                <textarea class="chat-textarea" placeholder="Type your thoughts here..."></textarea>
+                                <button class="reply-btn">
+                                    <span class="rocket-icon">🚀</span>
+                                    Send
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Action Buttons Test -->
+            <section class="welcome-section">
+                <h2>Button Test</h2>
+                <div class="action-buttons">
+                    <button class="action-btn research">
+                        <span class="research-icon">🔍</span>
+                        Research Ideas
+                    </button>
+                    <button class="action-btn experiment">
+                        <span class="experiment-icon">🧪</span>
+                        Try Experiments
+                    </button>
+                    <button class="action-btn discuss">
+                        <span class="discuss-icon">💬</span>
+                        Discuss Together
+                    </button>
+                </div>
+            </section>
+
+            <!-- Answer Reveal Test -->
+            <section class="answer-reveal-section">
+                <div class="reveal-prompt">
+                    <h4>Ready to see the answer?</h4>
+                    <p>You've done great thinking! Now let's see what the experts say.</p>
+                </div>
+                <button class="reveal-answer-btn">
+                    <span class="btn-icon">🎉</span>
+                    Reveal Answer
+                </button>
+            </section>
+        </main>
+    </div>
+
+    <script>
+        // Debug script to show screen dimensions
+        function updateDebugInfo() {
+            document.getElementById('screen-size').textContent = 
+                `${window.screen.width}x${window.screen.height}`;
+            document.getElementById('viewport-size').textContent = 
+                `${window.innerWidth}x${window.innerHeight}`;
+        }
+        
+        updateDebugInfo();
+        window.addEventListener('resize', updateDebugInfo);
+        window.addEventListener('orientationchange', updateDebugInfo);
+    </script>
+</body>
+</html>
diff --git a/html/kidsai/test-chat.html b/html/kidsai/test-chat.html
new file mode 100644
index 0000000..e69de29