Feat/ai course generator front - #28
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughAdds an AI course generation feature to the admin panel, including server actions ( ChangesAI Course Generator Feature
BookmarkButton iconOnly Mode and Postgres Init Cleanup
Sequence Diagram(s)sequenceDiagram
participant Admin as Admin (Browser)
participant AiPage as /admin/ai page
participant AiGeneratorForm
participant generateAiCourse as generateAiCourse (server action)
participant BackendAI as POST /api/v1/ai/courses/generate
participant importAiCourse as importAiCourse (server action)
participant importCourse
Admin->>AiPage: Navigate to AI Generator
AiPage->>AiGeneratorForm: Render with topic/level/language inputs
Admin->>AiGeneratorForm: Submit GenerateRequest
AiGeneratorForm->>generateAiCourse: topic, level, language, keyIdeas
generateAiCourse->>BackendAI: POST (120s timeout)
BackendAI-->>generateAiCourse: AiCourseDraft or HTTP error
generateAiCourse-->>AiGeneratorForm: GenerateResult (ok: draft | error code)
AiGeneratorForm->>AiGeneratorForm: Show DraftPreview or error UI
Admin->>AiGeneratorForm: Click Import
AiGeneratorForm->>importAiCourse: AiCourseDraft
importAiCourse->>importCourse: version=1, course, pages
importCourse-->>AiGeneratorForm: course id
AiGeneratorForm->>Admin: Navigate to /admin/courses/{id}
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 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 |
|
@lmrt0572 ca serait cool si tu pouvais rajouter une petite icone "point d'intérogation" et lorsqu'on clique dessus, ou qu'on passe la souris dessus, ça affiche un message à l'utilisateur sur les bonnes pratiques d'écriture du prompt de génération de cours. Exemple de texte :
J'espère que je t'aurais donné des idées |
|
@coderabbitai review |
✅ Action performedReview finished.
|
![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
🧹 Nitpick comments (2)
apps/frontend/app/admin/ai/page.tsx (1)
15-37: 💤 Low valueConsider the semantic role of the SparklesIcon in PageHeader actions.
The
SparklesIconis passed to theactionsprop, which typically holds interactive elements (buttons, links). Since this icon is purely decorative (no onClick, no interaction), it might be more semantically appropriate to pass it as a separateiconordecorationprop, or render it directly in the header content.🤖 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 `@apps/frontend/app/admin/ai/page.tsx` around lines 15 - 37, The SparklesIcon in the PageHeader component is being passed to the actions prop, which is semantically intended for interactive elements like buttons and links. Since the SparklesIcon is purely decorative with no interactive behavior, move it out of the actions prop and either pass it to a more appropriate prop like icon or decoration if PageHeader supports it, or render it as a separate decorative element outside the actions area. Check the PageHeader component definition to determine the correct semantic prop for decorative icons, then update the AiGeneratorPage component accordingly to remove the icon from the actions prop.apps/frontend/app/actions/ai.ts (1)
20-38: ⚡ Quick winConsider adding runtime validation for the draft structure.
The falsy check on line 27 (
if (!draft)) catchesnull/undefined, but if the backend returns a malformed object (e.g.,{ course: null, pages: [] }), it would pass through and potentially cause issues downstream inimportAiCourse. While TypeScript provides compile-time safety, a defensive runtime check would be more robust.🛡️ Suggested defensive validation
export async function generateAiCourse(request: GenerateRequest): Promise<GenerateResult> { try { const draft = await apiFetch<AiCourseDraft>("/api/v1/ai/courses/generate", { method: "POST", body: request, timeoutMs: 120_000, }); - if (!draft) return { ok: false, error: "empty" }; + if (!draft || !draft.course || !draft.pages) return { ok: false, error: "empty" }; return { ok: true, draft };🤖 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 `@apps/frontend/app/actions/ai.ts` around lines 20 - 38, The generateAiCourse function only performs a falsy check on the draft object but does not validate its internal structure, so a malformed response from the backend could pass through and cause issues downstream. Add a runtime validation function that checks the draft object has all required properties (such as course and pages) before returning success. Apply this validation after the falsy check on the draft variable, and return an error result if the structure validation fails.
🤖 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 `@apps/frontend/app/admin/page.tsx`:
- Around line 65-70: The Link component's href attribute is set to
"/admin/ai-generator", but the actual page file is located at
apps/frontend/app/admin/ai/page.tsx, which corresponds to the route "/admin/ai"
in Next.js App Router. Update the href attribute in the Link component from
"/admin/ai-generator" to "/admin/ai" to match the actual route and prevent a 404
error when users click the button.
In `@apps/frontend/app/courses/`[slug]/read/page.tsx:
- Around line 179-188: The BookmarkButton component in the read page is hidden
on mobile devices due to the parent div having the "hidden lg:block" classes
combined with "group-hover:opacity-100" which doesn't work reliably on touch
devices. To fix this, modify the visibility and styling approach for the
BookmarkButton container to be visible and accessible on mobile/tablet screens.
Either make the bookmark button always-visible as an icon-only element on mobile
by adjusting the Tailwind classes (removing "hidden" and adjusting to show on
smaller screens), or implement a tap-to-reveal mechanism by adding a visible
mobile tap target that reveals the BookmarkButton. Ensure the solution maintains
the current desktop experience while providing mobile users with a clear way to
create new bookmarks during reading.
In `@apps/frontend/components/admin/ai-generator-form.tsx`:
- Around line 120-129: In the GeneratingAnimation function, replace the unsafe
type assertion `as string[]` with runtime validation to verify that the
translation value is actually an array before using it. Add a guard that checks
if t.raw("generationSteps") returns an array, and provide a fallback (such as an
empty array or a default steps array) if validation fails. This ensures the
component handles missing or malformed translations gracefully rather than
crashing or rendering incorrectly.
---
Nitpick comments:
In `@apps/frontend/app/actions/ai.ts`:
- Around line 20-38: The generateAiCourse function only performs a falsy check
on the draft object but does not validate its internal structure, so a malformed
response from the backend could pass through and cause issues downstream. Add a
runtime validation function that checks the draft object has all required
properties (such as course and pages) before returning success. Apply this
validation after the falsy check on the draft variable, and return an error
result if the structure validation fails.
In `@apps/frontend/app/admin/ai/page.tsx`:
- Around line 15-37: The SparklesIcon in the PageHeader component is being
passed to the actions prop, which is semantically intended for interactive
elements like buttons and links. Since the SparklesIcon is purely decorative
with no interactive behavior, move it out of the actions prop and either pass it
to a more appropriate prop like icon or decoration if PageHeader supports it, or
render it as a separate decorative element outside the actions area. Check the
PageHeader component definition to determine the correct semantic prop for
decorative icons, then update the AiGeneratorPage component accordingly to
remove the icon from the actions prop.
🪄 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: a71d4ae5-0385-4070-8b4b-6237d12cca34
📒 Files selected for processing (17)
apps/backend/src/main/java/com/codestar/backend/dto/course/CourseExportDto.javaapps/frontend/app/actions/ai.tsapps/frontend/app/admin/ai/page.tsxapps/frontend/app/admin/page.tsxapps/frontend/app/courses/[slug]/read/page.tsxapps/frontend/components/admin/ai-generator-form.tsxapps/frontend/components/course/bookmark-button.tsxapps/frontend/components/ui/icons.tsxapps/frontend/lib/types.tsapps/frontend/messages/en.jsonapps/frontend/messages/fr.jsondocker/postgres/init.sqldocs/2026-06-09-ai-course-generator-design.mddocs/README.mddocs/design-liquid-glass-citron-dark.mddocs/hand-off.mddocs/roadmap_frontend.md
teamssUTXO
left a comment
teamssUTXO
left a comment
There was a problem hiding this comment.
Checklist to be merged :
- Premier commentaire
- Specifier à l'utilisateur via un petit encadré que Groq n'est pas Grok de Twitter (ou Elon Musk ou ce que tu veux.) : "Groq est est une entreprise américaine de semi-conducteur qu'on utilise pour l'outil de generation de cours avec IA"
|
Ajout d'une icône ? à côté du titre du formulaire de génération. Au survol (desktop) ou au clic (mobile), un popover affiche des conseils pour obtenir un cours de meilleure qualité. |
2 participants
Description
Intégration frontend du générateur de cours par IA, connecté à l'endpoint backend POST /api/v1/ai/courses/generate.
Changements
feat(ai): add AI course generator page and actions
fix(course-reader): make bookmark button icon-only on desktop
Summary by CodeRabbit
New Features
Improvements