script.js

// DOM要素の取得
const chatMessages = document.getElementById('chatMessages');
const messageInput = document.getElementById('messageInput');
const sendButton = document.getElementById('sendButton');

// メッセージ送信関数
async function sendMessage() {
    const message = messageInput.value.trim();
    
    if (!message) {
        return;
    }
    // ユーザーメッセージを表示
    addMessage(message, 'user');
   
    // 入力フィールドをクリア
    messageInput.value = '';
    
    // 送信ボタンを無効化
    sendButton.disabled = true;
    sendButton.textContent = '送信中...';

    try {
        // APIにリクエスト送信
        const response = await fetch('/api/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ message })
        });

        if (!response.ok) {
            throw new Error('サーバーエラーが発生しました');
        }

        const data = await response.json();
        
        // AI回答を表示
        addMessage(data.reply, 'ai');
        
    } catch (error) {
        console.error('エラー:', error);
        addMessage('申し訳ございません。エラーが発生しました。もう一度お試しください。', 'ai');
    } finally {
        // 送信ボタンを有効化
        sendButton.disabled = false;
        sendButton.textContent = '送信';
        
        // 入力フィールドにフォーカス
        messageInput.focus();
    }
}

// メッセージを画面に追加
function addMessage(content, type) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${type}-message`;
    
    const contentDiv = document.createElement('div');
    contentDiv.className = 'message-content';
    contentDiv.textContent = content;
    
    messageDiv.appendChild(contentDiv);
    chatMessages.appendChild(messageDiv);
    
    // 最新メッセージまでスクロール
    chatMessages.scrollTop = chatMessages.scrollHeight;
}

// イベントリスナー
sendButton.addEventListener('click', sendMessage);

messageInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage();
    }
});

// ページ読み込み時に入力フィールドにフォーカス
window.addEventListener('load', () => {
    messageInput.focus();
});