From 3565e8f63fa268e63d70a7ac2a1ce98953867e5f Mon Sep 17 00:00:00 2001
From: Devansh Trivedi <trivedidevansh1080@gmail.com>
Date: Wed, 24 Sep 2025 16:27:33 +0530
Subject: [PATCH 1/4] updated botwidget responsiveness for smartphones screens

---
 components/BotWidget.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/components/BotWidget.tsx b/components/BotWidget.tsx
index b98fdae..e1a54aa 100644
--- a/components/BotWidget.tsx
+++ b/components/BotWidget.tsx
@@ -72,24 +72,24 @@ export default function BotWidget() {
   };
 
   return (
-  <div ref={chatRef} className="fixed bottom-10 right-6 z-50">
+  <div ref={chatRef} className="fixed bottom-4 right-4 sm:bottom-10 sm:right-6 z-50">
       <button
         onClick={() => setOpen(!open)}
-        className="bg-blue-600 w-16 h-16 rounded-full shadow-lg flex items-center justify-center"
+        className="bg-blue-600 w-12 h-12 sm:w-16 sm:h-16 rounded-full shadow-lg flex items-center justify-center"
       >
         <Image
           src="/assets/bot.gif"
           alt="BOT"
           width={80}
           height={80}
-          className="object-contain"
+          className="object-contain w-8 h-8 sm:w-10 sm:h-10"
           unoptimized
         />
       </button>
 
       {open && (
-        <div className="mt-2 w-96 bg-white rounded-xl shadow-md border max-h-[70vh] flex flex-col">
-          <div className="flex-1 p-4 overflow-y-auto max-h-[50vh] space-y-2">
+        <div className="mt-2 w-[calc(100vw-2rem)] max-w-sm sm:w-96 bg-white rounded-xl shadow-md border max-h-[60vh] sm:max-h-[70vh] flex flex-col absolute bottom-16 right-0 sm:bottom-auto sm:right-auto sm:relative">
+          <div className="flex-1 p-3 sm:p-4 overflow-y-auto max-h-[40vh] sm:max-h-[50vh] space-y-2">
             {messages.map((msg, i) => {
   let contentElement;
 
@@ -134,7 +134,7 @@ export default function BotWidget() {
   return (
     <div
       key={i}
-      className={`p-2 rounded text-black text-sm whitespace-pre-line ${
+      className={`p-2 rounded text-black text-xs sm:text-sm whitespace-pre-line ${
         msg.role === "user"
           ? "bg-blue-100 text-right"
           : "bg-gray-100 text-left"
@@ -147,13 +147,13 @@ export default function BotWidget() {
             <div ref={messagesEndRef} />
           </div>
 
-          <div className="p-4 border-t">
+          <div className="p-3 sm:p-4 border-t">
             <div className="flex items-center gap-2">
               <Input
                 value={input}
                 onChange={(e) => setInput(e.target.value)}
                 placeholder="What have you covered so far?"
-                className="flex-grow border p-2 rounded text-black"
+                className="flex-grow border p-2 rounded text-black text-sm sm:text-base"
                 disabled={loading}
                 onKeyDown={(e) => {
                   if (e.key === "Enter" && !loading) {
@@ -170,7 +170,7 @@ export default function BotWidget() {
                     : "bg-blue-600 hover:bg-blue-700"
                 }`}
               >
-                <SendHorizonal size={16} />
+                <SendHorizonal size={14} className="sm:w-4 sm:h-4" />
               </button>
             </div>
             {loading && (

From 2102cec6757f92f05fe9a41476194d07422b3be4 Mon Sep 17 00:00:00 2001
From: Devansh Trivedi <trivedidevansh1080@gmail.com>
Date: Thu, 25 Sep 2025 10:35:56 +0530
Subject: [PATCH 2/4] updated responsiveness

---
 components/BotWidget.tsx | 104 ++++++++++++++++++++++++++++++++-------
 1 file changed, 87 insertions(+), 17 deletions(-)

diff --git a/components/BotWidget.tsx b/components/BotWidget.tsx
index e1a54aa..2ab10ec 100644
--- a/components/BotWidget.tsx
+++ b/components/BotWidget.tsx
@@ -15,6 +15,7 @@ export default function BotWidget() {
     },
   ]);
   const [loading, setLoading] = useState(false);
+  const [screenSize, setScreenSize] = useState({ width: 0, height: 0 });
   const chatRef = useRef<HTMLDivElement>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
@@ -22,6 +23,17 @@ export default function BotWidget() {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
 
+  useEffect(() => {
+    const handleResize = () => {
+      setScreenSize({ width: window.innerWidth, height: window.innerHeight });
+    };
+    
+    handleResize(); // Set initial size
+    window.addEventListener('resize', handleResize);
+    
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   useEffect(() => {
     if (open) {
       setTimeout(() => {
@@ -72,24 +84,61 @@ export default function BotWidget() {
   };
 
   return (
-  <div ref={chatRef} className="fixed bottom-4 right-4 sm:bottom-10 sm:right-6 z-50">
+  <div ref={chatRef} className="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 md:bottom-8 md:right-8 lg:bottom-10 lg:right-10 xl:bottom-12 xl:right-12 z-50">
       <button
         onClick={() => setOpen(!open)}
-        className="bg-blue-600 w-12 h-12 sm:w-16 sm:h-16 rounded-full shadow-lg flex items-center justify-center"
+        className="bg-blue-600 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center hover:bg-blue-700"
+        style={{
+          width: screenSize.width >= 1536 ? '8rem' : 
+                 screenSize.width >= 1200 ? '7rem' : 
+                 screenSize.width >= 900 ? '6rem' : 
+                 screenSize.width >= 750 ? '5.5rem' : 
+                 screenSize.width >= 640 ? '4rem' : '3rem',
+          height: screenSize.width >= 1536 ? '8rem' : 
+                  screenSize.width >= 1200 ? '7rem' : 
+                  screenSize.width >= 900 ? '6rem' : 
+                  screenSize.width >= 750 ? '5.5rem' : 
+                  screenSize.width >= 640 ? '4rem' : '3rem'
+        }}
       >
         <Image
           src="/assets/bot.gif"
           alt="BOT"
           width={80}
           height={80}
-          className="object-contain w-8 h-8 sm:w-10 sm:h-10"
+          className="object-contain"
+          style={{
+            width: screenSize.width >= 1536 ? '4.5rem' : 
+                   screenSize.width >= 1280 ? '4rem' : 
+                   screenSize.width >= 1024 ? '3.5rem' : 
+                   screenSize.width >= 768 ? '3rem' : 
+                   screenSize.width >= 640 ? '2.5rem' : '2rem',
+            height: screenSize.width >= 1536 ? '4.5rem' : 
+                    screenSize.width >= 1280 ? '4rem' : 
+                    screenSize.width >= 1024 ? '3.5rem' : 
+                    screenSize.width >= 768 ? '3rem' : 
+                    screenSize.width >= 640 ? '2.5rem' : '2rem'
+          }}
           unoptimized
         />
       </button>
 
       {open && (
-        <div className="mt-2 w-[calc(100vw-2rem)] max-w-sm sm:w-96 bg-white rounded-xl shadow-md border max-h-[60vh] sm:max-h-[70vh] flex flex-col absolute bottom-16 right-0 sm:bottom-auto sm:right-auto sm:relative">
-          <div className="flex-1 p-3 sm:p-4 overflow-y-auto max-h-[40vh] sm:max-h-[50vh] space-y-2">
+        <div className="mt-2 bg-white rounded-xl shadow-lg border flex flex-col absolute bottom-16 right-0 sm:bottom-auto sm:right-auto sm:relative"
+             style={{
+               width: screenSize.width >= 640 ? `${screenSize.width * 0.85}px` : 'calc(100vw - 1rem)',
+               maxWidth: '85vw',
+               height: screenSize.height >= 1200 ? `${screenSize.height * 0.70}px` : 
+                       screenSize.height >= 900 ? `${screenSize.height * 0.68}px` : 
+                       screenSize.height >= 700 ? `${screenSize.height * 0.65}px` : 
+                       `${screenSize.height * 0.60}px`,
+               maxHeight: '70vh'
+             }}>
+          <div className="flex-1 p-4 overflow-y-auto space-y-3" 
+               style={{ 
+                 maxHeight: `${screenSize.height * 0.55}px`,
+                 fontSize: screenSize.width >= 900 ? '1rem' : '0.875rem'
+               }}>
             {messages.map((msg, i) => {
   let contentElement;
 
@@ -103,11 +152,11 @@ export default function BotWidget() {
           {data.map((q, idx) => (
             <div
               key={idx}
-              className="border rounded-lg p-3 bg-white text-black shadow-sm"
+              className="border rounded-lg p-3 md:p-4 lg:p-5 xl:p-6 2xl:p-7 bg-white text-black shadow-sm hover:shadow-md transition-shadow"
             >
-              <h3 className="font-bold text-blue-600">{q.title}</h3>
-              <p className="text-sm mt-1">{q.description}</p>
-              <p className="text-xs mt-2 text-gray-500">
+              <h3 className="font-bold text-blue-600 text-sm md:text-lg lg:text-xl xl:text-2xl 2xl:text-3xl">{q.title}</h3>
+              <p className="text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-2xl mt-1">{q.description}</p>
+              <p className="text-xs md:text-sm lg:text-base xl:text-lg 2xl:text-xl mt-2 text-gray-500">
                 <b>Topic:</b> {q.topic} | <b>Level:</b> {q.level}
               </p>
             </div>
@@ -134,11 +183,24 @@ export default function BotWidget() {
   return (
     <div
       key={i}
-      className={`p-2 rounded text-black text-xs sm:text-sm whitespace-pre-line ${
+      className={`rounded-lg text-black whitespace-pre-line transition-all ${
         msg.role === "user"
           ? "bg-blue-100 text-right"
           : "bg-gray-100 text-left"
       }`}
+      style={{
+        padding: screenSize.width >= 1536 ? '1.5rem' : 
+                 screenSize.width >= 1280 ? '1.25rem' : 
+                 screenSize.width >= 1024 ? '1rem' : 
+                 screenSize.width >= 768 ? '0.75rem' : '0.5rem',
+        fontSize: screenSize.width >= 1536 ? '1.5rem' : 
+                  screenSize.width >= 1280 ? '1.25rem' : 
+                  screenSize.width >= 1024 ? '1.125rem' : 
+                  screenSize.width >= 768 ? '1rem' : 
+                  screenSize.width >= 640 ? '0.875rem' : '0.75rem',
+        marginLeft: msg.role === "user" ? (screenSize.width >= 1024 ? '2rem' : '1rem') : '0',
+        marginRight: msg.role === "bot" ? (screenSize.width >= 1024 ? '2rem' : '1rem') : '0'
+      }}
     >
       {contentElement}
     </div>
@@ -147,13 +209,16 @@ export default function BotWidget() {
             <div ref={messagesEndRef} />
           </div>
 
-          <div className="p-3 sm:p-4 border-t">
-            <div className="flex items-center gap-2">
+          <div className="p-4 border-t bg-gray-50">
+            <div className="flex items-center gap-3">
               <Input
                 value={input}
                 onChange={(e) => setInput(e.target.value)}
                 placeholder="What have you covered so far?"
-                className="flex-grow border p-2 rounded text-black text-sm sm:text-base"
+                className="flex-grow border p-3 rounded-lg text-black focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                style={{
+                  fontSize: screenSize.width >= 900 ? '1rem' : '0.875rem'
+                }}
                 disabled={loading}
                 onKeyDown={(e) => {
                   if (e.key === "Enter" && !loading) {
@@ -164,17 +229,22 @@ export default function BotWidget() {
               <button
                 onClick={handleSend}
                 disabled={loading}
-                className={`p-2 rounded text-white ${
+                className={`p-3 rounded-lg text-white transition-all duration-200 ${
                   loading 
                     ? "bg-gray-400 cursor-not-allowed" 
-                    : "bg-blue-600 hover:bg-blue-700"
+                    : "bg-blue-600 hover:bg-blue-700 hover:scale-105 active:scale-95 shadow-md hover:shadow-lg"
                 }`}
               >
-                <SendHorizonal size={14} className="sm:w-4 sm:h-4" />
+                <SendHorizonal 
+                  size={screenSize.width >= 900 ? 20 : 16} 
+                />
               </button>
             </div>
             {loading && (
-              <p className="text-sm text-gray-500 mt-2">🤖 Thinking...</p>
+              <p className="text-gray-500 mt-2 animate-pulse"
+                 style={{
+                   fontSize: screenSize.width >= 900 ? '1rem' : '0.875rem'
+                 }}>🤖 Thinking...</p>
             )}
           </div>
         </div>

From 0b21340297425f9ce3be2027e60ca079f862dbf4 Mon Sep 17 00:00:00 2001
From: Devansh Trivedi <trivedidevansh1080@gmail.com>
Date: Fri, 26 Sep 2025 23:10:38 +0530
Subject: [PATCH 3/4] solved said issue of responsiveness

---
 app/globals.css          |   2 +
 components/BotWidget.tsx | 215 +++++++++++++++------------------------
 2 files changed, 83 insertions(+), 134 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 449c304..8e74f37 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -315,3 +315,5 @@
   display: none;
 }
 */
+
+
diff --git a/components/BotWidget.tsx b/components/BotWidget.tsx
index 2ab10ec..73f54a9 100644
--- a/components/BotWidget.tsx
+++ b/components/BotWidget.tsx
@@ -11,11 +11,10 @@ export default function BotWidget() {
   const [messages, setMessages] = useState([
     {
       role: "bot",
-      content: "👋 Hi! I’m your DSAMate Bot. Tell me what you’ve done so far!",
+      content: "👋 Hi! I'm your DSAMate Bot. Tell me what you've done so far!",
     },
   ]);
   const [loading, setLoading] = useState(false);
-  const [screenSize, setScreenSize] = useState({ width: 0, height: 0 });
   const chatRef = useRef<HTMLDivElement>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
@@ -23,17 +22,6 @@ export default function BotWidget() {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
 
-  useEffect(() => {
-    const handleResize = () => {
-      setScreenSize({ width: window.innerWidth, height: window.innerHeight });
-    };
-    
-    handleResize(); // Set initial size
-    window.addEventListener('resize', handleResize);
-    
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
   useEffect(() => {
     if (open) {
       setTimeout(() => {
@@ -84,141 +72,101 @@ export default function BotWidget() {
   };
 
   return (
-  <div ref={chatRef} className="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 md:bottom-8 md:right-8 lg:bottom-10 lg:right-10 xl:bottom-12 xl:right-12 z-50">
+    <div ref={chatRef} className="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 z-50">
+      {/* Bot Button - Responsive sizing */}
       <button
         onClick={() => setOpen(!open)}
-        className="bg-blue-600 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center hover:bg-blue-700"
-        style={{
-          width: screenSize.width >= 1536 ? '8rem' : 
-                 screenSize.width >= 1200 ? '7rem' : 
-                 screenSize.width >= 900 ? '6rem' : 
-                 screenSize.width >= 750 ? '5.5rem' : 
-                 screenSize.width >= 640 ? '4rem' : '3rem',
-          height: screenSize.width >= 1536 ? '8rem' : 
-                  screenSize.width >= 1200 ? '7rem' : 
-                  screenSize.width >= 900 ? '6rem' : 
-                  screenSize.width >= 750 ? '5.5rem' : 
-                  screenSize.width >= 640 ? '4rem' : '3rem'
-        }}
+        className="w-12 h-12 sm:w-16 sm:h-16 md:w-20 md:h-20 lg:w-24 lg:h-24 
+                   bg-blue-600 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 
+                   flex items-center justify-center hover:bg-blue-700 active:scale-95"
       >
         <Image
           src="/assets/bot.gif"
           alt="BOT"
           width={80}
           height={80}
-          className="object-contain"
-          style={{
-            width: screenSize.width >= 1536 ? '4.5rem' : 
-                   screenSize.width >= 1280 ? '4rem' : 
-                   screenSize.width >= 1024 ? '3.5rem' : 
-                   screenSize.width >= 768 ? '3rem' : 
-                   screenSize.width >= 640 ? '2.5rem' : '2rem',
-            height: screenSize.width >= 1536 ? '4.5rem' : 
-                    screenSize.width >= 1280 ? '4rem' : 
-                    screenSize.width >= 1024 ? '3.5rem' : 
-                    screenSize.width >= 768 ? '3rem' : 
-                    screenSize.width >= 640 ? '2.5rem' : '2rem'
-          }}
+          className="w-6 h-6 sm:w-8 sm:h-8 md:w-10 md:h-10 lg:w-12 lg:h-12 object-contain"
           unoptimized
         />
       </button>
 
+      {/* Chat Window - Responsive positioning and sizing */}
       {open && (
-        <div className="mt-2 bg-white rounded-xl shadow-lg border flex flex-col absolute bottom-16 right-0 sm:bottom-auto sm:right-auto sm:relative"
-             style={{
-               width: screenSize.width >= 640 ? `${screenSize.width * 0.85}px` : 'calc(100vw - 1rem)',
-               maxWidth: '85vw',
-               height: screenSize.height >= 1200 ? `${screenSize.height * 0.70}px` : 
-                       screenSize.height >= 900 ? `${screenSize.height * 0.68}px` : 
-                       screenSize.height >= 700 ? `${screenSize.height * 0.65}px` : 
-                       `${screenSize.height * 0.60}px`,
-               maxHeight: '70vh'
-             }}>
-          <div className="flex-1 p-4 overflow-y-auto space-y-3" 
-               style={{ 
-                 maxHeight: `${screenSize.height * 0.55}px`,
-                 fontSize: screenSize.width >= 900 ? '1rem' : '0.875rem'
-               }}>
+        <div className="absolute bottom-16 right-0 sm:bottom-20 sm:right-0
+                        w-80 sm:w-96 md:w-[420px] lg:w-[480px]
+                        h-[60vh] sm:h-[70vh] max-h-[500px]
+                        bg-white rounded-xl shadow-lg border flex flex-col">
+          
+          {/* Messages Container - Responsive padding and text sizing */}
+          <div className="flex-1 p-3 sm:p-4 md:p-5 overflow-y-auto space-y-3">
             {messages.map((msg, i) => {
-  let contentElement;
-
-  // Try to parse JSON
-  try {
-    const data = JSON.parse(msg.content);
-    if (Array.isArray(data) && data[0]?.title && data[0]?.description) {
-      // Render as question cards
-      contentElement = (
-        <div className="space-y-3">
-          {data.map((q, idx) => (
-            <div
-              key={idx}
-              className="border rounded-lg p-3 md:p-4 lg:p-5 xl:p-6 2xl:p-7 bg-white text-black shadow-sm hover:shadow-md transition-shadow"
-            >
-              <h3 className="font-bold text-blue-600 text-sm md:text-lg lg:text-xl xl:text-2xl 2xl:text-3xl">{q.title}</h3>
-              <p className="text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-2xl mt-1">{q.description}</p>
-              <p className="text-xs md:text-sm lg:text-base xl:text-lg 2xl:text-xl mt-2 text-gray-500">
-                <b>Topic:</b> {q.topic} | <b>Level:</b> {q.level}
-              </p>
-            </div>
-          ))}
-        </div>
-      );
-    } else {
-      contentElement = <span>{msg.content}</span>;
-    }
-  } catch {
-    // Parse markdown-style formatting
-    const formattedContent = msg.content
-      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') // **bold**
-      .replace(/\*(.*?)\*/g, '<em>$1</em>') // *italic*
-      .replace(/^(\d+\.)\s/gm, '<strong>$1</strong> '); // numbered lists
-    
-    contentElement = (
-      <span 
-        dangerouslySetInnerHTML={{ __html: formattedContent }}
-      />
-    );
-  }
-
-  return (
-    <div
-      key={i}
-      className={`rounded-lg text-black whitespace-pre-line transition-all ${
-        msg.role === "user"
-          ? "bg-blue-100 text-right"
-          : "bg-gray-100 text-left"
-      }`}
-      style={{
-        padding: screenSize.width >= 1536 ? '1.5rem' : 
-                 screenSize.width >= 1280 ? '1.25rem' : 
-                 screenSize.width >= 1024 ? '1rem' : 
-                 screenSize.width >= 768 ? '0.75rem' : '0.5rem',
-        fontSize: screenSize.width >= 1536 ? '1.5rem' : 
-                  screenSize.width >= 1280 ? '1.25rem' : 
-                  screenSize.width >= 1024 ? '1.125rem' : 
-                  screenSize.width >= 768 ? '1rem' : 
-                  screenSize.width >= 640 ? '0.875rem' : '0.75rem',
-        marginLeft: msg.role === "user" ? (screenSize.width >= 1024 ? '2rem' : '1rem') : '0',
-        marginRight: msg.role === "bot" ? (screenSize.width >= 1024 ? '2rem' : '1rem') : '0'
-      }}
-    >
-      {contentElement}
-    </div>
-  );
-})}
+              let contentElement;
+
+              // Try to parse JSON
+              try {
+                const data = JSON.parse(msg.content);
+                if (Array.isArray(data) && data[0]?.title && data[0]?.description) {
+                  // Render as question cards
+                  contentElement = (
+                    <div className="space-y-2 sm:space-y-3">
+                      {data.map((q, idx) => (
+                        <div
+                          key={idx}
+                          className="border rounded-lg p-3 sm:p-4 bg-white text-black shadow-sm hover:shadow-md transition-shadow"
+                        >
+                          <h3 className="font-bold text-blue-600 text-sm sm:text-base md:text-lg">{q.title}</h3>
+                          <p className="text-sm sm:text-base md:text-lg mt-1">{q.description}</p>
+                          <p className="text-xs sm:text-sm md:text-base mt-2 text-gray-500">
+                            <b>Topic:</b> {q.topic} | <b>Level:</b> {q.level}
+                          </p>
+                        </div>
+                      ))}
+                    </div>
+                  );
+                } else {
+                  contentElement = <span>{msg.content}</span>;
+                }
+              } catch {
+                // Parse markdown-style formatting
+                const formattedContent = msg.content
+                  .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') // **bold**
+                  .replace(/\*(.*?)\*/g, '<em>$1</em>') // *italic*
+                  .replace(/^(\d+\.)\s/gm, '<strong>$1</strong> '); // numbered lists
+                
+                contentElement = (
+                  <span 
+                    dangerouslySetInnerHTML={{ __html: formattedContent }}
+                  />
+                );
+              }
+
+              return (
+                <div
+                  key={i}
+                  className={`rounded-lg text-black whitespace-pre-line transition-all 
+                             p-3 sm:p-4
+                             text-sm sm:text-base
+                             ${msg.role === "user"
+                               ? "bg-blue-100 text-right ml-4"
+                               : "bg-gray-100 text-left mr-4"
+                             }`}
+                >
+                  {contentElement}
+                </div>
+              );
+            })}
             <div ref={messagesEndRef} />
           </div>
 
-          <div className="p-4 border-t bg-gray-50">
-            <div className="flex items-center gap-3">
+          {/* Input Area - Responsive padding and sizing */}
+          <div className="p-3 sm:p-4 border-t bg-gray-50">
+            <div className="flex items-center gap-2 sm:gap-3">
               <Input
                 value={input}
                 onChange={(e) => setInput(e.target.value)}
                 placeholder="What have you covered so far?"
-                className="flex-grow border p-3 rounded-lg text-black focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
-                style={{
-                  fontSize: screenSize.width >= 900 ? '1rem' : '0.875rem'
-                }}
+                className="flex-grow border p-2 sm:p-3 rounded-lg text-black focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all
+                          text-sm sm:text-base"
                 disabled={loading}
                 onKeyDown={(e) => {
                   if (e.key === "Enter" && !loading) {
@@ -229,26 +177,25 @@ export default function BotWidget() {
               <button
                 onClick={handleSend}
                 disabled={loading}
-                className={`p-3 rounded-lg text-white transition-all duration-200 ${
+                className={`p-2 sm:p-3 rounded-lg text-white transition-all duration-200 ${
                   loading 
                     ? "bg-gray-400 cursor-not-allowed" 
                     : "bg-blue-600 hover:bg-blue-700 hover:scale-105 active:scale-95 shadow-md hover:shadow-lg"
                 }`}
               >
                 <SendHorizonal 
-                  size={screenSize.width >= 900 ? 20 : 16} 
+                  className="w-4 h-4 sm:w-5 sm:h-5" 
                 />
               </button>
             </div>
             {loading && (
-              <p className="text-gray-500 mt-2 animate-pulse"
-                 style={{
-                   fontSize: screenSize.width >= 900 ? '1rem' : '0.875rem'
-                 }}>🤖 Thinking...</p>
+              <p className="text-gray-500 mt-2 animate-pulse text-sm">
+                🤖 Thinking...
+              </p>
             )}
           </div>
         </div>
       )}
     </div>
   );
-}
+}
\ No newline at end of file

From c5359169eef8f7bae0a759d03bdabb732160565d Mon Sep 17 00:00:00 2001
From: Devansh Trivedi <trivedidevansh1080@gmail.com>
Date: Sat, 27 Sep 2025 16:54:58 +0530
Subject: [PATCH 4/4] correct button sizes issue

---
 components/BotWidget.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/BotWidget.tsx b/components/BotWidget.tsx
index 73f54a9..9def334 100644
--- a/components/BotWidget.tsx
+++ b/components/BotWidget.tsx
@@ -72,11 +72,11 @@ export default function BotWidget() {
   };
 
   return (
-    <div ref={chatRef} className="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 z-50">
+    <div ref={chatRef} className="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 z-40">
       {/* Bot Button - Responsive sizing */}
       <button
         onClick={() => setOpen(!open)}
-        className="w-12 h-12 sm:w-16 sm:h-16 md:w-20 md:h-20 lg:w-24 lg:h-24 
+        className="w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16 
                    bg-blue-600 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 
                    flex items-center justify-center hover:bg-blue-700 active:scale-95"
       >
@@ -85,7 +85,7 @@ export default function BotWidget() {
           alt="BOT"
           width={80}
           height={80}
-          className="w-6 h-6 sm:w-8 sm:h-8 md:w-10 md:h-10 lg:w-12 lg:h-12 object-contain"
+          className="w-full h-full object-contain p-1"
           unoptimized
         />
       </button>
@@ -93,8 +93,8 @@ export default function BotWidget() {
       {/* Chat Window - Responsive positioning and sizing */}
       {open && (
         <div className="absolute bottom-16 right-0 sm:bottom-20 sm:right-0
-                        w-80 sm:w-96 md:w-[420px] lg:w-[480px]
-                        h-[60vh] sm:h-[70vh] max-h-[500px]
+                        w-72 sm:w-80 md:w-96 lg:w-[400px] xl:w-[420px]
+                        h-[50vh] sm:h-[60vh] md:h-[65vh] max-h-[450px]
                         bg-white rounded-xl shadow-lg border flex flex-col">
           
           {/* Messages Container - Responsive padding and text sizing */}