-
Notifications
You must be signed in to change notification settings - Fork 119
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 #175 from Mehtarishita/main
Chatbot routes and css fix
- Loading branch information
Showing
4 changed files
with
173 additions
and
21 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,86 @@ | ||
| .chatbot-container { | ||
| position: fixed; | ||
| display: flex; | ||
| flex-direction: column; | ||
| right: 20px; | ||
| z-index: 1000; | ||
| } | ||
|
|
||
| .chatbot { | ||
| --tw-bg-opacity: 1; | ||
| background-color: rgb(191 219 254 / var(--tw-bg-opacity)); | ||
| border-radius: 50%; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
| width: 60px; | ||
| height: 60px; | ||
| cursor: pointer; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .chatbot img { | ||
| width: 40px; | ||
| height: 40px; | ||
| } | ||
|
|
||
| .chatbox { | ||
| background-color: #f1f1f1; | ||
| border: 1px solid #ccc; | ||
| border-radius: 10px; | ||
| width: 300px; | ||
| position: absolute; | ||
| bottom: 70px; | ||
| right: 0; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: 15px; | ||
| } | ||
|
|
||
| .chatbox h3 { | ||
| margin: 0; | ||
| padding-bottom: 10px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .chat-output { | ||
| flex-grow: 1; | ||
| background-color: #fff; | ||
| border-radius: 5px; | ||
| padding: 10px; | ||
| margin-bottom: 10px; | ||
| overflow-y: auto; | ||
| max-height: 200px; | ||
| } | ||
|
|
||
| .chat-output p { | ||
| margin: 5px 0; | ||
| padding: 5px 10px; | ||
| background-color: #e0e0e0; | ||
| border-radius: 5px; | ||
| } | ||
|
|
||
| #chatInput { | ||
| resize: none; | ||
| padding: 10px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 5px; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| #sendMessage { | ||
| --tw-bg-opacity: 1; | ||
| background-color: rgb(59 130 246 / var(--tw-bg-opacity)); | ||
| color: white; | ||
| border: none; | ||
| padding: 10px; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| #sendMessage:hover { | ||
| --tw-bg-opacity: 2; | ||
| background-color: rgb(28 97 211 / var(--tw-bg-opacity)); | ||
|
|
||
| } |
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 |
|---|---|---|
| @@ -1,9 +1,79 @@ | ||
| import React from 'react' | ||
| import React, { useState } from 'react'; | ||
| import './chatbot.css'; // Import the CSS file | ||
| import chatbotsvg from '../assets/svg/chatbot.svg'; // Import the chatbot icon | ||
|
|
||
| const Chatbot = () => { | ||
| const [chatboxOpen, setChatboxOpen] = useState(false); | ||
| const [chatInput, setChatInput] = useState(''); | ||
| const [chatOutput, setChatOutput] = useState([]); | ||
| const [welcomeMessageDisplayed, setWelcomeMessageDisplayed] = useState(false); | ||
|
|
||
| const responses = { | ||
| "can you help me navigate to platform 5": "You can easily navigate to Platform 5 using Navigation in the menu. Anything else I can help you with?", | ||
| "yes where can i find luggage storage facilities": "You can check the availability of cloakrooms in booking and book the same.", | ||
| "hello": "Hi there! How can I help you today?", | ||
| // Add more responses as needed | ||
| }; | ||
|
|
||
| const handleChatIconClick = () => { | ||
| setChatboxOpen(!chatboxOpen); | ||
|
|
||
| if (!welcomeMessageDisplayed && !chatboxOpen) { | ||
| setChatOutput([...chatOutput, "Hi I am Saarthi, your Platform Guide. How can I help you today?"]); | ||
| setWelcomeMessageDisplayed(true); | ||
| } | ||
| }; | ||
|
|
||
| const handleSendMessage = () => { | ||
| if (chatInput.trim()) { | ||
| const userMessages = chatInput.trim().split(/[?.!]+/); // Split input by sentence terminators | ||
| let updatedChatOutput = []; | ||
|
|
||
| userMessages.forEach((message) => { | ||
| const cleanedMessage = message.trim().toLowerCase().replace(/[?,.!]/g, ''); // Clean input | ||
| if (cleanedMessage in responses) { | ||
| updatedChatOutput.push(responses[cleanedMessage]); | ||
| } else { | ||
| updatedChatOutput.push("I'm sorry, I don't have an answer for that."); | ||
| } | ||
| }); | ||
|
|
||
| setChatOutput([...chatOutput, ...updatedChatOutput]); | ||
| setChatInput(''); // Clear input | ||
| } | ||
| }; | ||
|
|
||
| const chatbot = () => { | ||
| return ( | ||
| <div>chatbot</div> | ||
| ) | ||
| } | ||
| <div className="chatbot-container"> | ||
| <div className="chatbot" id="chatbotIcon" onClick={handleChatIconClick}> | ||
| <img src={chatbotsvg} alt="Chatbot Icon" /> | ||
| <br/> | ||
|
|
||
|
|
||
| </div> | ||
|
|
||
| {chatboxOpen && ( | ||
| <div className="chatbox" id="chatbox"> | ||
|
|
||
| <div id="chatOutput" className="chat-output"> | ||
| {chatOutput.map((message, index) => ( | ||
| <p key={index}>{message}</p> | ||
| ))} | ||
| </div> | ||
| <textarea | ||
| id="chatInput" | ||
| rows="4" | ||
| placeholder="Type your message..." | ||
| value={chatInput} | ||
| onChange={(e) => setChatInput(e.target.value)} | ||
| /> | ||
| <button id="sendMessage" onClick={handleSendMessage}> | ||
| Send | ||
| </button> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default chatbot | ||
| export default Chatbot; |