feat: add small talks assessment #314
Conversation
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds a new data-driven "Small Talk Basics" course with four lesson datasets, a LessonComponent to render theory/examples/exercises with scoring/navigation, and a SmallTalkCoursePage for course flow and progress. Also comments out two game-related imports in Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Page as SmallTalkCoursePage
participant Data as smallTalkBasicsCourse
participant Lesson as LessonComponent
User->>Page: Open Small Talk Course
Page->>Data: Read metadata & lessons
Page-->>User: Show Overview
User->>Page: Start Course / Select Lesson
Page->>Lesson: render(lessonData, onNext, onPrevious, onComplete)
Note over Lesson: Tabs — Theory | Examples | Exercises
User->>Lesson: Answer questions / Submit
Lesson->>Lesson: validate answers, compute score, set showResults
Lesson-->>Page: onComplete(lessonIndex) / onNext()
Page->>Page: update completedLessons & progress
alt More lessons remaining
Page-->>User: Show next lesson
else All lessons complete
Page-->>User: Show Course Completed
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
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 |
There was a problem hiding this comment.
Pull Request Overview
This pull request introduces the "Small Talk Basics" course, a new cultural communication course designed to help users develop casual conversation skills for social networking and everyday interactions.
- New course content with four comprehensive lessons covering weather/events, work/studies, hobbies, and conversation endings
- Complete course page implementation with navigation, progress tracking, and completion states
- Reusable lesson component with theory, examples, and interactive exercises sections
Reviewed Changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/pages/aurora-site/small-talk-course.jsx | Main course page with state management, navigation, and UI for the Small Talk Basics course |
| src/components/cultural-courses/small-talk-basics/lessons/lesson1.js | Weather & current events lesson data with theory, examples, and exercises |
| src/components/cultural-courses/small-talk-basics/lessons/lesson2.js | Work & studies conversation lesson content |
| src/components/cultural-courses/small-talk-basics/lessons/lesson3.js | Hobbies & interests discussion lesson data |
| src/components/cultural-courses/small-talk-basics/lessons/lesson4.js | Polite conversation ending techniques lesson |
| src/components/cultural-courses/small-talk-basics/index.js | Course configuration and metadata with dynamic totals calculation |
| src/components/cultural-courses/small-talk-basics/LessonComponent.jsx | Reusable lesson component with tabbed interface and exercise functionality |
| src/App.jsx | Minor code cleanup removing commented imports |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (13)
src/App.jsx (1)
102-104: Remove duplicate, case-mismatched commented imports; add Small Talk route.These commented lines duplicate already-commented imports above and use a different path/casing ("./components/Games" vs "@/components/games"). This invites confusion on case‑sensitive filesystems. Delete them. Also, per PR goals, wire the Small Talk course page route (and import) so the feature is reachable.
Apply this diff to clean up the duplicates:
-// import GameBoard from "./components/Games/memory-card/game-board"; -// import DifficultySelector from "./components/Games/word-matching/difficulty-selector";Add the Small Talk course import and route (outside this hunk):
+import SmallTalkCoursePage from "@/pages/aurora-site/small-talk-course"; ... <Route path="/social-media-course" element={<SocialMediaCoursePage />} /> + <Route path="/small-talk-course" element={<SmallTalkCoursePage />} />src/components/cultural-courses/small-talk-basics/lessons/lesson3.js (1)
179-183: Wording nit: “watch … music” can confuse learners.“Music” isn’t typically something you “watch” in general English. Consider “music videos,” “live performances,” or “concerts” instead.
- options: ["movies", "music", "sports", "foods"], - correctAnswer: ["movies", "music", "sports"], + options: ["movies", "music videos", "sports", "foods"], + correctAnswer: ["movies", "music videos", "sports"],src/components/cultural-courses/small-talk-basics/LessonComponent.jsx (5)
334-336: Results UX: show all acceptable answers clearly.Currently prints an array directly, which renders as a comma string implicitly. Make it explicit and label plural.
- <p className="text-sm text-green-500 mb-2"> - Correct answer: {question.correctAnswer} - </p> + <p className="text-sm text-green-500 mb-2"> + {Array.isArray(question.correctAnswer) + ? `Correct answers: ${question.correctAnswer.join(", ")}` + : `Correct answer: ${question.correctAnswer}`} + </p>
260-269: Edge case: no-questions state blocks progress.When
totalQuestions === 0, the button stays disabled forever. Allow submission in that case.- disabled={getProgressPercentage() < 100} + disabled={totalQuestions > 0 && getProgressPercentage() < 100} - {getProgressPercentage() < 100 + {totalQuestions > 0 && getProgressPercentage() < 100 ? `Answer all questions to continue` : `Check Answers`}
78-104: Defensive rendering to avoid hard crashes if data is incomplete.Accesses like
lessonData.content.theory.rules.mapassume presence. Add optional chaining or early returns.- {lessonData.content.theory.rules.map((rule, index) => ( + {(lessonData?.content?.theory?.rules ?? []).map((rule, index) => ( ... - {lessonData.content.theory.exceptions && ( + {lessonData?.content?.theory?.exceptions && ( ... - {lessonData.content.theory.importantNotes && ( + {lessonData?.content?.theory?.importantNotes && (
135-161: Same: guard examples mapping.Use optional chaining for
lessonData.content.examples.- {lessonData.content.examples.map((category, index) => ( + {(lessonData?.content?.examples ?? []).map((category, index) => (
440-440: Consider PropTypes for external consumers.Add
prop-typesto document expected shape and catch misuse during development.Happy to add a minimal PropTypes block if desired.
src/components/cultural-courses/small-talk-basics/index.js (2)
12-15: Guard against missing arrays to avoid runtime crashes.If any lesson omits exercises or questions,
.lengthwill throw. Use defensive access.Apply:
- const exerciseCount = lessonData.exercises.length; - const questionCount = lessonData.exercises.reduce((sum, exercise) => { - return sum + exercise.questions.length; - }, 0); + const exerciseCount = Array.isArray(lessonData.exercises) + ? lessonData.exercises.length + : 0; + const questionCount = (lessonData.exercises ?? []).reduce((sum, exercise) => { + return sum + ((exercise.questions ?? []).length); + }, 0);
8-9: Reduce drift: derive totals from thelessonsarray, not a separate list.Right now the totals use a hardcoded array of lesson data; adding a new lesson risks forgetting to update it. Prefer computing from the single source of truth (
lessons).Example direction (minimal change): build
lessonsfirst, then callcalculateTotals(lessons.map(l => l.data)).Also applies to: 37-70
src/components/cultural-courses/small-talk-basics/lessons/lesson4.js (1)
24-26: Minor string quoting nit: backticks can reduce escaping.Optional: switch to template literals for strings containing both single and double quotes to improve readability.
Example:
- "Social event: \"I'm going to mingle a bit more, but let's talk again before I leave.\"", + `Social event: "I'm going to mingle a bit more, but let's talk again before I leave."`,Also applies to: 61-62
src/pages/aurora-site/small-talk-course.jsx (3)
229-233: Clarify lock logic for readability.
includes(index - 1)with-1sentinel works but is non-obvious. Make it explicit.- const isLocked = - !lesson.unlocked && !completedLessons.includes(index - 1); + const prevCompleted = index === 0 || completedLessons.includes(index - 1); + const isLocked = !lesson.unlocked && !prevCompleted;
316-324: Add ARIA to progress for accessibility.Expose progress semantics to assistive tech.
- <div className="w-32 h-2 bg-neutral-1/10 rounded-full overflow-hidden mr-2"> - <div - className="h-full bg-light-blue-1" - style={{ width: `${getProgressPercentage()}%` }} - ></div> - </div> + <div className="w-32 h-2 bg-neutral-1/10 rounded-full overflow-hidden mr-2" + role="progressbar" + aria-valuenow={getProgressPercentage()} + aria-valuemin={0} + aria-valuemax={100} + aria-label="Course progress"> + <div className="h-full bg-light-blue-1" style={{ width: `${getProgressPercentage()}%` }}></div> + </div>
85-95: Remove inline style; rely on utility classes for consistency.The inline color overrides Tailwind and can drift from theme tokens.
- <button + <button onClick={() => { setCourseCompleted(false); setCurrentLesson(-1); setCompletedLessons([]); }} - className="inline-flex items-center px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium" - style={{ backgroundColor: "#059669", color: "white" }} + className="inline-flex items-center px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium" >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (8)
src/App.jsx(1 hunks)src/components/cultural-courses/small-talk-basics/LessonComponent.jsx(1 hunks)src/components/cultural-courses/small-talk-basics/index.js(1 hunks)src/components/cultural-courses/small-talk-basics/lessons/lesson1.js(1 hunks)src/components/cultural-courses/small-talk-basics/lessons/lesson2.js(1 hunks)src/components/cultural-courses/small-talk-basics/lessons/lesson3.js(1 hunks)src/components/cultural-courses/small-talk-basics/lessons/lesson4.js(1 hunks)src/pages/aurora-site/small-talk-course.jsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
src/components/cultural-courses/small-talk-basics/index.js (5)
src/components/cultural-courses/small-talk-basics/lessons/lesson1.js (2)
lesson1Data(1-203)lesson1Data(1-203)src/components/cultural-courses/small-talk-basics/lessons/lesson2.js (2)
lesson2Data(1-215)lesson2Data(1-215)src/components/cultural-courses/small-talk-basics/lessons/lesson3.js (2)
lesson3Data(1-195)lesson3Data(1-195)src/components/cultural-courses/small-talk-basics/lessons/lesson4.js (2)
lesson4Data(1-207)lesson4Data(1-207)src/components/cultural-courses/small-talk-basics/LessonComponent.jsx (1)
totalQuestions(28-31)
src/pages/aurora-site/small-talk-course.jsx (2)
src/components/cultural-courses/small-talk-basics/index.js (2)
smallTalkBasicsCourse(30-99)smallTalkBasicsCourse(30-99)src/components/cultural-courses/small-talk-basics/LessonComponent.jsx (2)
getProgressPercentage(72-76)LessonComponent(12-438)
🔇 Additional comments (7)
src/components/cultural-courses/small-talk-basics/lessons/lesson3.js (2)
31-43: Cultural sensitivity reminder looks good.Notes/exceptions are balanced and actionable. No changes needed.
165-175: ```shell
#!/bin/bash
set -euo pipefail
echo "PWD: $(pwd)"
echo "--- top-level ---"
ls -la | sed -n '1,200p'echo
echo "--- rg: find 'correctAnswer' ---"
rg -n --hidden --no-ignore -S "correctAnswer" || trueecho
echo "--- matches with context ---"
rg -n -C3 --hidden --no-ignore -S "correctAnswer" || trueecho
echo "--- print lesson3.js (if present) ---"
FILE="src/components/cultural-courses/small-talk-basics/lessons/lesson3.js"
if [ -f "$FILE" ]; then
echo "FOUND: $FILE"
nl -ba -w4 -s': ' "$FILE" | sed -n '1,260p'
else
echo "NOT FOUND: $FILE"
fiecho
echo "--- search for LessonComponent or similar ---"
rg -n -C3 --hidden --no-ignore -S "LessonComponent|LessonView|LessonRunner|LessonCard" || trueecho
echo "--- search for comparisons/includes/Array.isArray references ---"
rg -n -C3 --hidden --no-ignore -S "===.*correctAnswer|==.correctAnswer|\.includes\(|Array.isArray\(|correctAnswer\s:" || trueecho
echo "--- search for answer handlers ---"
rg -n -C5 --hidden --no-ignore -S "checkAnswer|handleAnswer|onAnswer|submitAnswer|selectAnswer|selectedAnswer|selectedOption" || true</blockquote></details> <details> <summary>src/components/cultural-courses/small-talk-basics/lessons/lesson1.js (1)</summary><blockquote> `91-203`: **Lesson 1 meets content and exercise DoD.** Covers safe weather/current events, includes 4 weather scenarios and 3 topic‑selection tasks with clear explanations. Good structure. Ensure the course index tallies totals including this lesson (exercises/questions) as expected. </blockquote></details> <details> <summary>src/components/cultural-courses/small-talk-basics/lessons/lesson2.js (1)</summary><blockquote> `90-215`: **Lesson 2 aligns with requirements and tone.** Includes 5 work‑conversation and 3 education items; prompts avoid intrusive topics; explanations are solid. No code changes needed. </blockquote></details> <details> <summary>src/components/cultural-courses/small-talk-basics/index.js (1)</summary><blockquote> `28-29`: **Totals computed at import-time only.** If lesson data ever becomes dynamic (A/B, localization swaps, async loads), the overview stats won’t update. If that’s on the roadmap, compute totals at render time in the page or memoize from `lessons`. </blockquote></details> <details> <summary>src/components/cultural-courses/small-talk-basics/lessons/lesson4.js (1)</summary><blockquote> `1-207`: **Content shape looks solid and consistent with other lessons.** Data keys align with the rendering component expectations; no structural issues spotted. </blockquote></details> <details> <summary>src/pages/aurora-site/small-talk-course.jsx (1)</summary><blockquote> `4-5`: **Confirm path-alias mapping for "@/..." imports.** - Verified editor mapping: jsconfig.json contains "@/*" -> ["./src/*"]; components.json declares several aliases (components, lib, ui, hooks, context, pages). Repo uses "@/..." widely (e.g. src/pages/aurora-site/small-talk-course.jsx lines 4–5). - Not verified: no vite.config.* or webpack*.config.* found by the scan — bundler-level resolve.alias (Vite/webpack) could not be confirmed. Action: ensure your bundler (vite/webpack) or tsconfig.json has a matching alias mapping "@" -> "src/" to avoid runtime import failures. </blockquote></details> </blockquote></details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
Josue19-08
requested review from
Josue19-08 and
ManuelJG1999
and removed request for
Josue19-08
1 participant
🚀 Pull Request
Description
This pull request introduces the "Small Talk Basics" course, a new addition to the cultural courses section. The course is designed to help users develop casual conversation skills for social networking and everyday interactions.
Following the structure of the existing "Social Media & Modern Communication" course, this PR includes:
small-talk-course.jsx) to render the course content.LessonComponentfor a consistent user experience.The content aligns with the requirements, providing theory, practical examples, common mistakes, and interactive exercises for each lesson.
Related Issue
Closes #249
Type of Change
Proof of Completion
Screencast.From.2025-09-15.21-50-58.mp4
Checklist
Summary by CodeRabbit
New Features
Chores