body { font-family: Arial, sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .chat-container { background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 300px; padding: 20px; } .chat-box { border: 1px solid #ddd; border-radius: 4px; height: 200px; margin-bottom: 10px; overflow-y: auto; padding: 10px; } input[type="text"] { width: 70%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; } button { padding: 10px; border: none; background-color: #28a745; color: #fff; border-radius: 4px; cursor: pointer; } button:hover { background-color: #218838; } // Получаем элементы из DOM const chatBox = document.getElementById('chat-box'); const userInput = document.getElementById('user-input'); const sendButton = document.getElementById('send-button'); // Функция для добавления сообщений в окно чата function addMessageToChat(message, sender) { const messageElement = document.createElement('div'); messageElement.textContent = `${sender}: ${message}`; chatBox.appendChild(messageElement); chatBox.scrollTop = chatBox.scrollHeight; // Прокручиваем вниз } // Функция для обработки сообщения пользователя function handleUserMessage() { const userMessage = userInput.value.trim(); if (userMessage) { addMessageToChat(userMessage, 'Вы'); userInput.value = ''; // Очищаем поле ввода // Ответ бота (можно модифицировать логику) setTimeout(() => { const botResponse = getBotResponse(userMessage); addMessageToChat(botResponse, 'Бот'); }, 1000); } } // Простейшая логика ответа от бота function getBotResponse(userMessage) { // Это просто пример. Можете добавить свою логику здесь. return `Вы написали: "${userMessage}"`; } // Обработчик события нажатия кнопки sendButton.addEventListener('click', handleUserMessage); // Обработчик клавиатурного события (нажать Enter) userInput.addEventListener('keypress', function(event) { if (event.key === 'Enter') { handleUserMessage(); } });