Appointment Chat Box

.chat-container { width: 300px; height: 400px; border: 1px solid #ccc; border-radius: 5px; overflow: hidden; display: flex; flex-direction: column; } .chat-log { flex-grow: 1; padding: 10px; overflow-y: scroll; background-color: #f9f9f9; } .input-area { display: flex; padding: 10px; border-top: 1px solid #ccc; } #user-input { flex-grow: 1; padding: 8px; border: 1px solid #ddd; border-radius: 3px; margin-right: 5px; } #send-button { padding: 8px 12px; border: none; border-radius: 3px; background-color: #007bff; color: white; cursor: pointer; } .user-message, .bot-message, .system-message { margin-bottom: 10px; padding: 8px 12px; border-radius: 5px; clear: both; } .user-message { background-color: #e2f0cb; float: right; } .bot-message { background-color: #f0f0f0; float: left; } .system-message { background-color: #ddd; color: #333; text-align: center; } /* Calendar Styles */ .calendar { background-color: #fff; border: 1px solid #ccc; border-radius: 5px; margin: 10px; padding: 10px; } .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .calendar-header button { padding: 5px 10px; border: none; background-color: #eee; cursor: pointer; border-radius: 3px; } .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .day-name { text-align: center; font-weight: bold; padding: 5px; } .day { padding: 5px; text-align: center; border: 1px solid #eee; cursor: pointer; } .day.selected { background-color: #007bff; color: white; } .day:hover { background-color: #f0f0f0; } const chatLog = document.getElementById('chat-log'); const userInput = document.getElementById('user-input'); const sendButton = document.getElementById('send-button'); const calendarDiv = document.getElementById('calendar'); const currentMonthDisplay = document.getElementById('current-month'); const daysContainer = document.getElementById('days'); const prevMonthButton = document.getElementById('prev-month'); const nextMonthButton = document.getElementById('next-month'); let bookingStage = 'welcome'; // Track booking stage let userName = null; let userEmail = null; let userPhone = null; let appointmentDay = null; let appointmentTime = null; let selectedDate = null; let currentDate = new Date(); displayBotMessage("Welcome! I'm here to help you book or reschedule appointments."); displayBotMessage("First, can I get your name please?"); bookingStage = 'waiting_for_name'; sendButton.addEventListener('click', sendMessage); userInput.addEventListener('keypress', function(event) { if (event.key === 'Enter') { sendMessage(); } }); prevMonthButton.addEventListener('click', goToPreviousMonth); nextMonthButton.addEventListener('click', goToNextMonth); function sendMessage() { const message = userInput.value; if (message.trim() !== '') { displayMessage(message, 'user'); userInput.value = ''; processMessage(message); } } function displayMessage(message, sender) { const messageDiv = document.createElement('div'); messageDiv.classList.add(`${sender}-message`); messageDiv.textContent = message; chatLog.appendChild(messageDiv); chatLog.scrollTop = chatLog.scrollHeight; } function displayBotMessage(message) { const messageDiv = document.createElement('div'); messageDiv.classList.add('bot-message'); messageDiv.textContent = message; chatLog.appendChild(messageDiv); chatLog.scrollTop = chatLog.scrollHeight; } function displaySystemMessage(message) { const messageDiv = document.createElement('div'); messageDiv.classList.add('system-message'); messageDiv.textContent = message; chatLog.appendChild(messageDiv); chatLog.scrollTop = chatLog.scrollHeight; } function processMessage(message) { message = message.toLowerCase(); let botResponse = ""; if (bookingStage === 'waiting_for_name') { userName = message; displayBotMessage(`Thanks, ${userName}! What's your email address?`); bookingStage = 'waiting_for_email'; } else if (bookingStage === 'waiting_for_email') { if (isValidEmail(message)) { userEmail = message; displayBotMessage(`And your phone number, please?`); bookingStage = 'waiting_for_phone'; } else { displayBotMessage("That doesn't look like a valid email. Could you check it again?"); } } else if (bookingStage === 'waiting_for_phone') { if (isValidPhone(message)) { userPhone = message; displaySystemMessage("Contact details received and saved to CRM."); // Simulate CRM push bookingStage = 'idle'; displayBotMessage(`Okay ${userName}, how can I help you today? Would you like to book or reschedule an appointment?`); } else { displayBotMessage("Please enter a valid phone number."); } } else if (bookingStage === 'waiting_for_day') { // Calendar is displayed, date selection handled by calendar event listeners if (message === 'cancel') { calendarDiv.style.display = 'none'; bookingStage = 'idle'; displayBotMessage("Okay, appointment booking cancelled. How else can I help?"); } } else if (bookingStage === 'waiting_for_time') { if (isValidTime(message)) { appointmentTime = message; bookingStage = 'idle'; calendarDiv.style.display = 'none'; displaySystemMessage(`Appointment booked for ${appointmentDay} at ${appointmentTime} and saved to calendar.`); // Simulate calendar integration displayBotMessage(`Excellent, you are all booked for ${appointmentDay} at ${appointmentTime}. We look forward to seeing you!`); } else { displayBotMessage("That time format doesn't look quite right. Could you provide a time like '10am', '2:30pm' or similar?"); } } else if (bookingStage === 'idle') { if (message.includes('book') || message.includes('appointment')) { bookingStage = 'waiting_for_day'; displayBotMessage("Okay, let's book an appointment. Please select a day from the calendar below, or type 'cancel' to stop booking."); showCalendar(); } else if (message.includes('reschedule') || message.includes('change')) { bookingStage = 'reschedule_request'; displayBotMessage("Sure, let's reschedule. What is the reason for rescheduling?"); } else if (message.includes('hello') || message.includes('hi') || message.includes('hey')) { displayBotMessage("Hello again! How can I help you today?"); } else if (message.includes('thank you') || message.includes('thanks')) { displayBotMessage("You're welcome! Is there anything else I can help with?"); } else { displayBotMessage("I'm here to book or reschedule appointments. How can I help?"); } } else if (bookingStage === 'reschedule_request') { displayBotMessage("Thank you for the information. Let's find a new time for you. Please select a day from the calendar below to reschedule, or type 'cancel' to stop rescheduling."); bookingStage = 'waiting_for_day'; // Go back to day selection with calendar showCalendar(); } else { displayBotMessage("Sorry, I didn't understand that. Please say 'book appointment' or 'reschedule appointment'."); } } function isValidEmail(email) { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegex.test(email); } function isValidPhone(phone) { const phoneRegex = /^\d{10}$/; // Basic 10-digit number validation - adjust as needed return phoneRegex.test(phone.replace(/[^0-9]/g, '')); // Remove non-digits and test } function isValidTime(time) { const timeRegex = /^(?:(?:[1-9]|1[0-2]):[0-5][0-9](?:am|pm))|(?:(?:[0-9]|[1-2][0-3]):[0-5][0-9])$/i; return timeRegex.test(time); } // Calendar functions function showCalendar() { calendarDiv.style.display = 'block'; generateCalendar(); } function generateCalendar() { currentMonthDisplay.textContent = `${getMonthName(currentDate.getMonth())} ${currentDate.getFullYear()}`; daysContainer.innerHTML = ''; // Clear previous calendar const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1); const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate(); const startingDayOfWeek = firstDayOfMonth.getDay(); // 0 for Sunday, 1 for Monday, etc. const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; dayNames.forEach(dayName => { const dayNameDiv = document.createElement('div'); dayNameDiv.classList.add('day-name'); dayNameDiv.textContent = dayName; daysContainer.appendChild(dayNameDiv); }); // Add empty days for the days before the first day of the month for (let i = 0; i < startingDayOfWeek; i++) { const emptyDay = document.createElement('div'); daysContainer.appendChild(emptyDay); } for (let day = 1; day <= daysInMonth; day++) { const dayDiv = document.createElement('div'); dayDiv.classList.add('day'); dayDiv.textContent = day; dayDiv.addEventListener('click', function() { selectDate(day); }); daysContainer.appendChild(dayDiv); } } function selectDate(day) { const month = currentDate.getMonth() + 1; // Month is 0-indexed const year = currentDate.getFullYear(); selectedDate = new Date(year, month - 1, day); // Store selected date as Date object appointmentDay = `${getMonthName(currentDate.getMonth())} ${day}, ${year}`; // Format for display calendarDiv.style.display = 'none'; // Hide calendar after selection bookingStage = 'waiting_for_time'; displayBotMessage(`You've selected ${appointmentDay}. What time would you like to book?`); highlightSelectedDay(day); } function highlightSelectedDay(selectedDay) { document.querySelectorAll('.day').forEach(dayElement => { dayElement.classList.remove('selected'); if (parseInt(dayElement.textContent) === selectedDay) { dayElement.classList.add('selected'); } }); } function goToPreviousMonth() { currentDate.setMonth(currentDate.getMonth() - 1); generateCalendar(); } function goToNextMonth() { currentDate.setMonth(currentDate.getMonth() + 1); generateCalendar(); } function getMonthName(monthIndex) { const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; return monthNames[monthIndex]; }