Skip to content

Enhanced Chatbot component to provide better user experience and accessibility #266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Aditya1771 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Enhanced Chatbot component to provide better user experience and accessibility #266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 111 additions & 26 deletions src/Components/Chatbot/Chatbot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,140 @@
import React, { useState, useRef, useEffect } from "react";
import "./chatbot.css";
import botIcon from "../../images/bot.png";

import React, { useState } from 'react';
import './chatbot.css';
import botIcon from '../../images/bot.png';

// 🧠 Predefined bot responses
const predefinedQuestions = {
"What services do you offer?": "We offer Workspace Design & Planning.",
"How can I contact you?": "You can reach us via email at [email protected]",
"What are your business hours?": "We are available from 9 AM to 6 PM, Monday to Friday.",
"What services do you offer?": "We offer Workspace Design & Planning, Interior Solutions, and Coworking Management.",
"How can I contact you?": "You can reach us via email at [email protected] or call +91 91360 36603.",
"What are your business hours?": "We’re open Monday to Friday, from 9:00 AM to 6:00 PM.",
"Where are you located?": "Our office is at Makhija Arcade, 35th Rd, Khar West, Mumbai, Maharashtra 400052.",
};

// 🎯 Chatbot Component
const Chatbot = () => {
const [isOpen, setIsOpen] = useState(false); // to toggle chatbot open/close
const [messages, setMessages] = useState([]); // Chat message state
const [isOpen, setIsOpen] = useState(false);
const [messages, setMessages] = useState([]);
const [userInput, setUserInput] = useState("");
const [isTyping, setIsTyping] = useState(false);

const handleQuestionClick = (question) => {
setMessages([...messages, { sender: 'user', text: question }]);
const messagesEndRef = useRef(null);

// 🔄 Auto-scroll to bottom when new messages appear
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}, [messages]);

// 🧩 Toggle chatbot visibility
const toggleChatbot = () => setIsOpen((prev) => !prev);

const botResponse = predefinedQuestions[question];
setMessages((prev) => [...prev, { sender: 'bot', text: botResponse }]);
// 💬 Handle user sending a message
const handleSendMessage = () => {
const trimmedInput = userInput.trim();
if (!trimmedInput) return;

// Add user message
setMessages((prev) => [...prev, { sender: "user", text: trimmedInput }]);
setUserInput("");

// Simulate bot response with slight delay
const botResponse =
predefinedQuestions[trimmedInput] ||
"🤖 I’m still learning! Please try asking something else.";
setIsTyping(true);
setTimeout(() => {
setMessages((prev) => [...prev, { sender: "bot", text: botResponse }]);
setIsTyping(false);
}, 600);
};

const toggleChatbot = () => {
setIsOpen(!isOpen); // Toggle between open and close states
// ⚡ Handle quick question click
const handleQuestionClick = (question) => {
setMessages((prev) => [
...prev,
{ sender: "user", text: question },
{
sender: "bot",
text:
predefinedQuestions[question] ||
"🤖 I'm still learning! Try another question.",
},
]);
};

// 🎛 Handle Enter key press
const handleKeyDown = (e) => {
if (e.key === "Enter") handleSendMessage();
};

return (
<div className="chatbot-container">
{/* Bot icon with text */}
<div className="chatbot-toggle" onClick={toggleChatbot}>
<img src={botIcon} alt="Chatbot" />
{/* Floating chatbot toggle */}
<button
className="chatbot-toggle"
onClick={toggleChatbot}
aria-label={isOpen ? "Close chatbot" : "Open chatbot"}
>
<img src={botIcon} alt="Chatbot Icon" className="bot-icon" />
<span className="chatbot-toggle-text">
{isOpen ? "Close chat" : "Open chat"}
{isOpen ? "Close Chat" : "Chat with us"}
</span>
</div>
</button>

{/* Chat window */}
{isOpen && (
<div className="chat-window">
<div
className="chat-window"
role="dialog"
aria-labelledby="chatbot-title"
aria-live="polite"
>
<h2 id="chatbot-title" className="sr-only">
Chatbot Conversation
</h2>

{/* Message Display */}
<div className="chat-messages">
{messages.map((msg, index) => (
<div key={index} className={`message ${msg.sender}`}>
<strong>{msg.sender === 'user' ? 'You' : 'Bot'}:</strong> {msg.text}
<strong>
{msg.sender === "user" ? "You:" : "Bot:"}
</strong>{" "}
{msg.text}
</div>
))}

{isTyping && (
<div className="message bot typing">
<em>Bot is typing...</em>
</div>
)}

<div ref={messagesEndRef} />
</div>

{/* Input Box */}
<div className="chat-input">
<input
type="text"
placeholder="Type your message..."
value={userInput}
onChange={(e) => setUserInput(e.target.value)}
onKeyDown={handleKeyDown}
aria-label="Chat message input"
/>
<button onClick={handleSendMessage}>Send</button>
</div>

{/* Predefined questions */}
{/* Quick Questions */}
<div className="predefined-questions">
{Object.keys(predefinedQuestions).map((question, index) => (
<button key={index} onClick={() => handleQuestionClick(question)}>
{question}
<p>Try asking:</p>
{Object.keys(predefinedQuestions).map((q, i) => (
<button
key={i}
onClick={() => handleQuestionClick(q)}
aria-label={`Ask: ${q}`}
>
{q}
</button>
))}
</div>
Expand Down
146 changes: 92 additions & 54 deletions src/Components/Chatbot/chatbot.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,96 +1,134 @@
.chatbot-container {
position: fixed;
bottom: 10px;
left: 20px;
bottom: 20px;
right: 25px;
z-index: 1000;
font-family: "Poppins", sans-serif;
}

/* Chatbot toggle button */
.chatbot-toggle {
background: #ffcd00;
color: black;
border: none;
padding: 10px 16px;
border-radius: 25px;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
background-color: var(--gold-1);
padding: 10px;
border-radius: 25px;
box-shadow: 0 4px 8px var(--black-alpha-35);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: 0.3s;
}

.chatbot-toggle img {
width: 40px;
height: 40px;
margin-right: 10px;
.chatbot-toggle:hover {
transform: scale(1.05);
}

.chatbot-toggle-text {
color: var(--black);
font-weight: bold;
font-size: 16px;
.chatbot-toggle img.bot-icon {
width: 35px;
height: 35px;
}

/* Chat window */
.chat-window {
position: fixed;
bottom: 80px;
left: 20px;
width: 400px;
background-color: var(--white);
border-radius: 5px;
border: 1px solid var(--gray-4);
box-shadow: 0 4px 8px var(--black-alpha-35);
padding: 10px;
max-height: 500px;
overflow-y: auto;
width: 320px;
height: 430px;
background-color: #1e1e1e;
color: white;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
overflow: hidden;
position: absolute;
bottom: 70px;
right: 0;
}

.chat-messages {
color: var(--black);
flex: 1;
padding: 10px;
overflow-y: auto;
scroll-behavior: smooth;
}

/* Message styling */
.message {
padding: 10px;
border-radius: 10px;
margin-bottom: 10px;
max-width: 90%;
word-wrap: break-word;
box-shadow: 0 2px 5px var(--black-alpha-20);
padding: 8px 12px;
border-radius: 10px;
line-height: 1.4;
max-width: 85%;
}

/* User message box */
.message.user {
background-color: var(--gold-1);
color: var(--black);
background-color: #ffcd00;
color: black;
align-self: flex-end;
text-align: left;
}

/* Bot message box */
.message.bot {
background-color: var(--gray-2);
color: var(--black);
text-align: left;
background-color: #333;
color: #eee;
align-self: flex-start;
}

/* Predefined questions */
.predefined-questions {
.message.typing {
font-style: italic;
opacity: 0.7;
}

.chat-input {
display: flex;
flex-wrap: wrap;
gap: 5px;
gap: 6px;
padding: 8px;
border-top: 1px solid #333;
background-color: #222;
}

.predefined-questions button {
background-color: var(--gold-1);
color: var(--black);
.chat-input input {
flex: 1;
padding: 8px;
border-radius: 4px;
border: 1px solid #555;
background-color: black;
color: white;
}

.chat-input button {
background-color: #ffcd00;
border: none;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}

.predefined-questions {
border-top: 1px solid #333;
background-color: #111;
padding: 10px;
margin-top: 10px;
border-radius: 5px;
}

.predefined-questions p {
margin: 0 0 6px 0;
font-size: 13px;
color: #ccc;
}

.predefined-questions button {
display: block;
width: 100%;
margin-bottom: 5px;
padding: 6px 10px;
border: none;
border-radius: 6px;
background-color: #2e2e2e;
color: white;
text-align: left;
cursor: pointer;
flex: 1 1 calc(50% - 5px);
transition: background 0.2s;
}

.predefined-questions button:hover {
background-color: var(--gold-2);
background-color: #ffcd00;
color: black;
}

Loading