feat: add FAQs and support page#128
Open
Ayush-0918 wants to merge 2 commits into
Open
Conversation
🤖 CodeAnt AI — Review Status
Updated in place by CodeAnt AI · last 5 reviews |
github-actions
Bot
added
ECSoC26
📝 WalkthroughWalkthroughAdds a ChangesFAQs and Support
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant Visitor
participant FAQSearch
participant SupportPage
participant FAQAccordion
Visitor->>FAQSearch: Enter search text
FAQSearch->>SupportPage: Send search value
SupportPage->>SupportPage: Filter questions and answers
SupportPage->>FAQAccordion: Render matching FAQs
Visitor->>FAQAccordion: Select a question
FAQAccordion->>FAQAccordion: Expand or collapse answer
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| title="Documentation" | ||
| description="Comprehensive guides on using the Kepler dashboard and API." | ||
| linkText="Read Docs" | ||
| href="/docs" |
There was a problem hiding this comment.
Passing /docs to SupportCard sends this internal route through an anchor that always has target="_blank". Clicking the Documentation card opens a new tab and reloads the application instead of preserving the current SPA session like the other internal navigation links.
Prompt To Fix With AI
This is a comment left during a code review.
Path: frontend/src/pages/Support.tsx
Line: 84
Comment:
**Internal Route Opens New Tab**
Passing `/docs` to `SupportCard` sends this internal route through an anchor that always has `target="_blank"`. Clicking the Documentation card opens a new tab and reloads the application instead of preserving the current SPA session like the other internal navigation links.
How can I resolve this? If you propose a fix, please make it concise.Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
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 `@frontend/src/components/FAQAccordion.tsx`:
- Around line 30-40: Update the accordion card wrapper around the button in
FAQAccordion to avoid clipping the keyboard focus indicator: replace the current
overflow-hidden-dependent focus treatment with a card-level focus-within ring or
an inset focus indicator, while preserving the existing expanded/collapsed
styling and button behavior.
In `@frontend/src/pages/Support.tsx`:
- Around line 17-24: Update the filteredFaqs useMemo to trim searchTerm before
lowercasing and matching, while preserving the existing faqs return for empty or
whitespace-only queries. Use the trimmed, case-normalized query for both
faq.question and faq.answer comparisons.
- Line 11: Use the reduced-motion value from Support’s useReducedMotion call by
passing it into the FAQAccordion component, then update FAQAccordion’s rotation
and height transition logic to disable or shorten those animations when reduced
motion is enabled. Apply the change in frontend/src/pages/Support.tsx at lines
11-11 and frontend/src/components/FAQAccordion.tsx at lines 48-66, preserving
normal animations otherwise.
🪄 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 Plus
Run ID: 622a8b5f-37eb-468a-b33c-1c09fc49fe54
📒 Files selected for processing (8)
frontend/src/App.tsxfrontend/src/components/FAQAccordion.tsxfrontend/src/components/FAQSearch.tsxfrontend/src/components/SupportCard.tsxfrontend/src/components/TroubleshootingCard.tsxfrontend/src/components/layouts/MarketingLayout.tsxfrontend/src/data/faqData.tsfrontend/src/pages/Support.tsx
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
| @@ -0,0 +1,155 @@ | |||
| import React, { useState, useMemo, useEffect } from "react"; | |||
| import { motion, useReducedMotion } from "framer-motion"; | |||
There was a problem hiding this comment.
Suggestion: motion is imported but never used, which introduces dead code and will fail strict lint configurations that enforce unused imports. Remove the unused import or use it intentionally. [code quality]
Severity Level: Major ⚠️
⚠️ Linting fails due to unused import symbol motion.
⚠️ CI pipelines running eslint may be blocked.
⚠️ Slightly increased complexity from unnecessary animation import.Steps of Reproduction ✅
1. Open frontend/src/pages/Support.tsx and observe the import at line 2: import { motion,
useReducedMotion } from "framer-motion"; there are no references to motion in the rest of
the SupportPage component (lines 9-153).
2. From the frontend directory, run the lint command defined in frontend/package.json line
9 ("lint": "eslint ."), which invokes ESLint over the entire frontend codebase.
3. Under the default eslint:recommended configuration (pulled in via @eslint/js in
devDependencies at frontend/package.json:48), ESLint applies the no-unused-vars rule,
detects that motion is imported but never used in Support.tsx:2, and emits an error such
as "motion is defined but never used".
4. If linting is enforced in CI or as a pre-commit hook, this unused import causes lint
runs to fail and can block builds or pull request merges until the dead import is removed
or motion is actually used.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/pages/Support.tsx
**Line:** 2:2
**Comment:**
*Code Quality: `motion` is imported but never used, which introduces dead code and will fail strict lint configurations that enforce unused imports. Remove the unused import or use it intentionally.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix|
|
||
| export const SupportPage: React.FC = () => { | ||
| const [searchTerm, setSearchTerm] = useState(""); | ||
| const reduce = useReducedMotion(); |
There was a problem hiding this comment.
Suggestion: The value returned by useReducedMotion is assigned but never used, leaving dead state in the component and causing unused-variable lint failures in strict setups. Remove the variable or apply it to animation behavior. [code quality]
Severity Level: Major ⚠️
⚠️ Linting fails due to unused variable reduce.
⚠️ Dead hook state complicates SupportPage maintenance.
⚠️ Suggests incomplete reduced-motion accessibility implementation.Steps of Reproduction ✅
1. Inspect SupportPage in frontend/src/pages/Support.tsx and note that at line 11 the code
declares const reduce = useReducedMotion(); but there are no references to reduce anywhere
else in that component body (lines 17-153).
2. From the frontend directory, run the lint script "eslint ." defined in
frontend/package.json line 9; ESLint walks Support.tsx along with the rest of the project.
3. With eslint:recommended enabled (via @eslint/js in devDependencies), ESLint’s
no-unused-vars rule flags reduce as an unused variable at Support.tsx:11, emitting an
error such as "reduce is assigned a value but never used".
4. In setups where linting is required for successful builds or CI pipelines, this unused
useReducedMotion value causes the lint job to fail, and it also leaves dead React hook
state in the component that can confuse future maintainers about whether reduced-motion
behavior is actually implemented.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/pages/Support.tsx
**Line:** 11:11
**Comment:**
*Code Quality: The value returned by `useReducedMotion` is assigned but never used, leaving dead state in the component and causing unused-variable lint failures in strict setups. Remove the variable or apply it to animation behavior.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix| title="Documentation" | ||
| description="Comprehensive guides on using the Kepler dashboard and API." | ||
| linkText="Read Docs" | ||
| href="/docs" |
There was a problem hiding this comment.
Suggestion: This card uses an internal route (/docs) through a component that renders an external-style anchor (target="_blank"), which bypasses React Router navigation and causes a full page load in a new tab. Use in-app routing for internal destinations (or treat internal and external links differently). [api mismatch]
Severity Level: Major ⚠️
⚠️ Docs card bypasses React Router, causing full reload.
⚠️ Internal docs open inconsistently across different entrypoints.
⚠️ SPA navigation state and scroll position can be lost.Steps of Reproduction ✅
1. Confirm that the docs page is an internal route by inspecting frontend/src/App.tsx:85,
where Route path "/docs" is wired to the DocsPage component, and by seeing other internal
links use React Router Link, for example in frontend/src/pages/SolutionsPage.tsx:14-18
with Link to "/docs".
2. Open the Support page at /support via the marketing navigation (MarketingLayout
navLinks in frontend/src/components/layouts/MarketingLayout.tsx:9-16 include { label:
"Support", to: "/support" }) so that SupportPage renders.
3. On SupportPage (frontend/src/pages/Support.tsx:80-85), observe the first SupportCard
titled "Documentation" where the href prop is set to "/docs" at line 84, even though this
is an internal SPA route.
4. Inspect the SupportCard implementation in
frontend/src/components/SupportCard.tsx:17-21, which renders a plain anchor element with
href={href}, target="_blank", and rel="noopener noreferrer"; clicking the Documentation
card on the Support page therefore opens "/docs" in a new browser tab with a full page
load instead of using React Router navigation in the existing SPA context, unlike other
doc entry points that use Link.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/pages/Support.tsx
**Line:** 84:84
**Comment:**
*Api Mismatch: This card uses an internal route (`/docs`) through a component that renders an external-style anchor (`target="_blank"`), which bypasses React Router navigation and causes a full page load in a new tab. Use in-app routing for internal destinations (or treat internal and external links differently).
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
Comment on lines
+90
to
+140
| href="https://github.com/Ayush-0918/Kepler/issues" | ||
| /> | ||
| <SupportCard | ||
| title="Discussions" | ||
| description="Join the community to discuss space traffic management." | ||
| linkText="Join Discussion" | ||
| href="https://github.com/Ayush-0918/Kepler/discussions" | ||
| /> | ||
| <SupportCard | ||
| title="Contribution Guide" | ||
| description="Learn how to contribute to the Kepler open-source project." | ||
| linkText="Start Contributing" | ||
| href="https://github.com/Ayush-0918/Kepler/blob/main/CONTRIBUTING.md" | ||
| /> | ||
| <SupportCard | ||
| title="Changelog" | ||
| description="See what's new and track recent updates to the platform." | ||
| linkText="View Changelog" | ||
| href="https://github.com/Ayush-0918/Kepler/releases" | ||
| /> | ||
| </div> | ||
| </section> | ||
|
|
||
| {/* CTA Section */} | ||
| <section className="text-center relative overflow-hidden rounded-3xl border border-[#1B2436] bg-[#0C1220]/80 p-12 max-w-4xl mx-auto"> | ||
| <div | ||
| aria-hidden="true" | ||
| className="absolute inset-0 pointer-events-none opacity-40" | ||
| style={{ | ||
| background: | ||
| "radial-gradient(circle at 50% 120%, rgba(79,224,200,0.15), transparent 60%)", | ||
| }} | ||
| /> | ||
| <div className="relative z-10"> | ||
| <h2 className="font-necosmic font-semibold text-3xl text-[#E7EBF3] mb-4"> | ||
| Can't find what you need? | ||
| </h2> | ||
| <p className="font-body-ui text-[#8892A6] mb-8"> | ||
| Reach out to the community or open an issue and we'll get back to you. | ||
| </p> | ||
| <div className="flex flex-wrap justify-center gap-4"> | ||
| <a | ||
| href="https://github.com/Ayush-0918/Kepler/issues/new" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="font-body-ui font-semibold text-[15px] text-[#060A14] bg-[#4FE0C8] hover:bg-[#3bc4b0] rounded-lg px-7 py-3.5 transition-colors no-underline inline-block shadow-[0_0_15px_rgba(79,224,200,0.2)] hover:shadow-[0_0_20px_rgba(79,224,200,0.4)]" | ||
| > | ||
| Open Issue | ||
| </a> | ||
| <a | ||
| href="https://github.com/Ayush-0918/Kepler/discussions/new" |
There was a problem hiding this comment.
Suggestion: The support links point to a personal fork (Ayush-0918/Kepler) instead of the project’s canonical repository used elsewhere in the app (7-Blocks/Kepler), so users will be redirected to the wrong issue tracker/discussions/changelog. Replace these URLs with the canonical org repo links (ideally from a shared config constant). [logic error]
Severity Level: Critical 🚨
❌ Support links open personal fork instead of canonical repo.
⚠️ Bug reports fragmented across fork and main repo.
⚠️ Contributors follow outdated contributing and changelog locations.Steps of Reproduction ✅
1. Start the frontend app so that the React Router routes in frontend/src/App.tsx:78-86
are active; note that Route path "/support" renders SupportPage and other marketing routes
point to the marketing layout.
2. From the marketing navigation, click the "Support" nav item, which is defined in
frontend/src/components/layouts/MarketingLayout.tsx:9-16 with { label: "Support", to:
"/support" }, to reach the SupportPage at /support.
3. On SupportPage (frontend/src/pages/Support.tsx:72-110), observe that the resource cards
use SupportCard with href values pointing to "https://github.com/Ayush-0918/Kepler/…" at
lines 90, 96, 102, 108 and the CTA buttons use anchors with href
"https://github.com/Ayush-0918/Kepler/issues/new" and "…/discussions/new" at lines 132 and
140.
4. Compare this with other parts of the app: Hero.tsx:94 and DevelopersPage.tsx:158 and
467 link to "https://github.com/7-Blocks/Kepler", and the repo remote in .git/config:10
and contributing docs (CONTRIBUTING.md:33, 45, 133, 137) all point to
"https://github.com/7-Blocks/Kepler", confirming that the canonical support workflow
should be against 7-Blocks/Kepler while the SupportPage now sends users to the personal
fork Ayush-0918/Kepler.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/pages/Support.tsx
**Line:** 90:140
**Comment:**
*Logic Error: The support links point to a personal fork (`Ayush-0918/Kepler`) instead of the project’s canonical repository used elsewhere in the app (`7-Blocks/Kepler`), so users will be redirected to the wrong issue tracker/discussions/changelog. Replace these URLs with the canonical org repo links (ideally from a shared config constant).
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
There was a problem hiding this comment.
🧹 Nitpick comments (1)
frontend/src/components/SupportCard.tsx (1)
19-19: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winUse a scheme-aware external URL check.
href.startsWith("http")also classifies values such ashttpfooas external and misclassifies other non-relative schemes. The currentSupport.tsxcallers are safe, but this reusable fallback should be more precise.Proposed fix
- const isExternal = external !== undefined ? external : href.startsWith("http"); + const isExternal = external ?? /^(?:https?:)?\/\//i.test(href);🤖 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 `@frontend/src/components/SupportCard.tsx` at line 19, Update the isExternal fallback in SupportCard to use a scheme-aware URL check instead of href.startsWith("http"), correctly recognizing valid absolute external schemes while excluding values such as “httpfoo”; preserve the explicit external prop override.
🤖 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.
Nitpick comments:
In `@frontend/src/components/SupportCard.tsx`:
- Line 19: Update the isExternal fallback in SupportCard to use a scheme-aware
URL check instead of href.startsWith("http"), correctly recognizing valid
absolute external schemes while excluding values such as “httpfoo”; preserve the
explicit external prop override.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 1a1049d7-70fd-436d-bbe1-6501cecfb806
📒 Files selected for processing (3)
frontend/src/components/FAQAccordion.tsxfrontend/src/components/SupportCard.tsxfrontend/src/pages/Support.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- frontend/src/components/FAQAccordion.tsx
- frontend/src/pages/Support.tsx
Member
|
Hi! @Ayush-0918 Thanks for the contribution. Unfortunately, we can't merge this PR because these pages don't match the main theme of Kepler. To keep the project focused and consistent, we're only accepting changes that align with Kepler's core purpose. We appreciate your effort and encourage you to contribute again with changes that better fit the project's direction. Thanks! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
User description
Description
This PR adds a dedicated FAQs & Support page to improve the user support experience in Kepler.
Changes made
/supportroute.Related Issue
Fixes #121
Checklist
Screenshots / Screen Recordings
Breaking Changes
None.
ECSoC26 Submission
ECSoC26-L1– BeginnerECSoC26-L2– IntermediateECSoC26-L3– AdvancedCodeAnt-AI Description
Add a searchable Support page with FAQs, troubleshooting, and help links
What Changed
Impact
✅ Faster access to help✅ Quicker bug reporting✅ Easier self-service troubleshooting💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.
Summary by CodeRabbit
/support, integrated into the marketing navigation (desktop and mobile).Greptile Summary
This PR adds a dedicated support experience to the marketing site. The main changes are:
/supportroute and navigation link.Confidence Score: 5/5
This looks safe to merge.
Important Files Changed
Reviews (2): Last reviewed commit: "fix: address review feedback for support..." | Re-trigger Greptile