Update app.py

app.py

@@ -76,49 +76,46 @@ with gr.Blocks() as gaia:
         fn=inject_js,
         js="""
         () => {
-            // Inject CSS
-            const style = document.createElement('style');
-            style.textContent = '.auto-expand textarea { overflow-y: hidden !important; min-height: 42px !important; }';
-            document.head.appendChild(style);
-            
+            const STYLE_ID = 'auto-expand-style';
+            if (!document.getElementById(STYLE_ID)) {
+                const style = document.createElement('style');
+                style.id = STYLE_ID;
+                style.textContent = '.auto-expand textarea { overflow-y: hidden !important; resize: none !important; min-height: 48px !important; }';
+                document.head.appendChild(style);
+            }
+
+            function resize(textarea) {
+                if (!textarea) return;
+                textarea.style.setProperty('height', '48px', 'important');
+                const maxHeight = 10 * 24;
+                const newHeight = Math.min(textarea.scrollHeight, maxHeight);
+                textarea.style.setProperty('height', newHeight + 'px', 'important');
+                if (textarea.scrollHeight > maxHeight) {
+                    textarea.style.setProperty('overflow-y', 'auto', 'important');
+                } else {
+                    textarea.style.setProperty('overflow-y', 'hidden', 'important');
+                }
+            }
+
             function setupAutoExpand() {
-                const textareas = document.querySelectorAll('.auto-expand textarea');
-                console.log('Found textareas:', textareas.length);
-                
-                textareas.forEach(textarea => {
+                const wrappers = document.querySelectorAll('.auto-expand textarea');
+                wrappers.forEach(textarea => {
                     if (textarea.dataset.autoExpandSetup) return;
                     textarea.dataset.autoExpandSetup = 'true';
-                    
-                    // Force CSS overrides
-                    textarea.style.overflowY = 'hidden';
-                    textarea.style.minHeight = '42px';
-                    
-                    function resize() {
-                        console.log('Resizing, scrollHeight:', textarea.scrollHeight);
-                        textarea.style.height = '42px';
-                        const newHeight = Math.min(textarea.scrollHeight, 240);
-                        textarea.style.height = newHeight + 'px';
-                        console.log('Set height to:', newHeight);
-                    }
-                    
-                    textarea.addEventListener('input', resize);
-                    textarea.addEventListener('change', resize);
-                    resize();
-                    
-                    const observer = new MutationObserver(resize);
-                    observer.observe(textarea, { 
-                        attributes: true,
-                        childList: true,
-                        characterData: true,
-                        subtree: true
-                    });
+
+                    resize(textarea);
+                    textarea.addEventListener('input', () => resize(textarea));
+                    textarea.addEventListener('change', () => resize(textarea));
+
+                    const observer = new MutationObserver(() => resize(textarea));
+                    observer.observe(textarea, { attributes: true, childList: true, characterData: true, subtree: true });
                 });
             }
-            
+
             setupAutoExpand();
-            setTimeout(setupAutoExpand, 500);
-            setTimeout(setupAutoExpand, 1000);
-            
+            const intervals = [100, 500, 1000, 2000];
+            intervals.forEach(delay => setTimeout(setupAutoExpand, delay));
+
             const docObserver = new MutationObserver(setupAutoExpand);
             docObserver.observe(document.body, { childList: true, subtree: true });
         }