feat(chat): add chat interface and integrate with BellaAI core

- Implement chat interface with toggle functionality
- Add chat control panel to main UI
- Integrate chat with BellaAI for message processing
- Include test chat interface for debugging
- Add styling for chat components
- Support both local and cloud AI providers

script.js

@@ -1,4 +1,6 @@
-import BellaAI from './core.js';
+// 导入BellaAI核心模块
+import { BellaAI } from './core.js';
+import { ChatInterface } from './chatInterface.js';
 
 document.addEventListener('DOMContentLoaded', async function() {
     // --- Get all necessary DOM elements first ---
@@ -11,16 +13,77 @@ document.addEventListener('DOMContentLoaded', async function() {
 
     // --- AI Core Initialization ---
     let bellaAI;
+    let chatInterface;
+    
+    // 首先初始化聊天界面（不依赖AI）
+    try {
+        chatInterface = new ChatInterface();
+        console.log('聊天界面初始化成功');
+        console.log('ChatInterface实例创建完成:', chatInterface);
+        console.log('聊天容器元素:', chatInterface.chatContainer);
+        console.log('聊天容器是否在DOM中:', document.body.contains(chatInterface.chatContainer));
+        
+        // 自动显示聊天界面（调试用）
+        setTimeout(() => {
+            console.log('尝试自动显示聊天界面...');
+            chatInterface.show();
+            console.log('聊天界面已自动显示');
+            console.log('聊天界面可见性:', chatInterface.getVisibility());
+            console.log('聊天容器类名:', chatInterface.chatContainer.className);
+        }, 2000);
+    } catch (error) {
+        console.error('聊天界面初始化失败:', error);
+    }
+    
+    // 然后尝试初始化AI核心
     micButton.disabled = true;
     transcriptDiv.textContent = '正在唤醒贝拉的核心...';
     try {
         bellaAI = await BellaAI.getInstance();
+        console.log('Bella AI 初始化成功');
+        
+        // 设置聊天界面的AI回调函数
+        if (chatInterface) {
+            chatInterface.onMessageSend = async (message) => {
+                try {
+                    chatInterface.showTypingIndicator();
+                    const response = await bellaAI.think(message);
+                    chatInterface.hideTypingIndicator();
+                    chatInterface.addMessage('assistant', response);
+                } catch (error) {
+                    console.error('AI处理错误:', error);
+                    chatInterface.hideTypingIndicator();
+                    chatInterface.addMessage('assistant', '抱歉，我现在有点困惑，请稍后再试...');
+                }
+            };
+        }
+        
         micButton.disabled = false;
         transcriptDiv.textContent = '贝拉已准备好，请点击麦克风开始对话。';
     } catch (error) {
         console.error('Failed to initialize Bella AI:', error);
-        transcriptDiv.textContent = '唤醒贝拉时遇到问题，请检查控制台信息。';
-        // Keep the app running with visual features even if AI fails
+        transcriptDiv.textContent = 'AI模型加载失败，但聊天界面仍可使用。';
+        
+        // 即使AI失败，也提供基本的聊天功能
+        if (chatInterface) {
+            chatInterface.onMessageSend = async (message) => {
+                chatInterface.showTypingIndicator();
+                setTimeout(() => {
+                    chatInterface.hideTypingIndicator();
+                    const fallbackResponses = [
+                        '我的AI核心还在加载中，请稍后再试...',
+                        '抱歉，我现在无法正常思考，但我会努力学习的！',
+                        '我的大脑还在启动中，请给我一点时间...',
+                        '系统正在更新，暂时无法提供智能回复。'
+                    ];
+                    const randomResponse = fallbackResponses[Math.floor(Math.random() * fallbackResponses.length)];
+                    chatInterface.addMessage('assistant', randomResponse);
+                }, 1000);
+            };
+        }
+        
+        // 禁用语音功能，但保持界面可用
+        micButton.disabled = true;
     }
 
     // --- Loading screen handling ---
@@ -29,6 +92,11 @@ document.addEventListener('DOMContentLoaded', async function() {
         // Hide it after the animation to prevent it from blocking interactions
         setTimeout(() => {
             loadingScreen.style.display = 'none';
+            // 显示聊天控制面板
+            const chatControlPanel = document.querySelector('.chat-control-panel');
+            if (chatControlPanel) {
+                chatControlPanel.classList.add('visible');
+            }
         }, 500); // This time should match the transition time in CSS
     }, 1500); // Start fading out after 1.5 seconds
 
@@ -83,6 +151,55 @@ document.addEventListener('DOMContentLoaded', async function() {
 
     // 初始启动
     activeVideo.addEventListener('ended', switchVideo, { once: true });
+    
+    // 聊天控制按钮事件
+    const chatToggleBtn = document.getElementById('chat-toggle-btn');
+    const chatTestBtn = document.getElementById('chat-test-btn');
+    
+    if (chatToggleBtn) {
+        chatToggleBtn.addEventListener('click', () => {
+            if (chatInterface) {
+                console.log('聊天按钮被点击');
+                console.log('点击前聊天界面状态:', chatInterface.getVisibility());
+                console.log('点击前聊天容器类名:', chatInterface.chatContainer.className);
+                
+                chatInterface.toggle();
+                
+                console.log('点击后聊天界面状态:', chatInterface.getVisibility());
+                console.log('点击后聊天容器类名:', chatInterface.chatContainer.className);
+                console.log('聊天界面切换，当前状态:', chatInterface.getVisibility());
+                
+                // 更新按钮状态
+                const isVisible = chatInterface.getVisibility();
+                chatToggleBtn.innerHTML = isVisible ? 
+                    '<i class="fas fa-times"></i><span>关闭</span>' : 
+                    '<i class="fas fa-comments"></i><span>聊天</span>';
+                console.log('按钮文本更新为:', chatToggleBtn.innerHTML);
+            }
+        });
+    }
+    
+    if (chatTestBtn) {
+        chatTestBtn.addEventListener('click', () => {
+            if (chatInterface) {
+                const testMessages = [
+                    '你好！我是贝拉，很高兴见到你！',
+                    '聊天界面工作正常，所有功能都已就绪。',
+                    '这是一条测试消息，用来验证界面功能。'
+                ];
+                const randomMessage = testMessages[Math.floor(Math.random() * testMessages.length)];
+                chatInterface.addMessage('assistant', randomMessage);
+                
+                // 如果聊天界面未显示，则自动显示
+                if (!chatInterface.getVisibility()) {
+                    chatInterface.show();
+                    chatToggleBtn.innerHTML = '<i class="fas fa-times"></i><span>关闭</span>';
+                }
+                
+                console.log('测试消息已添加:', randomMessage);
+            }
+        });
+    }
 
 
     // --- 语音识别核心 ---
@@ -117,6 +234,11 @@ document.addEventListener('DOMContentLoaded', async function() {
                 const userText = final_transcript.trim();
                 transcriptContainer.textContent = `你: ${userText}`;
 
+                // 如果聊天界面已打开，也在聊天窗口中显示
+                if (chatInterface && chatInterface.getVisibility()) {
+                    chatInterface.addMessage('user', userText);
+                }
+
                 try {
                     // Let Bella think
                     const thinkingText = document.createElement('p');
@@ -135,6 +257,11 @@ document.addEventListener('DOMContentLoaded', async function() {
                     bellaText.style.marginTop = '10px';
                     transcriptContainer.appendChild(bellaText);
 
+                    // 如果聊天界面已打开，也在聊天窗口中显示
+                    if (chatInterface && chatInterface.getVisibility()) {
+                        chatInterface.addMessage('assistant', response);
+                    }
+
                     // TTS功能暂时禁用，将在下一阶段激活
                     // TODO: 激活语音合成功能
                     // const audioData = await bellaAI.speak(response);
@@ -146,9 +273,14 @@ document.addEventListener('DOMContentLoaded', async function() {
                 } catch (error) {
                     console.error('Bella AI processing error:', error);
                     const errorText = document.createElement('p');
-                    errorText.textContent = '贝拉处理时遇到问题，但她还在努力学习中...';
+                    const errorMsg = '贝拉处理时遇到问题，但她还在努力学习中...';
+                    errorText.textContent = errorMsg;
                     errorText.style.color = '#ff9999';
                     transcriptContainer.appendChild(errorText);
+                    
+                    if (chatInterface && chatInterface.getVisibility()) {
+                        chatInterface.addMessage('assistant', errorMsg);
+                    }
                 }
             }
         };