From 54bd662b49efcf3cb2108f9ec9fb2454cae847c6 Mon Sep 17 00:00:00 2001
From: Omkar Kadam <kaizenki572@gmail.com>
Date: Sun, 17 May 2026 12:21:40 +0530
Subject: [PATCH 1/3] feat: add chatbot help assistant widget (#180)

- Add ChatbotWidget component with floating bubble UI
- Add chatbotData.ts with FAQ knowledge base
- Covers GitHub token help, setup guide, MongoDB, tests, and features
- Quick question buttons for common queries
- No external dependencies required
---
 src/App.tsx                              |   3 +
 src/components/Chatbot/ChatbotWidget.tsx | 503 +++++++++++++++++++++++
 src/components/Chatbot/chatbotData.ts    | 179 ++++++++
 3 files changed, 685 insertions(+)
 create mode 100644 src/components/Chatbot/ChatbotWidget.tsx
 create mode 100644 src/components/Chatbot/chatbotData.ts

diff --git a/src/App.tsx b/src/App.tsx
index b00eba8..e3c3cee 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,7 @@ import ScrollProgressBar from "./components/ScrollProgressBar";
 import { Toaster } from "react-hot-toast";
 import Router from "./Routes/Router";
 import ThemeWrapper from "./context/ThemeContext";
+import ChatbotWidget from "./components/Chatbot/ChatbotWidget";
 
 function App() {
   return (
@@ -19,6 +20,8 @@ function App() {
 
         <Footer />
 
+        <ChatbotWidget />
+
         <Toaster
           position="top-center"
           reverseOrder={false}
diff --git a/src/components/Chatbot/ChatbotWidget.tsx b/src/components/Chatbot/ChatbotWidget.tsx
new file mode 100644
index 0000000..4647ca7
--- /dev/null
+++ b/src/components/Chatbot/ChatbotWidget.tsx
@@ -0,0 +1,503 @@
+import { useState, useRef, useEffect, ReactNode } from "react";
+import { getBotResponse, defaultMessage } from "./chatbotData";
+
+interface Message {
+  id: number;
+  role: "bot" | "user";
+  text: string;
+  time: string;
+}
+
+function getTime() {
+  return new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+
+// Simple markdown-like renderer for bold, code blocks, inline code, links, lists
+function renderMarkdown(text: string): ReactNode {
+  const lines = text.split("\n");
+  const elements: JSX.Element[] = [];
+  let key = 0;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+
+    // Code block start
+    if (line.startsWith("```")) {
+      const codeLines: string[] = [];
+      i++;
+      while (i < lines.length && !lines[i].startsWith("```")) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      elements.push(
+        <pre
+          key={key++}
+          style={{
+            background: "rgba(0,0,0,0.3)",
+            border: "1px solid rgba(255,255,255,0.1)",
+            borderRadius: "6px",
+            padding: "10px 12px",
+            fontSize: "12px",
+            overflowX: "auto",
+            margin: "6px 0",
+            color: "#7dd3fc",
+            fontFamily: "monospace",
+          }}
+        >
+          {codeLines.join("\n")}
+        </pre>
+      );
+      continue;
+    }
+
+    // Table row
+    if (line.startsWith("|")) {
+      const cells = line.split("|").filter((c) => c.trim() !== "");
+      if (cells.every((c) => c.trim().replace(/-/g, "") === "")) continue; // separator row
+      elements.push(
+        <div key={key++} style={{ display: "flex", gap: "4px", margin: "2px 0", fontSize: "12px" }}>
+          {cells.map((cell, ci) => (
+            <span
+              key={ci}
+              style={{
+                background: "rgba(255,255,255,0.07)",
+                borderRadius: "4px",
+                padding: "2px 8px",
+                flex: 1,
+                color: "#e2e8f0",
+              }}
+            >
+              {cell.trim()}
+            </span>
+          ))}
+        </div>
+      );
+      continue;
+    }
+
+    // List item
+    if (line.match(/^[-*•]\s/) || line.match(/^\d+\.\s/)) {
+      elements.push(
+        <div key={key++} style={{ display: "flex", gap: "6px", margin: "2px 0", fontSize: "13px" }}>
+          <span style={{ color: "#38bdf8", flexShrink: 0 }}>›</span>
+          <span>{inlineFormat(line.replace(/^[-*•]\s/, "").replace(/^\d+\.\s/, ""))}</span>
+        </div>
+      );
+      continue;
+    }
+
+    // Empty line → spacer
+    if (line.trim() === "") {
+      elements.push(<div key={key++} style={{ height: "4px" }} />);
+      continue;
+    }
+
+    // Normal line
+    elements.push(
+      <div key={key++} style={{ margin: "2px 0", fontSize: "13px", lineHeight: "1.5" }}>
+        {inlineFormat(line)}
+      </div>
+    );
+  }
+
+  return <>{elements}</>;
+}
+
+function inlineFormat(text: string): ReactNode[] {
+  // Handles **bold**, `inline code`, [link](url), ✅ emoji checkboxes
+  const parts: (JSX.Element | string)[] = [];
+  const regex = /\*\*(.+?)\*\*|`([^`]+)`|\[([^\]]+)\]\(([^)]+)\)/g;
+  let last = 0;
+  let match;
+  let key = 0;
+
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > last) parts.push(text.slice(last, match.index));
+    if (match[1]) {
+      parts.push(<strong key={key++} style={{ color: "#f0f9ff", fontWeight: 700 }}>{match[1]}</strong>);
+    } else if (match[2]) {
+      parts.push(
+        <code
+          key={key++}
+          style={{
+            background: "rgba(0,0,0,0.35)",
+            borderRadius: "4px",
+            padding: "1px 5px",
+            fontSize: "12px",
+            color: "#7dd3fc",
+            fontFamily: "monospace",
+          }}
+        >
+          {match[2]}
+        </code>
+      );
+    } else if (match[3] && match[4]) {
+      parts.push(
+        <a
+          key={key++}
+          href={match[4]}
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{ color: "#38bdf8", textDecoration: "underline" }}
+        >
+          {match[3]}
+        </a>
+      );
+    }
+    last = match.index + match[0].length;
+  }
+  if (last < text.length) parts.push(text.slice(last));
+  return parts;
+}
+
+export default function ChatbotWidget() {
+  const [open, setOpen] = useState(false);
+  const [messages, setMessages] = useState<Message[]>([
+    { id: 1, role: "bot", text: defaultMessage, time: getTime() },
+  ]);
+  const [input, setInput] = useState("");
+  const [typing, setTyping] = useState(false);
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, typing, open]);
+
+  const sendMessage = () => {
+    const trimmed = input.trim();
+    if (!trimmed) return;
+
+    const userMsg: Message = { id: Date.now(), role: "user", text: trimmed, time: getTime() };
+    setMessages((prev) => [...prev, userMsg]);
+    setInput("");
+    setTyping(true);
+
+    setTimeout(() => {
+      const botReply = getBotResponse(trimmed);
+      setMessages((prev) => [
+        ...prev,
+        { id: Date.now() + 1, role: "bot", text: botReply, time: getTime() },
+      ]);
+      setTyping(false);
+    }, 700);
+  };
+
+  const handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") sendMessage();
+  };
+
+  const quickQuestions = [
+    "How do I get a GitHub token?",
+    "How do I set up the project?",
+    "What does this app do?",
+    "How do I fix MongoDB errors?",
+  ];
+
+  return (
+    <>
+      {/* Floating bubble */}
+      <button
+        onClick={() => setOpen((o) => !o)}
+        title="Open Help Chat"
+        style={{
+          position: "fixed",
+          bottom: "28px",
+          right: "28px",
+          width: "58px",
+          height: "58px",
+          borderRadius: "50%",
+          background: "linear-gradient(135deg, #0ea5e9, #6366f1)",
+          border: "none",
+          cursor: "pointer",
+          boxShadow: "0 4px 24px rgba(14,165,233,0.45)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: 9999,
+          transition: "transform 0.2s, box-shadow 0.2s",
+          fontSize: "24px",
+        }}
+        onMouseEnter={(e) => {
+          (e.currentTarget as HTMLButtonElement).style.transform = "scale(1.1)";
+          (e.currentTarget as HTMLButtonElement).style.boxShadow = "0 6px 32px rgba(14,165,233,0.6)";
+        }}
+        onMouseLeave={(e) => {
+          (e.currentTarget as HTMLButtonElement).style.transform = "scale(1)";
+          (e.currentTarget as HTMLButtonElement).style.boxShadow = "0 4px 24px rgba(14,165,233,0.45)";
+        }}
+      >
+        {open ? "✕" : "🤖"}
+      </button>
+
+      {/* Chat window */}
+      {open && (
+        <div
+          style={{
+            position: "fixed",
+            bottom: "100px",
+            right: "28px",
+            width: "360px",
+            maxHeight: "560px",
+            borderRadius: "16px",
+            background: "linear-gradient(160deg, #0f172a 0%, #1e293b 100%)",
+            border: "1px solid rgba(99,102,241,0.3)",
+            boxShadow: "0 8px 48px rgba(0,0,0,0.5)",
+            display: "flex",
+            flexDirection: "column",
+            zIndex: 9998,
+            overflow: "hidden",
+            fontFamily: "'Segoe UI', system-ui, sans-serif",
+            animation: "chatPop 0.25s cubic-bezier(0.34,1.56,0.64,1)",
+          }}
+        >
+          <style>{`
+            @keyframes chatPop {
+              from { opacity: 0; transform: scale(0.85) translateY(20px); }
+              to   { opacity: 1; transform: scale(1)    translateY(0);     }
+            }
+            @keyframes blink {
+              0%,80%,100% { opacity: 0; } 40% { opacity: 1; }
+            }
+            .chat-scrollbar::-webkit-scrollbar { width: 4px; }
+            .chat-scrollbar::-webkit-scrollbar-track { background: transparent; }
+            .chat-scrollbar::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.4); border-radius: 4px; }
+          `}</style>
+
+          {/* Header */}
+          <div
+            style={{
+              padding: "14px 16px",
+              background: "linear-gradient(90deg, #0ea5e9, #6366f1)",
+              display: "flex",
+              alignItems: "center",
+              gap: "10px",
+            }}
+          >
+            <div style={{ fontSize: "22px" }}>🤖</div>
+            <div>
+              <div style={{ color: "#fff", fontWeight: 700, fontSize: "14px" }}>GitHub Tracker Assistant</div>
+              <div style={{ color: "rgba(255,255,255,0.75)", fontSize: "11px" }}>Always here to help</div>
+            </div>
+            <button
+              onClick={() => setOpen(false)}
+              style={{
+                marginLeft: "auto",
+                background: "rgba(255,255,255,0.15)",
+                border: "none",
+                borderRadius: "50%",
+                width: "28px",
+                height: "28px",
+                color: "#fff",
+                cursor: "pointer",
+                fontSize: "14px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              ✕
+            </button>
+          </div>
+
+          {/* Messages */}
+          <div
+            className="chat-scrollbar"
+            style={{
+              flex: 1,
+              overflowY: "auto",
+              padding: "14px 12px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "10px",
+            }}
+          >
+            {messages.map((msg) => (
+              <div
+                key={msg.id}
+                style={{
+                  display: "flex",
+                  flexDirection: msg.role === "user" ? "row-reverse" : "row",
+                  gap: "8px",
+                  alignItems: "flex-end",
+                }}
+              >
+                {/* Avatar */}
+                <div
+                  style={{
+                    width: "28px",
+                    height: "28px",
+                    borderRadius: "50%",
+                    background: msg.role === "bot"
+                      ? "linear-gradient(135deg,#0ea5e9,#6366f1)"
+                      : "linear-gradient(135deg,#10b981,#0ea5e9)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: "13px",
+                    flexShrink: 0,
+                  }}
+                >
+                  {msg.role === "bot" ? "🤖" : "👤"}
+                </div>
+
+                {/* Bubble */}
+                <div style={{ maxWidth: "78%" }}>
+                  <div
+                    style={{
+                      background: msg.role === "bot"
+                        ? "rgba(255,255,255,0.06)"
+                        : "linear-gradient(135deg,#0ea5e9,#6366f1)",
+                      color: "#e2e8f0",
+                      borderRadius: msg.role === "bot" ? "12px 12px 12px 2px" : "12px 12px 2px 12px",
+                      padding: "10px 13px",
+                      border: msg.role === "bot" ? "1px solid rgba(255,255,255,0.08)" : "none",
+                    }}
+                  >
+                    {msg.role === "bot" ? renderMarkdown(msg.text) : <span style={{ fontSize: "13px" }}>{msg.text}</span>}
+                  </div>
+                  <div
+                    style={{
+                      fontSize: "10px",
+                      color: "rgba(255,255,255,0.3)",
+                      marginTop: "3px",
+                      textAlign: msg.role === "user" ? "right" : "left",
+                      paddingLeft: msg.role === "bot" ? "4px" : 0,
+                      paddingRight: msg.role === "user" ? "4px" : 0,
+                    }}
+                  >
+                    {msg.time}
+                  </div>
+                </div>
+              </div>
+            ))}
+
+            {/* Typing indicator */}
+            {typing && (
+              <div style={{ display: "flex", gap: "8px", alignItems: "flex-end" }}>
+                <div
+                  style={{
+                    width: "28px", height: "28px", borderRadius: "50%",
+                    background: "linear-gradient(135deg,#0ea5e9,#6366f1)",
+                    display: "flex", alignItems: "center", justifyContent: "center", fontSize: "13px",
+                  }}
+                >
+                  🤖
+                </div>
+                <div
+                  style={{
+                    background: "rgba(255,255,255,0.06)",
+                    border: "1px solid rgba(255,255,255,0.08)",
+                    borderRadius: "12px 12px 12px 2px",
+                    padding: "12px 16px",
+                    display: "flex",
+                    gap: "4px",
+                    alignItems: "center",
+                  }}
+                >
+                  {[0, 0.2, 0.4].map((delay, i) => (
+                    <span
+                      key={i}
+                      style={{
+                        width: "6px", height: "6px",
+                        borderRadius: "50%", background: "#7dd3fc",
+                        animation: `blink 1.2s ${delay}s infinite`,
+                        display: "inline-block",
+                      }}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+            <div ref={bottomRef} />
+          </div>
+
+          {/* Quick questions */}
+          {messages.length <= 1 && (
+            <div style={{ padding: "0 12px 8px", display: "flex", flexWrap: "wrap", gap: "6px" }}>
+              {quickQuestions.map((q) => (
+                <button
+                  key={q}
+                  onClick={() => {
+                    setInput(q);
+                    setTimeout(() => {
+                      const userMsg: Message = { id: Date.now(), role: "user", text: q, time: getTime() };
+                      setMessages((prev) => [...prev, userMsg]);
+                      setInput("");
+                      setTyping(true);
+                      setTimeout(() => {
+                        setMessages((prev) => [
+                          ...prev,
+                          { id: Date.now() + 1, role: "bot", text: getBotResponse(q), time: getTime() },
+                        ]);
+                        setTyping(false);
+                      }, 700);
+                    }, 0);
+                  }}
+                  style={{
+                    background: "rgba(99,102,241,0.15)",
+                    border: "1px solid rgba(99,102,241,0.35)",
+                    borderRadius: "20px",
+                    color: "#a5b4fc",
+                    fontSize: "11px",
+                    padding: "4px 10px",
+                    cursor: "pointer",
+                    transition: "background 0.15s",
+                  }}
+                  onMouseEnter={(e) => { (e.currentTarget as HTMLButtonElement).style.background = "rgba(99,102,241,0.3)"; }}
+                  onMouseLeave={(e) => { (e.currentTarget as HTMLButtonElement).style.background = "rgba(99,102,241,0.15)"; }}
+                >
+                  {q}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {/* Input bar */}
+          <div
+            style={{
+              padding: "10px 12px",
+              borderTop: "1px solid rgba(255,255,255,0.07)",
+              display: "flex",
+              gap: "8px",
+            }}
+          >
+            <input
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKey}
+              placeholder="Ask me anything..."
+              style={{
+                flex: 1,
+                background: "rgba(255,255,255,0.06)",
+                border: "1px solid rgba(99,102,241,0.3)",
+                borderRadius: "10px",
+                padding: "9px 13px",
+                color: "#e2e8f0",
+                fontSize: "13px",
+                outline: "none",
+              }}
+            />
+            <button
+              onClick={sendMessage}
+              disabled={!input.trim()}
+              style={{
+                background: input.trim()
+                  ? "linear-gradient(135deg,#0ea5e9,#6366f1)"
+                  : "rgba(255,255,255,0.08)",
+                border: "none",
+                borderRadius: "10px",
+                padding: "0 14px",
+                color: "#fff",
+                cursor: input.trim() ? "pointer" : "not-allowed",
+                fontSize: "16px",
+                transition: "background 0.2s",
+              }}
+            >
+              ➤
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/Chatbot/chatbotData.ts b/src/components/Chatbot/chatbotData.ts
new file mode 100644
index 0000000..eee6a11
--- /dev/null
+++ b/src/components/Chatbot/chatbotData.ts
@@ -0,0 +1,179 @@
+export interface FAQ {
+  keywords: string[];
+  answer: string;
+}
+
+export const faqs: FAQ[] = [
+  {
+    keywords: ["token", "access token", "github token", "generate token", "personal access token", "pat"],
+    answer: `🔐 **How to get a GitHub Token:**
+
+1. Go to [GitHub Settings → Developer Settings → Tokens](https://github.com/settings/tokens)
+2. Click **"Generate new token (classic)"**
+3. Give it a name and set an expiration date
+4. Select scopes: ✅ \`public_repo\` and ✅ \`read:user\`
+5. Click **"Generate Token"**
+6. **Copy it immediately** — you won't see it again!
+
+Then paste it into the input field when prompted in the app.`,
+  },
+  {
+    keywords: ["install", "setup", "clone", "start", "run", "frontend", "npm", "how to use", "get started", "begin"],
+    answer: `🚀 **Frontend Setup:**
+
+\`\`\`bash
+git clone https://github.com/mehul-m-prajapati/github_tracker.git
+cd github_tracker
+npm install
+npm run dev
+\`\`\`
+
+Then open **http://localhost:5173** in your browser.`,
+  },
+  {
+    keywords: ["backend", "server", "api", "express", "node"],
+    answer: `🔧 **Backend Setup:**
+
+\`\`\`bash
+cd backend
+npm install
+npm start
+\`\`\`
+
+The backend runs at **http://localhost:5000**
+
+> Make sure you have a \`.env\` file in the \`backend/\` folder with \`MONGO_URI\` and \`SESSION_SECRET\` set.`,
+  },
+  {
+    keywords: ["mongodb", "mongo", "database", "db", "connection", "connect"],
+    answer: `🗄️ **MongoDB Setup:**
+
+1. Install [MongoDB Community](https://www.mongodb.com/try/download/community)
+2. Start it by running \`mongod\` in your terminal
+3. Create a \`backend/.env\` file:
+
+\`\`\`
+MONGO_URI=mongodb://127.0.0.1:27017/github_tracker
+SESSION_SECRET=anysecretstring
+\`\`\`
+
+If MongoDB keeps failing, you can still use the frontend features independently.`,
+  },
+  {
+    keywords: ["test", "jasmine", "spec", "testing", "run test"],
+    answer: `✅ **Running Tests:**
+
+\`\`\`bash
+mongod          # Start MongoDB first
+npx jasmine     # Run the tests
+\`\`\`
+
+Test files are in the \`spec/\` directory:
+- \`spec/user.model.spec.cjs\`
+- \`spec/auth.routes.spec.cjs\`
+
+If you see "No specs found", make sure files are named \`*.spec.js\` or \`*.spec.cjs\`.`,
+  },
+  {
+    keywords: ["what is", "about", "purpose", "app", "tool", "tracker", "github tracker", "features", "does it do"],
+    answer: `📊 **About GitHub Tracker:**
+
+GitHub Tracker is a full-stack web app to **track and analyze GitHub user activity**.
+
+**Features include:**
+- ⭐ Stars & Forks tracking
+- 🐛 Issues monitoring
+- 🔀 Open & Closed PRs
+- 📈 Activity Analytics
+- 👥 Multi-User Tracking
+- 🔍 Smart Search
+
+**Tech Stack:** React + Vite, Tailwind + MUI, Node.js + Express, MongoDB, Passport.js`,
+  },
+  {
+    keywords: ["auth", "login", "passport", "authentication", "sign in", "signup"],
+    answer: `🔒 **Authentication:**
+
+The app uses **Passport.js** for backend authentication.
+
+- You need to be logged in to access certain features
+- Sessions are managed via MongoDB
+- Make sure the backend is running for login to work`,
+  },
+  {
+    keywords: ["error", "issue", "problem", "not working", "broken", "crash", "fail"],
+    answer: `🛠️ **Common Fixes:**
+
+**MongoDB not connecting?**
+→ Run \`mongod\` in a separate terminal and check your \`.env\` file.
+
+**"No specs found" in tests?**
+→ Ensure test files are in \`spec/\` and named \`*.spec.cjs\`.
+
+**Frontend not loading?**
+→ Run \`npm install\` then \`npm run dev\` from the root folder.
+
+**Still stuck?** Open an issue on the [GitHub repo](https://github.com/mehul-m-prajapati/github_tracker/issues).`,
+  },
+  {
+    keywords: ["tech", "stack", "technology", "react", "vite", "tailwind", "express", "built with"],
+    answer: `⚙️ **Tech Stack:**
+
+| Layer | Technology |
+|-------|-----------|
+| Frontend | React + Vite + TypeScript |
+| Styling | Tailwind CSS + MUI |
+| HTTP | Axios |
+| Backend | Node.js + Express |
+| Database | MongoDB |
+| Auth | Passport.js |
+| Testing | Jasmine + Supertest |`,
+  },
+  {
+    keywords: ["contribute", "contribution", "pr", "pull request", "open source", "gssoc"],
+    answer: `🤝 **How to Contribute:**
+
+1. Fork the repo on GitHub
+2. Create a branch: \`git checkout -b feature/your-feature\`
+3. Make your changes
+4. Commit: \`git commit -m "feat: describe your change"\`
+5. Push: \`git push origin feature/your-feature\`
+6. Open a **Pull Request** and link the issue number
+
+This project is part of **GSSoC 2026** 🎉`,
+  },
+];
+
+export const defaultMessage = `👋 Hi! I'm the **GitHub Tracker Assistant**.
+
+I can help you with:
+- 🔐 Getting a GitHub access token
+- 🚀 Setting up the project
+- 🗄️ MongoDB configuration
+- ✅ Running tests
+- 📊 Understanding the app features
+- 🤝 How to contribute
+
+Just type your question below!`;
+
+export function getBotResponse(userInput: string): string {
+  const input = userInput.toLowerCase().trim();
+
+  if (!input) return "Please type a question and I'll do my best to help!";
+
+  for (const faq of faqs) {
+    if (faq.keywords.some((kw) => input.includes(kw))) {
+      return faq.answer;
+    }
+  }
+
+  return `🤔 I'm not sure about that specific question. Try asking about:
+
+- **GitHub token** — how to generate one
+- **Setup** — how to install and run the project  
+- **MongoDB** — database connection issues
+- **Tests** — how to run Jasmine tests
+- **Features** — what the app does
+
+Or open an issue on [GitHub](https://github.com/mehul-m-prajapati/github_tracker/issues) for more help!`;
+}

From 7ab95967a211a0f8337fccd5ffea82a168105c09 Mon Sep 17 00:00:00 2001
From: Omkar Kadam <kaizenki572@gmail.com>
Date: Sun, 17 May 2026 12:39:47 +0530
Subject: [PATCH 2/3] fix: address CodeRabbit review suggestions

- Add URL validation to prevent unsafe href schemes
- Replace Date.now() IDs with stable useRef counter
- Fix JSX.Element[] type to ReactNode[]
---
 src/components/Chatbot/ChatbotWidget.tsx | 96 +++++++++++++-----------
 1 file changed, 51 insertions(+), 45 deletions(-)

diff --git a/src/components/Chatbot/ChatbotWidget.tsx b/src/components/Chatbot/ChatbotWidget.tsx
index 4647ca7..6ddff17 100644
--- a/src/components/Chatbot/ChatbotWidget.tsx
+++ b/src/components/Chatbot/ChatbotWidget.tsx
@@ -1,26 +1,25 @@
 import { useState, useRef, useEffect, ReactNode } from "react";
 import { getBotResponse, defaultMessage } from "./chatbotData";
-
+ 
 interface Message {
   id: number;
   role: "bot" | "user";
   text: string;
   time: string;
 }
-
+ 
 function getTime() {
   return new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
 }
-
-// Simple markdown-like renderer for bold, code blocks, inline code, links, lists
+ 
 function renderMarkdown(text: string): ReactNode {
   const lines = text.split("\n");
-  const elements: JSX.Element[] = [];
+  const elements: ReactNode[] = [];
   let key = 0;
-
+ 
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i];
-
+ 
     // Code block start
     if (line.startsWith("```")) {
       const codeLines: string[] = [];
@@ -49,7 +48,7 @@ function renderMarkdown(text: string): ReactNode {
       );
       continue;
     }
-
+ 
     // Table row
     if (line.startsWith("|")) {
       const cells = line.split("|").filter((c) => c.trim() !== "");
@@ -74,7 +73,7 @@ function renderMarkdown(text: string): ReactNode {
       );
       continue;
     }
-
+ 
     // List item
     if (line.match(/^[-*•]\s/) || line.match(/^\d+\.\s/)) {
       elements.push(
@@ -85,13 +84,13 @@ function renderMarkdown(text: string): ReactNode {
       );
       continue;
     }
-
+ 
     // Empty line → spacer
     if (line.trim() === "") {
       elements.push(<div key={key++} style={{ height: "4px" }} />);
       continue;
     }
-
+ 
     // Normal line
     elements.push(
       <div key={key++} style={{ margin: "2px 0", fontSize: "13px", lineHeight: "1.5" }}>
@@ -99,10 +98,10 @@ function renderMarkdown(text: string): ReactNode {
       </div>
     );
   }
-
+ 
   return <>{elements}</>;
 }
-
+ 
 function inlineFormat(text: string): ReactNode[] {
   // Handles **bold**, `inline code`, [link](url), ✅ emoji checkboxes
   const parts: (JSX.Element | string)[] = [];
@@ -110,7 +109,7 @@ function inlineFormat(text: string): ReactNode[] {
   let last = 0;
   let match;
   let key = 0;
-
+ 
   while ((match = regex.exec(text)) !== null) {
     if (match.index > last) parts.push(text.slice(last, match.index));
     if (match[1]) {
@@ -132,67 +131,74 @@ function inlineFormat(text: string): ReactNode[] {
         </code>
       );
     } else if (match[3] && match[4]) {
-      parts.push(
-        <a
-          key={key++}
-          href={match[4]}
-          target="_blank"
-          rel="noopener noreferrer"
-          style={{ color: "#38bdf8", textDecoration: "underline" }}
-        >
-          {match[3]}
-        </a>
-      );
+      const href = match[4];
+      const isSafe = href.startsWith("http://") || href.startsWith("https://") || href.startsWith("/");
+      if (!isSafe) {
+        parts.push(<span key={key++} style={{ color: "#38bdf8" }}>{match[3]}</span>);
+      } else {
+        parts.push(
+          <a
+            key={key++}
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{ color: "#38bdf8", textDecoration: "underline" }}
+          >
+            {match[3]}
+          </a>
+        );
+      }
     }
     last = match.index + match[0].length;
   }
   if (last < text.length) parts.push(text.slice(last));
   return parts;
 }
-
+ 
 export default function ChatbotWidget() {
   const [open, setOpen] = useState(false);
+  const nextId = useRef(2);
   const [messages, setMessages] = useState<Message[]>([
     { id: 1, role: "bot", text: defaultMessage, time: getTime() },
   ]);
   const [input, setInput] = useState("");
   const [typing, setTyping] = useState(false);
   const bottomRef = useRef<HTMLDivElement>(null);
-
+ 
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages, typing, open]);
-
+ 
   const sendMessage = () => {
     const trimmed = input.trim();
     if (!trimmed) return;
-
-    const userMsg: Message = { id: Date.now(), role: "user", text: trimmed, time: getTime() };
+ 
+    const userMsg: Message = { id: nextId.current++, role: "user", text: trimmed, time: getTime() };
     setMessages((prev) => [...prev, userMsg]);
     setInput("");
     setTyping(true);
-
+ 
     setTimeout(() => {
       const botReply = getBotResponse(trimmed);
       setMessages((prev) => [
         ...prev,
-        { id: Date.now() + 1, role: "bot", text: botReply, time: getTime() },
+        { id: nextId.current++, role: "bot", text: botReply, time: getTime() },
       ]);
       setTyping(false);
     }, 700);
   };
-
+ 
   const handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter") sendMessage();
   };
-
+ 
   const quickQuestions = [
     "How do I get a GitHub token?",
     "How do I set up the project?",
     "What does this app do?",
     "How do I fix MongoDB errors?",
   ];
-
+ 
   return (
     <>
       {/* Floating bubble */}
@@ -228,7 +234,7 @@ export default function ChatbotWidget() {
       >
         {open ? "✕" : "🤖"}
       </button>
-
+ 
       {/* Chat window */}
       {open && (
         <div
@@ -262,7 +268,7 @@ export default function ChatbotWidget() {
             .chat-scrollbar::-webkit-scrollbar-track { background: transparent; }
             .chat-scrollbar::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.4); border-radius: 4px; }
           `}</style>
-
+ 
           {/* Header */}
           <div
             style={{
@@ -298,7 +304,7 @@ export default function ChatbotWidget() {
               ✕
             </button>
           </div>
-
+ 
           {/* Messages */}
           <div
             className="chat-scrollbar"
@@ -339,7 +345,7 @@ export default function ChatbotWidget() {
                 >
                   {msg.role === "bot" ? "🤖" : "👤"}
                 </div>
-
+ 
                 {/* Bubble */}
                 <div style={{ maxWidth: "78%" }}>
                   <div
@@ -370,7 +376,7 @@ export default function ChatbotWidget() {
                 </div>
               </div>
             ))}
-
+ 
             {/* Typing indicator */}
             {typing && (
               <div style={{ display: "flex", gap: "8px", alignItems: "flex-end" }}>
@@ -410,7 +416,7 @@ export default function ChatbotWidget() {
             )}
             <div ref={bottomRef} />
           </div>
-
+ 
           {/* Quick questions */}
           {messages.length <= 1 && (
             <div style={{ padding: "0 12px 8px", display: "flex", flexWrap: "wrap", gap: "6px" }}>
@@ -420,14 +426,14 @@ export default function ChatbotWidget() {
                   onClick={() => {
                     setInput(q);
                     setTimeout(() => {
-                      const userMsg: Message = { id: Date.now(), role: "user", text: q, time: getTime() };
+                      const userMsg: Message = { id: nextId.current++, role: "user", text: q, time: getTime() };
                       setMessages((prev) => [...prev, userMsg]);
                       setInput("");
                       setTyping(true);
                       setTimeout(() => {
                         setMessages((prev) => [
                           ...prev,
-                          { id: Date.now() + 1, role: "bot", text: getBotResponse(q), time: getTime() },
+                          { id: nextId.current++, role: "bot", text: getBotResponse(q), time: getTime() },
                         ]);
                         setTyping(false);
                       }, 700);
@@ -451,7 +457,7 @@ export default function ChatbotWidget() {
               ))}
             </div>
           )}
-
+ 
           {/* Input bar */}
           <div
             style={{
@@ -500,4 +506,4 @@ export default function ChatbotWidget() {
       )}
     </>
   );
-}
+}
\ No newline at end of file

From 681d02c1fcc284b7966f8cf3cd0e9a9973468968 Mon Sep 17 00:00:00 2001
From: Omkar Kadam <kaizenki572@gmail.com>
Date: Sun, 17 May 2026 23:33:42 +0530
Subject: [PATCH 3/3] fix: address CodeRabbit accessibility and responsive
 suggestions

---
 src/components/Chatbot/ChatbotWidget.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Chatbot/ChatbotWidget.tsx b/src/components/Chatbot/ChatbotWidget.tsx
index 6ddff17..c6339fc 100644
--- a/src/components/Chatbot/ChatbotWidget.tsx
+++ b/src/components/Chatbot/ChatbotWidget.tsx
@@ -189,8 +189,8 @@ export default function ChatbotWidget() {
   };
  
   const handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") sendMessage();
-  };
+  if (e.key === "Enter" && !e.nativeEvent.isComposing) sendMessage();
+};
  
   const quickQuestions = [
     "How do I get a GitHub token?",
@@ -242,8 +242,8 @@ export default function ChatbotWidget() {
             position: "fixed",
             bottom: "100px",
             right: "28px",
-            width: "360px",
-            maxHeight: "560px",
+            width: "min(360px, calc(100vw - 32px))",
+maxHeight: "min(560px, calc(100vh - 120px))",
             borderRadius: "16px",
             background: "linear-gradient(160deg, #0f172a 0%, #1e293b 100%)",
             border: "1px solid rgba(99,102,241,0.3)",
@@ -471,6 +471,8 @@ export default function ChatbotWidget() {
               value={input}
               onChange={(e) => setInput(e.target.value)}
               onKeyDown={handleKey}
+              onFocus={(e) => { e.currentTarget.style.boxShadow = "0 0 0 2px rgba(99,102,241,0.6)"; }}
+              onBlur={(e) => { e.currentTarget.style.boxShadow = "none"; }}
               placeholder="Ask me anything..."
               style={{
                 flex: 1,