From 7321d2ae1067d1e8ce2f4eba6d2eaaee945a7d07 Mon Sep 17 00:00:00 2001
From: Aditya Mishra <adityababaromio@gamil.com>
Date: Fri, 31 Oct 2025 13:10:33 +0530
Subject: [PATCH] Enhanced Chatbot component to provide better user experience
 and accessibility

---
 src/Components/Chatbot/Chatbot.js  | 137 ++++++++++++++++++++++-----
 src/Components/Chatbot/chatbot.css | 146 ++++++++++++++++++-----------
 2 files changed, 203 insertions(+), 80 deletions(-)

diff --git a/src/Components/Chatbot/Chatbot.js b/src/Components/Chatbot/Chatbot.js
index d36125b..3a97651 100644
--- a/src/Components/Chatbot/Chatbot.js
+++ b/src/Components/Chatbot/Chatbot.js
@@ -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 sales@603thecoworkingspace.com",
-  "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 sales@603thecoworkingspace.com 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>
diff --git a/src/Components/Chatbot/chatbot.css b/src/Components/Chatbot/chatbot.css
index c9a97c5..6def9dc 100644
--- a/src/Components/Chatbot/chatbot.css
+++ b/src/Components/Chatbot/chatbot.css
@@ -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;
 }
-