From b57e1157354558063c37b584123dd7b071c4b7b0 Mon Sep 17 00:00:00 2001
From: Nimit Sharma <91617550+ABUDIYAAAA@users.noreply.github.com>
Date: Thu, 30 Oct 2025 13:04:19 +0530
Subject: [PATCH] fix responsive

Signed-off-by: Nimit Sharma <91617550+ABUDIYAAAA@users.noreply.github.com>
---
 src/components/ChatBot.jsx | 376 ++++++++++++++++++++++---------------
 1 file changed, 223 insertions(+), 153 deletions(-)

diff --git a/src/components/ChatBot.jsx b/src/components/ChatBot.jsx
index 508248b..4460028 100644
--- a/src/components/ChatBot.jsx
+++ b/src/components/ChatBot.jsx
@@ -15,18 +15,64 @@ const ChatBot = () => {
   const buttonRef = useRef(null);
   const messagesEndRef = useRef(null);
   const inputRef = useRef(null);
+  const messagesContainerRef = useRef(null);
 
-  // Auto-scroll to bottom when new messages arrive
-  useEffect(() => {
+  // Scroll to bottom helper
+  const scrollToBottom = () => {
     if (messagesEndRef.current) {
       messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
     }
+  };
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    scrollToBottom();
   }, [messages]);
 
-  // Focus input when chat opens
+  // Scroll to bottom when chat opens
+  useEffect(() => {
+    if (isOpen) {
+      // Small delay to ensure DOM is rendered
+      setTimeout(scrollToBottom, 100);
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    }
+  }, [isOpen]);
+
+  // Prevent scroll propagation to body
   useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus();
+    const messagesContainer = messagesContainerRef.current;
+
+    if (isOpen && messagesContainer) {
+      const preventScroll = (e) => {
+        e.stopPropagation();
+      };
+
+      messagesContainer.addEventListener("wheel", preventScroll, {
+        passive: true,
+      });
+      messagesContainer.addEventListener("touchmove", preventScroll, {
+        passive: true,
+      });
+
+      return () => {
+        messagesContainer.removeEventListener("wheel", preventScroll);
+        messagesContainer.removeEventListener("touchmove", preventScroll);
+      };
+    }
+  }, [isOpen]);
+
+  // Prevent body scroll when chat is open
+  useEffect(() => {
+    if (isOpen) {
+      // Store original overflow
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+
+      return () => {
+        document.body.style.overflow = originalOverflow;
+      };
     }
   }, [isOpen]);
 
@@ -100,181 +146,205 @@ const ChatBot = () => {
   };
 
   return (
-    <div className="fixed bottom-30 right-8 z-50">
-      {/* Chat Toggle Button */}
-      <button
-        ref={buttonRef}
-        onClick={() => setIsOpen(!isOpen)}
-        className={`
-          w-16 h-16 rounded-full
-          bg-black hover:bg-[#111111]
-          border border-[#C4C4C4]
-          flex items-center justify-center
-          shadow-xl hover:shadow-2xl
-          transition-all duration-300 ease-out
-          
-        `}
-        aria-label="Chat with SAST Bot"
-      >
-        {isOpen ? (
-          <X className="text-white" />
-        ) : (
-          <MessageCircle className="text-white" />
-        )}
-      </button>
-
-      {/* Chat Window */}
+    <>
+      {/* Overlay for mobile */}
       {isOpen && (
         <div
-          ref={menuRef}
+          className="fixed inset-0 bg-black/50 z-40 md:hidden"
+          onClick={() => setIsOpen(false)}
+        />
+      )}
+
+      <div className="fixed bottom-30 right-8 md:bottom-[7.5rem] md:right-8 z-50">
+        {/* Chat Toggle Button */}
+        <button
+          ref={buttonRef}
+          onClick={() => setIsOpen(!isOpen)}
           className="
-            absolute bottom-20 right-20
-            w-96 h-[500px] max-w-[calc(100vw-4rem)]
-            bg-black border border-[#C4C4C4]
-            rounded-2xl shadow-2xl
-            overflow-hidden
-            animate-in slide-in-from-bottom-4 fade-in duration-300
-            flex flex-col
+            w-16 h-16 md:w-16 md:h-16 rounded-full
+            bg-black hover:bg-[#111111]
+            border border-[#C4C4C4]
+            flex items-center justify-center
+            shadow-xl hover:shadow-2xl
+            transition-all duration-300 ease-out
           "
+          aria-label="Chat with SAST Bot"
         >
-          {/* Header Section */}
-          <div className="p-6 pb-4 border-b-2 bg-black border-slate-500 flex-shrink-0">
-            <div className="flex items-center justify-between">
-              <div>
-                <h2 className="text-xl font-bold text-white mb-1">SAST Bot</h2>
-                <p className="text-slate-400 text-sm">
-                  Your astronomy & space guide
-                </p>
+          {isOpen ? (
+            <X className="text-white w-5 h-5 md:w-6 md:h-6" />
+          ) : (
+            <MessageCircle className="text-white w-5 h-5 md:w-6 md:h-6" />
+          )}
+        </button>
+
+        {/* Chat Window */}
+        {isOpen && (
+          <div
+            ref={menuRef}
+            className="
+              fixed 
+              bottom-24 right-6
+              w-[calc(100vw-3rem)] h-[calc(100vh-15rem)]
+              max-w-md
+              md:absolute md:w-96 md:h-[500px]
+              md:bottom-20 md:right-0
+              bg-black border border-[#C4C4C4]
+              rounded-2xl shadow-2xl
+              overflow-hidden
+              animate-in slide-in-from-bottom-4 fade-in duration-300
+              flex flex-col
+            "
+          >
+            {/* Header Section */}
+            <div className="p-4 md:p-6 md:pb-4 border-b-2 bg-black border-slate-500 flex-shrink-0">
+              <div className="flex items-center justify-between">
+                <div>
+                  <h2 className="text-lg md:text-xl font-bold text-white mb-1">
+                    SAST Bot
+                  </h2>
+                  <p className="text-slate-400 text-xs md:text-sm">
+                    Your astronomy & space guide
+                  </p>
+                </div>
+                <button
+                  onClick={handleResetChat}
+                  className="
+                    p-2 rounded-lg
+                    text-slate-400 hover:text-white
+                    hover:bg-slate-700
+                    transition-all duration-200
+                  "
+                  aria-label="Clear chat history"
+                  title="Clear chat history"
+                >
+                  <Trash2 size={18} />
+                </button>
               </div>
-              <button
-                onClick={handleResetChat}
-                className="
-                  p-2 rounded-lg
-                  text-slate-400 hover:text-white
-                  hover:bg-slate-700
-                  transition-all duration-200
-                "
-                aria-label="Clear chat history"
-                title="Clear chat history"
-              >
-                <Trash2 size={18} />
-              </button>
             </div>
-          </div>
 
-          {/* Messages Area */}
-          <div className="flex-1 overflow-y-auto p-4 space-y-4">
-            {messages.length === 0 ? (
-              <div className="text-center text-slate-400 py-8">
-                <p className="text-sm">
-                  Welcome! Ask me anything about astronomy, space technology, or
-                  SAST.
-                </p>
-              </div>
-            ) : (
-              messages.map((message, index) => (
-                <div
-                  key={message.id || index}
-                  className={`
-                    flex
-                    ${message.role === "user" ? "justify-end" : "justify-start"}
-                  `}
-                >
+            {/* Messages Area */}
+            <div
+              ref={messagesContainerRef}
+              className="flex-1 overflow-y-auto p-3 md:p-4 space-y-3 md:space-y-4 overscroll-contain"
+            >
+              {messages.length === 0 ? (
+                <div className="text-center text-slate-400 py-8">
+                  <p className="text-xs md:text-sm">
+                    Welcome! Ask me anything about astronomy, space technology,
+                    or SAST.
+                  </p>
+                </div>
+              ) : (
+                messages.map((message, index) => (
                   <div
+                    key={message.id || index}
                     className={`
-                      max-w-[80%] px-4 py-3 rounded-2xl text-sm
+                      flex
                       ${
                         message.role === "user"
-                          ? "bg-blue-500 text-white rounded-br-md"
-                          : "bg-slate-700 text-slate-100 rounded-bl-md"
+                          ? "justify-end"
+                          : "justify-start"
                       }
                     `}
                   >
-                    <div className="whitespace-pre-wrap break-words">
-                      {formatMessage(message)}
-                    </div>
-                    {message.createdAt && (
-                      <div
-                        className={`
-                        text-xs mt-2 opacity-70
+                    <div
+                      className={`
+                        max-w-[85%] md:max-w-[80%] px-3 md:px-4 py-2 md:py-3 rounded-2xl text-xs md:text-sm
                         ${
                           message.role === "user"
-                            ? "text-blue-100"
-                            : "text-slate-400"
+                            ? "bg-blue-500 text-white rounded-br-md"
+                            : "bg-slate-700 text-slate-100 rounded-bl-md"
                         }
                       `}
-                      >
-                        {new Date(message.createdAt).toLocaleTimeString([], {
-                          hour: "2-digit",
-                          minute: "2-digit",
-                        })}
+                    >
+                      <div className="whitespace-pre-wrap break-words">
+                        {formatMessage(message)}
                       </div>
-                    )}
+                      {message.createdAt && (
+                        <div
+                          className={`
+                          text-xs mt-1 md:mt-2 opacity-70
+                          ${
+                            message.role === "user"
+                              ? "text-blue-100"
+                              : "text-slate-400"
+                          }
+                        `}
+                        >
+                          {new Date(message.createdAt).toLocaleTimeString([], {
+                            hour: "2-digit",
+                            minute: "2-digit",
+                          })}
+                        </div>
+                      )}
+                    </div>
                   </div>
-                </div>
-              ))
-            )}
+                ))
+              )}
 
-            {/* Loading indicator */}
-            {isLoading && (
-              <div className="flex justify-start">
-                <div className="bg-slate-700 text-slate-100 rounded-2xl rounded-bl-md px-4 py-3">
-                  <div className="flex items-center space-x-2">
-                    <Loader2 size={16} className="animate-spin" />
-                    <span className="text-sm">SAST Bot is thinking...</span>
+              {/* Loading indicator */}
+              {isLoading && (
+                <div className="flex justify-start">
+                  <div className="bg-slate-700 text-slate-100 rounded-2xl rounded-bl-md px-3 md:px-4 py-2 md:py-3">
+                    <div className="flex items-center space-x-2">
+                      <Loader2 size={16} className="animate-spin" />
+                      <span className="text-xs md:text-sm">
+                        SAST Bot is thinking...
+                      </span>
+                    </div>
                   </div>
                 </div>
-              </div>
-            )}
+              )}
 
-            <div ref={messagesEndRef} />
-          </div>
+              <div ref={messagesEndRef} />
+            </div>
 
-          {/* Input Area */}
-          <div className="p-4 border-t border-slate-600 flex-shrink-0">
-            <form onSubmit={handleSendMessage} className="flex gap-2">
-              <input
-                ref={inputRef}
-                type="text"
-                value={inputText}
-                onChange={(e) => setInputText(e.target.value)}
-                placeholder="Ask about astronomy, space, or SAST..."
-                disabled={isLoading}
-                className="
-                  flex-1 px-4 py-3 rounded-xl
-                  bg-slate-800 border border-slate-600
-                  text-white placeholder-slate-400
-                  focus:outline-none focus:ring-2 focus:ring-blue-500
-                  disabled:opacity-50 disabled:cursor-not-allowed
-                  text-sm
-                "
-              />
-              <button
-                type="submit"
-                disabled={!inputText.trim() || isLoading}
-                className="
-                  px-4 py-3 rounded-xl
-                  bg-black hover:bg-gray-400
-                  disabled:bg-slate-600 disabled:cursor-not-allowed
-                  enabled:border border-gray-400
-                  text-white
-                  transition-colors duration-200
-                  flex items-center justify-center
-                  min-w-[48px]
-                "
-                aria-label="Send message"
-              >
-                {isLoading ? (
-                  <Loader2 size={18} className="animate-spin" />
-                ) : (
-                  <Send size={18} />
-                )}
-              </button>
-            </form>
+            {/* Input Area */}
+            <div className="p-3 md:p-4 border-t border-slate-600 flex-shrink-0">
+              <form onSubmit={handleSendMessage} className="flex gap-2">
+                <input
+                  ref={inputRef}
+                  type="text"
+                  value={inputText}
+                  onChange={(e) => setInputText(e.target.value)}
+                  placeholder="Ask about astronomy, space, or SAST..."
+                  disabled={isLoading}
+                  className="
+                    flex-1 px-3 md:px-4 py-2 md:py-3 rounded-xl
+                    bg-slate-800 border border-slate-600
+                    text-white placeholder-slate-400
+                    focus:outline-none focus:ring-2 focus:ring-blue-500
+                    disabled:opacity-50 disabled:cursor-not-allowed
+                    text-xs md:text-sm
+                  "
+                />
+                <button
+                  type="submit"
+                  disabled={!inputText.trim() || isLoading}
+                  className="
+                    px-3 md:px-4 py-2 md:py-3 rounded-xl
+                    bg-black hover:bg-gray-400
+                    disabled:bg-slate-600 disabled:cursor-not-allowed
+                    enabled:border border-gray-400
+                    text-white
+                    transition-colors duration-200
+                    flex items-center justify-center
+                    min-w-[44px] md:min-w-[48px]
+                  "
+                  aria-label="Send message"
+                >
+                  {isLoading ? (
+                    <Loader2 size={18} className="animate-spin" />
+                  ) : (
+                    <Send size={18} />
+                  )}
+                </button>
+              </form>
+            </div>
           </div>
-        </div>
-      )}
-    </div>
+        )}
+      </div>
+    </>
   );
 };