feat: Add chatbot help assistant widget (#180)#289
Conversation
- 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
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdds an in-app FAQ chatbot: keyword-based responder and default greeting, a ChatbotWidget with markdown-like rendering, quick-question shortcuts, UI for a floating chat window with typing indicator, and App-level integration rendering the widget before the Toaster. ChangesChatbot Widget Feature
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you @OmkarAKadam for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/components/Chatbot/ChatbotWidget.tsx (1)
420-434: ⚡ Quick winRefactor quick question handler to reuse
sendMessagelogic.The quick question click handler duplicates the message-sending logic from
sendMessage. Extracting this into a reusable function would improve maintainability and reduce the risk of inconsistencies.♻️ Proposed refactor
+ const sendUserMessage = (text: string) => { + const userMsg: Message = { id: Date.now(), role: "user", text, time: getTime() }; + setMessages((prev) => [...prev, userMsg]); + setTyping(true); + + setTimeout(() => { + const botReply = getBotResponse(text); + setMessages((prev) => [ + ...prev, + { id: Date.now() + 1, role: "bot", text: botReply, time: getTime() }, + ]); + setTyping(false); + }, 700); + }; + 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); + sendUserMessage(trimmed); }; // ... <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); + sendUserMessage(q); }}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/Chatbot/ChatbotWidget.tsx` around lines 420 - 434, The onClick quick-question handler in ChatbotWidget.tsx duplicates message creation and bot-response logic found in sendMessage; replace the duplicated sequence (setInput, setMessages adding userMsg, setTyping, adding bot response using getBotResponse and getTime) by calling the existing sendMessage function or extract a small helper used by both; ensure the helper or sendMessage accepts the quick question string (q), still creates a Message object (type Message), updates setMessages, clears setInput, toggles setTyping, and appends the bot response (using getBotResponse and getTime) so behavior remains identical and DRY.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/Chatbot/ChatbotWidget.tsx`:
- Around line 170-179: Replace the Date.now() IDs with a stable incrementing
counter: add a messageIdRef (e.g., const messageIdRef = useRef(0)) in the
ChatbotWidget component and use messageIdRef.current++ to assign ids for the
userMsg and bot reply (replace the Date.now() and Date.now()+1 usages where
userMsg is created and where the bot reply is appended via setMessages and also
in the quick questions handler occurrences referenced in the comment); ensure
the counter is used consistently for every message append so keys remain unique
and do not trigger unnecessary React re-renders.
- Around line 134-145: In ChatbotWidget (where parts.push creates the <a> using
match[3] and match[4]), validate the href before rendering: parse or normalize
match[4], lower-case its scheme and allow only safe schemes (e.g., http, https,
mailto) and reject dangerous schemes like javascript: or data:; if the URL is
invalid or uses a disallowed scheme, render the link text as plain text (using
match[3]) or omit the anchor instead of assigning match[4] to href. Update the
logic around the parts.push(...) anchor creation to perform this check and
branch accordingly.
---
Nitpick comments:
In `@src/components/Chatbot/ChatbotWidget.tsx`:
- Around line 420-434: The onClick quick-question handler in ChatbotWidget.tsx
duplicates message creation and bot-response logic found in sendMessage; replace
the duplicated sequence (setInput, setMessages adding userMsg, setTyping, adding
bot response using getBotResponse and getTime) by calling the existing
sendMessage function or extract a small helper used by both; ensure the helper
or sendMessage accepts the quick question string (q), still creates a Message
object (type Message), updates setMessages, clears setInput, toggles setTyping,
and appends the bot response (using getBotResponse and getTime) so behavior
remains identical and DRY.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c8209adf-95e8-4ea7-acae-2cd33b1ab064
📒 Files selected for processing (3)
src/App.tsxsrc/components/Chatbot/ChatbotWidget.tsxsrc/components/Chatbot/chatbotData.ts
- Add URL validation to prevent unsafe href schemes - Replace Date.now() IDs with stable useRef counter - Fix JSX.Element[] type to ReactNode[]
|
Hi @coderabbitai, addressed all review suggestions:
Ready for re-review! |
|
The PR description image shows the GitHub Tracker homepage at
🐇✨ ✅ Actions performedReview triggered.
|
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/Chatbot/ChatbotWidget.tsx`:
- Around line 470-484: The input in ChatbotWidget.tsx currently removes the
browser outline (inline style on the <input> near setInput/handleKey) and
provides no replacement focus indicator; restore an accessible visible focus
state by replacing outline: "none" with an explicit focus style (either add a
focused inline style or a CSS class) that shows a clear high-contrast
ring/box-shadow or border change on :focus (e.g. a 2px solid or visible
box-shadow using the purple accent color) so keyboard users can see focus on the
input control.
- Around line 240-257: The fixed-size chat container in ChatbotWidget.tsx (the
inline style on the main div) can be clipped on small viewports; change the
sizing to be responsive by replacing the hard width/height with viewport-aware
constraints—e.g., set width to a responsive expression like using maxWidth/min
with the current 360px fallback (so it never exceeds available screen width
minus margins) and set maxHeight relative to 100vh (or use calc(100vh - safe
margins)) so the widget shrinks on short screens; keep the existing right/bottom
offsets but consider using safe-area insets for mobile; update the inline style
in the div within ChatbotWidget.tsx accordingly.
- Around line 191-193: The Enter key handler handleKey currently calls
sendMessage on every Enter press and should ignore Enter events generated while
an IME composition is active; update handleKey
(React.KeyboardEvent<HTMLInputElement> e) to check e.nativeEvent.isComposing and
return early if true, then only call sendMessage() when
!e.nativeEvent.isComposing and e.key === "Enter" to avoid submitting partial IME
compositions.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: fa66416e-9d1e-45bf-a502-4cc38e730c12
📒 Files selected for processing (2)
src/App.tsxsrc/components/Chatbot/ChatbotWidget.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/App.tsx
|
@coderabbitai Addressed all 3 suggestions: ✅ IME fix — added Ready for re-review! |
|
The PR description image shows the GitHub Tracker homepage at
Triggering a fresh review now! 🐇✨ ✅ Actions performedReview triggered.
|
|
Hi @mehul-m-prajapati, PR #289 is ready for your review! The chatbot is fully implemented, all CodeRabbit review suggestions have been addressed (security, accessibility, responsive design), and all checks are passing. Would appreciate a look when you get a chance. Thanks! |
1 participant
🏷️ Program
GSSOC 2026
Related Issue
Description
Adds a floating chatbot help assistant to the bottom-right corner of the app.
It uses keyword-based FAQ matching to answer common user questions about GitHub
token generation, project setup, MongoDB configuration, Jasmine testing, and
app features. No external API keys or dependencies required — pure React + TypeScript.
How Has This Been Tested?
Manually tested the following queries in the browser at http://localhost:5173:
Screenshots (if applicable)
Type of Change
Summary by CodeRabbit