first commit

AIEC-server/js/chat-input-height-observer.js

@@ -0,0 +1,71 @@
+/**
+ * 动态监测聊天输入框高度变化
+ * 当输入框高度变化时（如多行文本扩展），自动更新CSS变量
+ */
+
+(function() {
+    'use strict';
+
+    document.addEventListener('DOMContentLoaded', function() {
+        // 获取聊天输入框容器
+        const chatInputContainer = document.getElementById('chatModeInput');
+        
+        if (!chatInputContainer) {
+            console.log('Chat input container not found, will retry when chat mode is activated');
+            return;
+        }
+
+        // 创建 ResizeObserver 监测高度变化
+        const resizeObserver = new ResizeObserver(entries => {
+            for (let entry of entries) {
+                const height = entry.contentRect.height;
+                
+                // 更新CSS变量
+                document.documentElement.style.setProperty('--chat-input-height', height + 'px');
+                
+                // 调试信息
+                console.log('Chat input height updated:', height + 'px');
+            }
+        });
+
+        // 开始观察
+        resizeObserver.observe(chatInputContainer);
+
+        // 初始设置高度
+        const initialHeight = chatInputContainer.offsetHeight;
+        if (initialHeight > 0) {
+            document.documentElement.style.setProperty('--chat-input-height', initialHeight + 'px');
+        }
+
+        // 监听聊天模式切换
+        const observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                    // 检查是否进入聊天模式
+                    if (document.body.classList.contains('chat-mode')) {
+                        // 重新计算高度
+                        setTimeout(() => {
+                            const chatInput = document.getElementById('chatModeInput');
+                            if (chatInput) {
+                                const height = chatInput.offsetHeight;
+                                document.documentElement.style.setProperty('--chat-input-height', height + 'px');
+                            }
+                        }, 100);
+                    }
+                }
+            });
+        });
+
+        // 观察body的class变化
+        observer.observe(document.body, { attributes: true });
+    });
+
+    // 处理窗口大小变化
+    window.addEventListener('resize', function() {
+        const chatInputContainer = document.getElementById('chatModeInput');
+        if (chatInputContainer && document.body.classList.contains('chat-mode')) {
+            const height = chatInputContainer.offsetHeight;
+            document.documentElement.style.setProperty('--chat-input-height', height + 'px');
+        }
+    });
+})();