doubaochat/script.js

// 消息容器
const messagesContainer = document.getElementById('messages');
const userInput = document.getElementById('user-input');
const sendBtn = document.getElementById('send-btn');

// API配置 - 这里将在后续连接到实际的后端API
const API_URL = 'http://localhost:8000/api/chat';

// 添加消息到聊天容器
function addMessage(text, isUser = false) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`;
    
    const avatarIcon = isUser ? 'fa-user' : 'fa-robot';
    const avatarClass = isUser ? 'user-avatar' : 'bot-avatar';
    
    messageDiv.innerHTML = `
        <div class="message-content">
            <div class="avatar ${avatarClass}">
                <i class="fas ${avatarIcon}"></i>
            </div>
            <div class="message-text">
                <p>${text}</p>
            </div>
        </div>
    `;
    
    messagesContainer.appendChild(messageDiv);
    // 滚动到最新消息
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
}

// 发送消息到API
async function sendMessage() {
    const text = userInput.value.trim();
    if (!text) return;
    
    // 添加用户消息
    addMessage(text, true);
    
    // 清空输入框
    userInput.value = '';
    userInput.style.height = 'auto';
    
    // 添加加载状态
    const loadingDiv = document.createElement('div');
    loadingDiv.className = 'message bot-message';
    loadingDiv.innerHTML = `
        <div class="message-content">
            <div class="avatar bot-avatar">
                <i class="fas fa-robot"></i>
            </div>
            <div class="message-text">
                <div class="loading">
                    <span class="loading-dot"></span>
                    <span class="loading-dot"></span>
                    <span class="loading-dot"></span>
                </div>
            </div>
        </div>
    `;
    messagesContainer.appendChild(loadingDiv);
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
    
    try {
        // 调用API获取回复
        const response = await fetch(API_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                message: text
            })
        });
        
        if (!response.ok) {
            throw new Error('API请求失败');
        }
        
        const data = await response.json();
        
        // 移除加载状态
        loadingDiv.remove();
        
        // 添加机器人回复
        addMessage(data.response);
    } catch (error) {
        // 移除加载状态
        loadingDiv.remove();
        
        // 添加错误消息
        addMessage('抱歉，暂时无法为您提供服务，请稍后重试。');
        console.error('发送消息失败:', error);
    }
}

// 处理输入框高度自适应
function adjustTextareaHeight() {
    userInput.style.height = 'auto';
    userInput.style.height = Math.min(userInput.scrollHeight, 120) + 'px';
}

// 事件监听
userInput.addEventListener('input', adjustTextareaHeight);

// 回车键发送消息，Shift+Enter换行
userInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage();
    }
});

// 发送按钮点击事件
sendBtn.addEventListener('click', sendMessage);

// 初始化 - 添加一些CSS样式到head
const style = document.createElement('style');
style.textContent = `
    /* 加载动画 */
    .loading {
        display: flex;
        gap: 5px;
    }
    
    .loading-dot {
        width: 8px;
        height: 8px;
        background-color: #1a73e8;
        border-radius: 50%;
        animation: loading 1.4s infinite ease-in-out both;
    }
    
    .loading-dot:nth-child(1) {
        animation-delay: -0.32s;
    }
    
    .loading-dot:nth-child(2) {
        animation-delay: -0.16s;
    }
    
    @keyframes loading {
        0%, 80%, 100% {
            transform: scale(0);
            opacity: 0.5;
        }
        40% {
            transform: scale(1);
            opacity: 1;
        }
    }
`;
document.head.appendChild(style);

// 初始欢迎消息已经在HTML中定义，这里可以添加一些示例对话
// addMessage('你好！我是豆包AI，很高兴为你服务。有什么我可以帮助你的吗？');