forked from PriyaGhosal/BuddyTrail
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request PriyaGhosal#714 from Ujjwal5705/main
Designed a new functional TrailBot
Showing
5 changed files
with
203 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| body { | ||
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | ||
| background-color: #f4f4f4; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| #chatbot { | ||
| width: 350px; | ||
| border: 1px solid #e2e2e2; | ||
| border-radius: 10px; | ||
| background-color: #fff; | ||
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); | ||
| position: fixed; | ||
| bottom: 20px; | ||
| right: 20px; | ||
| display: none; | ||
| flex-direction: column; | ||
| transition: all 0.3s ease; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| #chatbox { | ||
| height: 350px; | ||
| overflow-y: auto; | ||
| padding: 15px; | ||
| border-bottom: 1px solid #e2e2e2; | ||
| background-color: #f9f9f9; | ||
| } | ||
|
|
||
| #messages { | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .user, .bot { | ||
| padding: 8px 12px; | ||
| border-radius: 15px; | ||
| max-width: 70%; | ||
| word-wrap: break-word; | ||
| margin: 5px 0; | ||
| } | ||
|
|
||
| .user { | ||
| background-color: #007bff; | ||
| color: #fff; | ||
| text-align: right; | ||
| font-size: 15px; | ||
| } | ||
|
|
||
| .bot { | ||
| background-color: #e1f5fe; | ||
| color: #333; | ||
| text-align: left; | ||
| font-size: 15px; | ||
| } | ||
|
|
||
| #user-input { | ||
| width: calc(100% - 22px); | ||
| padding: 10px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 5px; | ||
| box-sizing: border-box; | ||
| margin: 10px 0; | ||
| } | ||
|
|
||
| #send-button { | ||
| padding: 10px 15px; | ||
| background-color: #007bff; | ||
| color: #fff; | ||
| border: none; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s; | ||
| } | ||
|
|
||
| #send-button:hover { | ||
| background-color: #0056b3; | ||
| } | ||
|
|
||
| #chat-icon { | ||
| width: 60px; | ||
| height: 60px; | ||
| position: fixed; | ||
| bottom: 20px; | ||
| right: 20px; | ||
| background-color: #007bff; | ||
| color: #fff; | ||
| border-radius: 50%; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| cursor: pointer; | ||
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); | ||
| transition: background-color 0.3s; | ||
| } | ||
|
|
||
| #chat-icon:hover { | ||
| background-color: #0056b3; | ||
| } | ||
|
|
||
| #chat-header { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| background-color: #007bff; | ||
| color: #fff; | ||
| padding-left: 10px; | ||
| font-size: 1.5rem; | ||
| } | ||
|
|
||
| #close-button { | ||
| background: none; | ||
| border: none; | ||
| padding: 15px; | ||
| color: rgb(229, 63, 63); | ||
| font-size: 1.5rem; | ||
| font-weight: 700; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| #close-button:hover { | ||
| color: #ffcccc; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| const messagesDiv = document.getElementById('messages'); | ||
| const userInput = document.getElementById('user-input'); | ||
| const sendButton = document.getElementById('send-button'); | ||
| const chatIcon = document.getElementById('chat-icon'); | ||
| const chatbotContainer = document.getElementById('chatbot'); | ||
|
|
||
| // Function to append messages to the chatbox | ||
| function appendMessage(sender, text) { | ||
| const messageElement = document.createElement('div'); | ||
| messageElement.classList.add(sender); | ||
| messageElement.textContent = text; | ||
| messagesDiv.appendChild(messageElement); | ||
| messagesDiv.scrollTop = messagesDiv.scrollHeight; // Scroll to the bottom | ||
| } | ||
|
|
||
| // Simple bot responses | ||
| function getBotResponse(userText) { | ||
| userText = userText.toLowerCase(); | ||
|
|
||
| if (userText.includes('hello')) { | ||
| return "Hello! How can I help you today?"; | ||
| } else if (userText.includes('how are you')) { | ||
| return "I'm just a bot, but thanks for asking!"; | ||
| } else if (userText.includes('bye')) { | ||
| return "Goodbye! Have a great day!"; | ||
| } else if (userText.includes('what is buddytrail?') || userText.includes('what is buddytrail ?') || userText.includes('what is buddytrail')){ | ||
| return "BuddyTrail is your premier travel companion designed to assist you in planning and organizing your trips. Whether you are arranging a family vacation or an adventure with friends, BuddyTrail helps you discover and explore remarkable destinations. We simplify the process of finding the best hotels and securing affordable flights, ensuring a seamless travel experience from start to finish."; | ||
| } else { | ||
| return "I'm sorry, I don't understand that."; | ||
| } | ||
| } | ||
|
|
||
| // Show/hide chatbot on icon click | ||
| chatIcon.addEventListener('click', () => { | ||
| const isVisible = chatbotContainer.style.display === 'flex'; | ||
| chatbotContainer.style.display = isVisible ? 'none' : 'flex'; | ||
| console.log("Chatbot visibility: ", chatbotContainer.style.display); // Debugging statement | ||
| }); | ||
|
|
||
| // Event listener for the send button | ||
| sendButton.addEventListener('click', () => { | ||
| const userText = userInput.value; | ||
| if (userText) { | ||
| appendMessage('user', userText); | ||
| userInput.value = ''; // Clear input field | ||
| const botResponse = getBotResponse(userText); | ||
| appendMessage('bot', botResponse); | ||
| } | ||
| }); | ||
|
|
||
| // Optional: Allow pressing 'Enter' to send messages | ||
| userInput.addEventListener('keypress', (event) => { | ||
| if (event.key === 'Enter') { | ||
| sendButton.click(); | ||
| } | ||
| }); | ||
|
|
||
| // Event listener for the close button | ||
| document.getElementById('close-button').addEventListener('click', () => { | ||
| chatbotContainer.style.display = 'none'; // Hide chatbot on close | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters