feat(platform): course-plan student visibility, multi-voice TTS, OCR sources, branches
Backend (encoach_ai_course):
- workbook_attempt model + scoring + REST endpoints for student attempts
- dialogue_parser splits scripts by speaker, classifies gender, strips labels
- media_service: multi-voice TTS via Polly/ElevenLabs, ffmpeg concatenation,
manual media upload endpoint (audio/image/video) with size validation
- source_indexer: OCR fallback (pytesseract + pdf2image) for scanned PDFs,
page-streaming to stay under memory limit
- exercise_extractor + rag_context for RAG-grounded interactive workbooks
- course_plan_pipeline: v2 generator that grounds week material on indexed
sources and persists grounded_on_json metadata
- security: access rules for new models
Backend (encoach_lms_api):
- branches model + controller (entity-scoped LMS branches)
- classroom_ext + course_ext (assignment + section workflow)
- classrooms controller: students/teachers/assign-course endpoints
Frontend:
- StudentDashboard: surface assigned AI course plans alongside enrollments;
enrolled-courses stat now counts plans+enrollments
- InteractiveWorkbook + PlanReader components
- AdminCoursePlanDetail: media drawer with upload buttons (audio/image/video),
hidden file inputs, upload mutation
- AdminBranches page + sidebar entry
- coursePlan/lms/classrooms services + types updated for new endpoints
- i18n: studentDash.myCoursePlans/noCoursePlans (en + ar)
Infra & docs:
- odoo.conf: bump memory limits to 4G/5G for OCR + sentence-transformers
- .gitignore: ignore *.tsbuildinfo
- docs/ASSIGNMENT_WORKFLOW.{md,pdf}
- smoke_*.py end-to-end tests for assignment workflow, entity isolation,
course-plan RAG pipeline
Made-with: Cursor
This commit is contained in:
Yamen Ahmad
867
frontend/src/components/coursePlan/InteractiveWorkbook.tsx
Normal file
867
frontend/src/components/coursePlan/InteractiveWorkbook.tsx
Normal file
@@ -0,0 +1,867 @@
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
Award,
|
||||
CheckCircle2,
|
||||
Eye,
|
||||
GripVertical,
|
||||
Lightbulb,
|
||||
Loader2,
|
||||
RotateCcw,
|
||||
Save,
|
||||
XCircle,
|
||||
} from "lucide-react";
|
||||
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { coursePlanService } from "@/services/coursePlan.service";
|
||||
import type {
|
||||
CoursePlanMaterial,
|
||||
GapFillExercise,
|
||||
MatchPairsExercise,
|
||||
MultipleChoiceExercise,
|
||||
ReorderWordsExercise,
|
||||
ShortAnswerExercise,
|
||||
TransformationExercise,
|
||||
WorkbookAttempt,
|
||||
WorkbookAttemptScoreItem,
|
||||
WorkbookBody,
|
||||
WorkbookExercise,
|
||||
} from "@/types";
|
||||
|
||||
/**
|
||||
* Workbook renderer for `material_type === "interactive_workbook"`.
|
||||
*
|
||||
* Modes:
|
||||
* - `student` → answers persist server-side (graded, scored, saved).
|
||||
* - `preview` → no persistence, no Submit; "Show answers" toggle reveals
|
||||
* the key so the admin can verify the v2 generator's output.
|
||||
*
|
||||
* The renderer also accepts a `WorkbookBody` directly (for skill bodies
|
||||
* that embed `interactive_workbook: { exercises: [...] }`), so it can be
|
||||
* reused inside other material renderers without duplicating the logic.
|
||||
*/
|
||||
export type WorkbookMode = "student" | "preview";
|
||||
|
||||
interface InteractiveWorkbookProps {
|
||||
material: Pick<
|
||||
CoursePlanMaterial,
|
||||
"id" | "plan_id" | "body" | "title" | "summary" | "material_type"
|
||||
>;
|
||||
/** Optional override — when present we read exercises from here instead
|
||||
* of `material.body`. Used by skill bodies that embed a workbook one
|
||||
* level deep. */
|
||||
bodyOverride?: WorkbookBody;
|
||||
mode?: WorkbookMode;
|
||||
}
|
||||
|
||||
type AnswerValue = string | string[] | number[][] | undefined;
|
||||
|
||||
function toExercises(body: unknown): WorkbookExercise[] {
|
||||
if (!body || typeof body !== "object") return [];
|
||||
const b = body as Record<string, unknown>;
|
||||
if (Array.isArray(b.exercises)) {
|
||||
return b.exercises as WorkbookExercise[];
|
||||
}
|
||||
// Skill bodies sometimes nest the workbook under `interactive_workbook`.
|
||||
const nested = b.interactive_workbook as { exercises?: WorkbookExercise[] } | undefined;
|
||||
if (nested && Array.isArray(nested.exercises)) {
|
||||
return nested.exercises;
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
function toLessonPlan(body: unknown): WorkbookBody["lesson_plan"] | undefined {
|
||||
if (!body || typeof body !== "object") return undefined;
|
||||
const b = body as Record<string, unknown>;
|
||||
if (b.lesson_plan && typeof b.lesson_plan === "object") {
|
||||
return b.lesson_plan as WorkbookBody["lesson_plan"];
|
||||
}
|
||||
const nested = b.interactive_workbook as { lesson_plan?: WorkbookBody["lesson_plan"] } | undefined;
|
||||
return nested?.lesson_plan;
|
||||
}
|
||||
|
||||
// Local copies of the backend grading functions for instant per-exercise
|
||||
// feedback while typing. The authoritative score still comes from the
|
||||
// server when we POST — these are only used for the "Check" button.
|
||||
function normText(s: unknown): string {
|
||||
if (s == null) return "";
|
||||
return String(s).replace(/\s+/g, " ").trim().toLowerCase();
|
||||
}
|
||||
function normPunct(s: unknown): string {
|
||||
return normText(s).replace(/[\s.?!,]+$/u, "");
|
||||
}
|
||||
function globMatch(pattern: string, value: string): boolean {
|
||||
const pat = normText(pattern);
|
||||
const val = normText(value);
|
||||
if (!pat) return false;
|
||||
if (!pat.includes("*")) return pat === val;
|
||||
const rx = new RegExp(
|
||||
"^" + pat.replace(/[.*+?^${}()|[\]\\]/g, "\\$&").replace(/\\\*/g, ".*") + "$",
|
||||
);
|
||||
return rx.test(val);
|
||||
}
|
||||
|
||||
function gradeOne(ex: WorkbookExercise, given: AnswerValue): boolean {
|
||||
if (given === undefined) return false;
|
||||
switch (ex.type) {
|
||||
case "gap_fill": {
|
||||
const accepted = [ex.answer, ...(ex.alt ?? [])];
|
||||
const n = normText(given as string);
|
||||
return accepted.some((a) => normText(a) === n);
|
||||
}
|
||||
case "multiple_choice": {
|
||||
const opts = ex.options ?? [];
|
||||
const ans = ex.answer;
|
||||
const g = normText(given as string);
|
||||
if (g === normText(ans)) return true;
|
||||
if (typeof ans === "string" && ans.length === 1 && /[a-z]/i.test(ans)) {
|
||||
const idx = ans.toUpperCase().charCodeAt(0) - 65;
|
||||
if (opts[idx] && normText(opts[idx]) === g) return true;
|
||||
}
|
||||
if (typeof given === "string" && given.length === 1 && /[a-z]/i.test(given)) {
|
||||
const idx = given.toUpperCase().charCodeAt(0) - 65;
|
||||
if (opts[idx] && normText(opts[idx]) === normText(ans)) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
case "match_pairs": {
|
||||
const pairs = (given as number[][]) ?? [];
|
||||
const expected = ex.answer ?? [];
|
||||
const setOf = (rows: number[][]) =>
|
||||
new Set(rows.filter((p) => p.length === 2).map((p) => `${p[0]},${p[1]}`));
|
||||
const a = setOf(expected);
|
||||
const b = setOf(pairs);
|
||||
if (a.size !== b.size) return false;
|
||||
for (const v of a) if (!b.has(v)) return false;
|
||||
return true;
|
||||
}
|
||||
case "reorder_words": {
|
||||
const value = Array.isArray(given) ? (given as string[]).join(" ") : String(given ?? "");
|
||||
return normText(value) === normText(ex.answer);
|
||||
}
|
||||
case "transformation": {
|
||||
const accepted = [ex.answer, ...(ex.alt ?? [])];
|
||||
const n = normPunct(given as string);
|
||||
return accepted.some((a) => normPunct(a) === n);
|
||||
}
|
||||
case "short_answer": {
|
||||
const accepted = [...(ex.accepted ?? []), ex.answer].filter(Boolean) as string[];
|
||||
return accepted.some((p) => globMatch(p, given as string));
|
||||
}
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Main component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export default function InteractiveWorkbook({
|
||||
material,
|
||||
bodyOverride,
|
||||
mode = "student",
|
||||
}: InteractiveWorkbookProps) {
|
||||
const exercises = useMemo<WorkbookExercise[]>(
|
||||
() => toExercises(bodyOverride ?? material.body),
|
||||
[bodyOverride, material.body],
|
||||
);
|
||||
const lessonPlan = useMemo(
|
||||
() => toLessonPlan(bodyOverride ?? material.body),
|
||||
[bodyOverride, material.body],
|
||||
);
|
||||
|
||||
const { toast } = useToast();
|
||||
const [answers, setAnswers] = useState<Record<string, AnswerValue>>({});
|
||||
const [revealedIds, setRevealedIds] = useState<Set<string>>(new Set());
|
||||
const [showKey, setShowKey] = useState(false);
|
||||
const [serverScore, setServerScore] = useState<{
|
||||
correct: number;
|
||||
total: number;
|
||||
percent: number;
|
||||
items?: WorkbookAttemptScoreItem[];
|
||||
is_final?: boolean;
|
||||
} | null>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [loading, setLoading] = useState(mode === "student");
|
||||
|
||||
// Load existing attempt (student mode only).
|
||||
useEffect(() => {
|
||||
if (mode !== "student") return;
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
try {
|
||||
const res = await coursePlanService.myWorkbookAttempt(
|
||||
material.plan_id,
|
||||
material.id,
|
||||
);
|
||||
if (cancelled) return;
|
||||
const attempt = res.data;
|
||||
if (attempt) {
|
||||
setAnswers((attempt.answers ?? {}) as Record<string, AnswerValue>);
|
||||
if (attempt.score && "items" in attempt.score) {
|
||||
setServerScore({
|
||||
correct: attempt.correct_count,
|
||||
total: attempt.total_count,
|
||||
percent: attempt.percent,
|
||||
items: attempt.score.items,
|
||||
is_final: attempt.is_final,
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// Non-fatal — empty workbook on first open.
|
||||
} finally {
|
||||
if (!cancelled) setLoading(false);
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [material.id, material.plan_id, mode]);
|
||||
|
||||
const isFinal = !!serverScore?.is_final;
|
||||
const liveCorrect = useMemo(
|
||||
() => exercises.filter((ex) => gradeOne(ex, answers[ex.id])).length,
|
||||
[answers, exercises],
|
||||
);
|
||||
const livePercent = exercises.length
|
||||
? Math.round((liveCorrect / exercises.length) * 100)
|
||||
: 0;
|
||||
|
||||
const onChange = (id: string, value: AnswerValue) => {
|
||||
setAnswers((prev) => ({ ...prev, [id]: value }));
|
||||
};
|
||||
|
||||
const onCheck = (id: string) => {
|
||||
setRevealedIds((prev) => new Set(prev).add(id));
|
||||
if (mode === "student") void persist(false);
|
||||
};
|
||||
|
||||
const persist = async (finalize: boolean) => {
|
||||
if (mode !== "student") return;
|
||||
if (finalize) setSubmitting(true);
|
||||
else setSaving(true);
|
||||
try {
|
||||
const res = await coursePlanService.saveWorkbookAttempt(
|
||||
material.plan_id,
|
||||
material.id,
|
||||
{ answers, finalize },
|
||||
);
|
||||
const attempt: WorkbookAttempt = res.data;
|
||||
setServerScore({
|
||||
correct: attempt.correct_count,
|
||||
total: attempt.total_count,
|
||||
percent: attempt.percent,
|
||||
items: attempt.score && "items" in attempt.score ? attempt.score.items : [],
|
||||
is_final: attempt.is_final,
|
||||
});
|
||||
if (finalize) {
|
||||
toast({
|
||||
title: "Submitted",
|
||||
description: `${attempt.correct_count} / ${attempt.total_count} correct (${attempt.percent.toFixed(0)}%)`,
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
toast({
|
||||
title: finalize ? "Submit failed" : "Save failed",
|
||||
description: err instanceof Error ? err.message : String(err),
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setSaving(false);
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Debounce per-keystroke saves: every 1.5s after the last change.
|
||||
const saveTimer = useRef<number | null>(null);
|
||||
useEffect(() => {
|
||||
if (mode !== "student" || isFinal || loading) return;
|
||||
if (saveTimer.current) window.clearTimeout(saveTimer.current);
|
||||
saveTimer.current = window.setTimeout(() => {
|
||||
void persist(false);
|
||||
}, 1500);
|
||||
return () => {
|
||||
if (saveTimer.current) window.clearTimeout(saveTimer.current);
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [answers]);
|
||||
|
||||
const reset = () => {
|
||||
setAnswers({});
|
||||
setRevealedIds(new Set());
|
||||
};
|
||||
|
||||
if (!exercises.length) {
|
||||
return (
|
||||
<div className="rounded-lg border bg-muted/30 p-6 text-sm text-muted-foreground">
|
||||
This workbook has no exercises yet — generate or extract first.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{mode === "preview" && (
|
||||
<div className="rounded-md border border-amber-200 bg-amber-50 px-4 py-2 text-sm text-amber-900 flex items-center justify-between">
|
||||
<span>
|
||||
<strong>Preview</strong> — answers won't be saved. Toggle the
|
||||
answer key to verify the generated content.
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant={showKey ? "default" : "outline"}
|
||||
onClick={() => setShowKey((v) => !v)}
|
||||
>
|
||||
<Eye className="mr-1 h-4 w-4" />
|
||||
{showKey ? "Hide answers" : "Show answers"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{lessonPlan && Object.values(lessonPlan).some(Boolean) && (
|
||||
<details className="rounded-lg border bg-background/70 p-3">
|
||||
<summary className="cursor-pointer text-sm font-medium">
|
||||
Teacher's lesson plan
|
||||
</summary>
|
||||
<div className="mt-2 grid gap-2 sm:grid-cols-2 text-sm">
|
||||
{(["warmup", "presentation", "controlled_practice", "freer_practice", "exit_ticket"] as const).map(
|
||||
(k) =>
|
||||
lessonPlan[k] ? (
|
||||
<div key={k}>
|
||||
<div className="text-xs uppercase tracking-wide text-muted-foreground">
|
||||
{k.replace(/_/g, " ")}
|
||||
</div>
|
||||
<div className="leading-6">{lessonPlan[k]}</div>
|
||||
</div>
|
||||
) : null,
|
||||
)}
|
||||
</div>
|
||||
</details>
|
||||
)}
|
||||
|
||||
<div className="rounded-lg border bg-background/70 p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Award className="h-4 w-4 text-primary" />
|
||||
<strong>{liveCorrect}</strong>
|
||||
<span className="text-muted-foreground">/ {exercises.length} correct (live)</span>
|
||||
{serverScore && (
|
||||
<Badge variant="secondary" className="ml-2">
|
||||
Server: {serverScore.correct}/{serverScore.total} ({serverScore.percent.toFixed(0)}%)
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{mode === "student" && (
|
||||
<div className="text-xs text-muted-foreground flex items-center gap-2">
|
||||
{saving ? (
|
||||
<>
|
||||
<Loader2 className="h-3 w-3 animate-spin" /> Saving…
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save className="h-3 w-3" />{" "}
|
||||
{serverScore ? "Auto-saved" : "Auto-save on"}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Progress value={livePercent} className="h-2" />
|
||||
</div>
|
||||
|
||||
<ol className="space-y-3 list-none p-0">
|
||||
{exercises.map((ex, idx) => {
|
||||
const value = answers[ex.id];
|
||||
const checked = revealedIds.has(ex.id) || isFinal || showKey;
|
||||
const correct = checked ? gradeOne(ex, value) : null;
|
||||
return (
|
||||
<li
|
||||
key={ex.id || idx}
|
||||
className={cn(
|
||||
"rounded-lg border p-4 bg-background/70 space-y-3",
|
||||
checked && correct === true && "border-emerald-400 bg-emerald-50/40",
|
||||
checked && correct === false && "border-rose-400 bg-rose-50/40",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="text-xs uppercase tracking-wide text-muted-foreground">
|
||||
Exercise {idx + 1} · {ex.type.replace(/_/g, " ")}
|
||||
</div>
|
||||
{checked && (
|
||||
<Badge variant={correct ? "default" : "destructive"} className="capitalize">
|
||||
{correct ? (
|
||||
<>
|
||||
<CheckCircle2 className="mr-1 h-3 w-3" /> Correct
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<XCircle className="mr-1 h-3 w-3" /> Try again
|
||||
</>
|
||||
)}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{renderExercise(ex, value, (v) => onChange(ex.id, v), {
|
||||
disabled: mode === "preview" || isFinal,
|
||||
showKey: showKey,
|
||||
})}
|
||||
|
||||
{ex.hint && !checked && (
|
||||
<div className="text-xs text-muted-foreground flex items-center gap-1">
|
||||
<Lightbulb className="h-3 w-3" /> {ex.hint}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{checked && (
|
||||
<div className="text-xs text-muted-foreground space-y-1">
|
||||
{!correct && (
|
||||
<div>
|
||||
Expected: <span className="font-medium">{formatAnswer(ex)}</span>
|
||||
</div>
|
||||
)}
|
||||
{ex.rationale && <div>{ex.rationale}</div>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isFinal && mode !== "preview" && (
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => onCheck(ex.id)}
|
||||
>
|
||||
<CheckCircle2 className="mr-1 h-4 w-4" /> Check
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
|
||||
{mode === "student" && (
|
||||
<div className="flex items-center justify-between rounded-lg border bg-background/70 p-3">
|
||||
<Button type="button" variant="ghost" onClick={reset} disabled={isFinal}>
|
||||
<RotateCcw className="mr-1 h-4 w-4" />
|
||||
Reset
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
disabled={submitting || isFinal}
|
||||
onClick={() => persist(true)}
|
||||
>
|
||||
{submitting ? (
|
||||
<Loader2 className="mr-1 h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Save className="mr-1 h-4 w-4" />
|
||||
)}
|
||||
{isFinal ? "Submitted" : "Submit final"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Per-type renderers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function renderExercise(
|
||||
ex: WorkbookExercise,
|
||||
value: AnswerValue,
|
||||
onChange: (v: AnswerValue) => void,
|
||||
opts: { disabled?: boolean; showKey?: boolean },
|
||||
): React.ReactNode {
|
||||
switch (ex.type) {
|
||||
case "gap_fill":
|
||||
return <GapFill ex={ex} value={value as string} onChange={onChange} disabled={opts.disabled} />;
|
||||
case "multiple_choice":
|
||||
return (
|
||||
<MultipleChoice
|
||||
ex={ex}
|
||||
value={value as string}
|
||||
onChange={onChange}
|
||||
disabled={opts.disabled}
|
||||
/>
|
||||
);
|
||||
case "match_pairs":
|
||||
return (
|
||||
<MatchPairs
|
||||
ex={ex}
|
||||
value={value as number[][]}
|
||||
onChange={onChange}
|
||||
disabled={opts.disabled}
|
||||
/>
|
||||
);
|
||||
case "reorder_words":
|
||||
return (
|
||||
<ReorderWords
|
||||
ex={ex}
|
||||
value={value as string[]}
|
||||
onChange={onChange}
|
||||
disabled={opts.disabled}
|
||||
/>
|
||||
);
|
||||
case "transformation":
|
||||
return (
|
||||
<Transformation
|
||||
ex={ex}
|
||||
value={value as string}
|
||||
onChange={onChange}
|
||||
disabled={opts.disabled}
|
||||
/>
|
||||
);
|
||||
case "short_answer":
|
||||
return (
|
||||
<ShortAnswer
|
||||
ex={ex}
|
||||
value={value as string}
|
||||
onChange={onChange}
|
||||
disabled={opts.disabled}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return <p className="text-sm text-muted-foreground">Unsupported exercise type.</p>;
|
||||
}
|
||||
}
|
||||
|
||||
function formatAnswer(ex: WorkbookExercise): string {
|
||||
switch (ex.type) {
|
||||
case "match_pairs":
|
||||
return (ex.answer ?? [])
|
||||
.map((p) => `${ex.left[p[0]] ?? "?"} ↔ ${ex.right[p[1]] ?? "?"}`)
|
||||
.join(", ");
|
||||
case "reorder_words":
|
||||
return ex.answer;
|
||||
default:
|
||||
return String((ex as { answer?: unknown }).answer ?? "");
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Type-specific input subcomponents
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function GapFill({
|
||||
ex,
|
||||
value,
|
||||
onChange,
|
||||
disabled,
|
||||
}: {
|
||||
ex: GapFillExercise;
|
||||
value: string | undefined;
|
||||
onChange: (v: string) => void;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
// Replace ___ in the stem with an inline input. Falls back to a stem
|
||||
// label + standalone input when there's no underscore marker.
|
||||
const parts = ex.stem.split(/_{2,}/);
|
||||
if (parts.length === 1) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<p className="leading-7">{ex.stem}</p>
|
||||
<Input
|
||||
value={value ?? ""}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
disabled={disabled}
|
||||
placeholder="Type your answer"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<p className="leading-8 text-base flex flex-wrap items-center gap-1">
|
||||
{parts.map((part, i) => (
|
||||
<span key={i} className="inline-flex items-center gap-1">
|
||||
<span>{part}</span>
|
||||
{i < parts.length - 1 && (
|
||||
<Input
|
||||
type="text"
|
||||
className="inline-block w-32 align-baseline"
|
||||
value={value ?? ""}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
disabled={disabled}
|
||||
placeholder="…"
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
function MultipleChoice({
|
||||
ex,
|
||||
value,
|
||||
onChange,
|
||||
disabled,
|
||||
}: {
|
||||
ex: MultipleChoiceExercise;
|
||||
value: string | undefined;
|
||||
onChange: (v: string) => void;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<p className="leading-7">{ex.stem}</p>
|
||||
<RadioGroup
|
||||
value={value ?? ""}
|
||||
onValueChange={onChange}
|
||||
disabled={disabled}
|
||||
className="grid gap-2 sm:grid-cols-2"
|
||||
>
|
||||
{ex.options.map((opt, i) => {
|
||||
const id = `${ex.id}_opt_${i}`;
|
||||
return (
|
||||
<Label
|
||||
key={id}
|
||||
htmlFor={id}
|
||||
className="flex items-start gap-2 rounded-md border p-2 cursor-pointer hover:bg-muted"
|
||||
>
|
||||
<RadioGroupItem id={id} value={opt} className="mt-0.5" />
|
||||
<span className="text-sm">{opt}</span>
|
||||
</Label>
|
||||
);
|
||||
})}
|
||||
</RadioGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MatchPairs({
|
||||
ex,
|
||||
value,
|
||||
onChange,
|
||||
disabled,
|
||||
}: {
|
||||
ex: MatchPairsExercise;
|
||||
value: number[][] | undefined;
|
||||
onChange: (v: number[][]) => void;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
const [selectedLeft, setSelectedLeft] = useState<number | null>(null);
|
||||
const pairs = value ?? [];
|
||||
const pairedLeft = new Set(pairs.map((p) => p[0]));
|
||||
const pairedRight = new Set(pairs.map((p) => p[1]));
|
||||
|
||||
const tapLeft = (idx: number) => {
|
||||
if (disabled) return;
|
||||
setSelectedLeft(idx);
|
||||
};
|
||||
const tapRight = (idx: number) => {
|
||||
if (disabled || selectedLeft == null) return;
|
||||
const next = pairs.filter((p) => p[0] !== selectedLeft && p[1] !== idx);
|
||||
next.push([selectedLeft, idx]);
|
||||
onChange(next);
|
||||
setSelectedLeft(null);
|
||||
};
|
||||
const clear = (li: number) => {
|
||||
if (disabled) return;
|
||||
onChange(pairs.filter((p) => p[0] !== li));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||
<div className="space-y-1">
|
||||
<div className="text-xs uppercase tracking-wide text-muted-foreground">Match these…</div>
|
||||
{ex.left.map((item, i) => {
|
||||
const paired = pairs.find((p) => p[0] === i);
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={`L${i}`}
|
||||
onClick={() => (paired ? clear(i) : tapLeft(i))}
|
||||
disabled={disabled}
|
||||
className={cn(
|
||||
"block w-full rounded border px-2 py-1.5 text-left",
|
||||
selectedLeft === i && "border-primary ring-1 ring-primary",
|
||||
paired && "bg-muted",
|
||||
)}
|
||||
>
|
||||
<span className="text-muted-foreground mr-1">{i + 1}.</span>
|
||||
{item}
|
||||
{paired ? (
|
||||
<span className="ml-2 text-xs text-muted-foreground">
|
||||
→ {ex.right[paired[1]]}
|
||||
</span>
|
||||
) : null}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-xs uppercase tracking-wide text-muted-foreground">…with these</div>
|
||||
{ex.right.map((item, j) => (
|
||||
<button
|
||||
type="button"
|
||||
key={`R${j}`}
|
||||
onClick={() => tapRight(j)}
|
||||
disabled={disabled || selectedLeft == null}
|
||||
className={cn(
|
||||
"block w-full rounded border px-2 py-1.5 text-left",
|
||||
pairedRight.has(j) && "bg-muted",
|
||||
)}
|
||||
>
|
||||
<span className="text-muted-foreground mr-1">{String.fromCharCode(65 + j)}.</span>
|
||||
{item}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="col-span-2 text-xs text-muted-foreground">
|
||||
Tap a left item, then tap its match on the right. Tap a paired left
|
||||
item to clear it.
|
||||
</div>
|
||||
{!pairedLeft.size && (
|
||||
<div className="col-span-2 text-xs text-muted-foreground">
|
||||
{ex.left.length} pair(s) to match.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ReorderWords({
|
||||
ex,
|
||||
value,
|
||||
onChange,
|
||||
disabled,
|
||||
}: {
|
||||
ex: ReorderWordsExercise;
|
||||
value: string[] | undefined;
|
||||
onChange: (v: string[]) => void;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
// Stateful tap-to-insert: tap a token in the bank to append; tap a
|
||||
// token in the answer strip to remove. Keeps it touch-friendly.
|
||||
const order = value ?? [];
|
||||
const remaining: { tok: string; bankIdx: number }[] = [];
|
||||
const used: number[] = [];
|
||||
// Build maps so duplicate tokens stay independently selectable.
|
||||
const usedCounts = new Map<string, number>();
|
||||
order.forEach((t) => usedCounts.set(t, (usedCounts.get(t) ?? 0) + 1));
|
||||
const seenWhileBuilding = new Map<string, number>();
|
||||
ex.tokens.forEach((tok, idx) => {
|
||||
const seen = seenWhileBuilding.get(tok) ?? 0;
|
||||
const usesLeft = (usedCounts.get(tok) ?? 0) - seen;
|
||||
if (usesLeft > 0) {
|
||||
used.push(idx);
|
||||
seenWhileBuilding.set(tok, seen + 1);
|
||||
} else {
|
||||
remaining.push({ tok, bankIdx: idx });
|
||||
}
|
||||
});
|
||||
|
||||
const append = (tok: string) => {
|
||||
if (disabled) return;
|
||||
onChange([...order, tok]);
|
||||
};
|
||||
const removeAt = (i: number) => {
|
||||
if (disabled) return;
|
||||
onChange(order.filter((_, idx) => idx !== i));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="rounded border bg-muted/30 p-2 min-h-10 flex flex-wrap gap-1">
|
||||
{order.length === 0 ? (
|
||||
<span className="text-xs text-muted-foreground">Tap tokens below to build the sentence…</span>
|
||||
) : (
|
||||
order.map((tok, i) => (
|
||||
<button
|
||||
type="button"
|
||||
key={`a${i}`}
|
||||
onClick={() => removeAt(i)}
|
||||
disabled={disabled}
|
||||
className="rounded bg-background border px-2 py-1"
|
||||
>
|
||||
<GripVertical className="mr-1 inline h-3 w-3 text-muted-foreground" />
|
||||
{tok}
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{remaining.map(({ tok, bankIdx }) => (
|
||||
<button
|
||||
type="button"
|
||||
key={`b${bankIdx}`}
|
||||
onClick={() => append(tok)}
|
||||
disabled={disabled}
|
||||
className="rounded border px-2 py-1 hover:bg-muted"
|
||||
>
|
||||
{tok}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Transformation({
|
||||
ex,
|
||||
value,
|
||||
onChange,
|
||||
disabled,
|
||||
}: {
|
||||
ex: TransformationExercise;
|
||||
value: string | undefined;
|
||||
onChange: (v: string) => void;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="rounded border bg-muted/30 px-3 py-2 text-sm">
|
||||
<Badge variant="outline" className="mr-2">
|
||||
{ex.instruction}
|
||||
</Badge>
|
||||
<span className="font-medium">{ex.from}</span>
|
||||
</div>
|
||||
<Textarea
|
||||
value={value ?? ""}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
disabled={disabled}
|
||||
rows={2}
|
||||
placeholder="Transformed sentence"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ShortAnswer({
|
||||
ex,
|
||||
value,
|
||||
onChange,
|
||||
disabled,
|
||||
}: {
|
||||
ex: ShortAnswerExercise;
|
||||
value: string | undefined;
|
||||
onChange: (v: string) => void;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<p className="leading-7">{ex.stem}</p>
|
||||
<Textarea
|
||||
value={value ?? ""}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
disabled={disabled}
|
||||
rows={3}
|
||||
placeholder="Type your answer"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { CoursePlanMaterial } from "@/types";
|
||||
import type { CoursePlanMaterial, WorkbookBody } from "@/types";
|
||||
|
||||
import InteractiveWorkbook, { type WorkbookMode } from "./InteractiveWorkbook";
|
||||
|
||||
export const SKILL_STYLE: Record<string, string> = {
|
||||
reading: "bg-blue-100 text-blue-800 border-blue-200",
|
||||
@@ -56,23 +58,82 @@ function renderAny(value: unknown): React.ReactNode {
|
||||
return null;
|
||||
}
|
||||
|
||||
type MaterialForBook = Pick<
|
||||
CoursePlanMaterial,
|
||||
"id" | "plan_id" | "body" | "body_text" | "material_type" | "title" | "summary"
|
||||
>;
|
||||
|
||||
export default function MaterialBookView({
|
||||
material,
|
||||
mode = "student",
|
||||
}: {
|
||||
material: Pick<CoursePlanMaterial, "body" | "body_text" | "material_type">;
|
||||
// The legacy callsites only pass body/body_text/material_type, so we
|
||||
// tolerate that by making id/plan_id optional in the prop type even
|
||||
// though the types/index file marks them as required. Required props
|
||||
// are validated at runtime when interactive_workbook is dispatched.
|
||||
material: Partial<MaterialForBook> &
|
||||
Pick<CoursePlanMaterial, "body" | "body_text" | "material_type">;
|
||||
mode?: WorkbookMode;
|
||||
}) {
|
||||
const body = material.body ?? {};
|
||||
const hasStructured = Object.keys(body).length > 0;
|
||||
|
||||
// Dispatch to the interactive renderer for workbook materials. The
|
||||
// skill-bodied workbooks (grammar/vocabulary that embed their own
|
||||
// `interactive_workbook` block) render via the generic walker AND
|
||||
// the embedded workbook below for the exercises portion.
|
||||
if (
|
||||
material.material_type === "interactive_workbook" &&
|
||||
typeof material.id === "number" &&
|
||||
typeof material.plan_id === "number"
|
||||
) {
|
||||
return (
|
||||
<InteractiveWorkbook
|
||||
material={material as MaterialForBook}
|
||||
mode={mode}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// For grammar / vocabulary that embed an interactive workbook inside
|
||||
// their body, we render the prose first and then the workbook UI so
|
||||
// students can practise without leaving the lesson.
|
||||
const embeddedWorkbook = (body as { interactive_workbook?: WorkbookBody })
|
||||
.interactive_workbook;
|
||||
const hasEmbedded =
|
||||
embeddedWorkbook &&
|
||||
Array.isArray(embeddedWorkbook.exercises) &&
|
||||
embeddedWorkbook.exercises.length > 0 &&
|
||||
typeof material.id === "number" &&
|
||||
typeof material.plan_id === "number";
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border bg-background/70 p-4 space-y-4">
|
||||
{hasStructured ? (
|
||||
renderAny(body)
|
||||
renderAny(stripEmbedded(body))
|
||||
) : (
|
||||
<p className="text-sm whitespace-pre-wrap leading-7">
|
||||
{material.body_text || "No content available yet."}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{hasEmbedded && (
|
||||
<div className="border-t pt-3">
|
||||
<div className="text-sm font-medium mb-2">Practice</div>
|
||||
<InteractiveWorkbook
|
||||
material={material as MaterialForBook}
|
||||
bodyOverride={embeddedWorkbook!}
|
||||
mode={mode}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function stripEmbedded(body: Record<string, unknown>): Record<string, unknown> {
|
||||
if (!body || typeof body !== "object") return body;
|
||||
if (!("interactive_workbook" in body)) return body;
|
||||
const { interactive_workbook: _drop, ...rest } = body;
|
||||
return rest;
|
||||
}
|
||||
|
||||
390
frontend/src/components/coursePlan/PlanReader.tsx
Normal file
390
frontend/src/components/coursePlan/PlanReader.tsx
Normal file
@@ -0,0 +1,390 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
BookOpen,
|
||||
Calendar,
|
||||
ClipboardList,
|
||||
Headphones,
|
||||
Image as ImageIcon,
|
||||
Library,
|
||||
Link2,
|
||||
MessageSquare,
|
||||
Mic,
|
||||
Music,
|
||||
PenSquare,
|
||||
Sparkles,
|
||||
Type,
|
||||
Video,
|
||||
type LucideIcon,
|
||||
} from "lucide-react";
|
||||
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
HoverCard,
|
||||
HoverCardContent,
|
||||
HoverCardTrigger,
|
||||
} from "@/components/ui/hover-card";
|
||||
import { withAuthQuery } from "@/lib/api-client";
|
||||
import MaterialBookView, {
|
||||
SkillBadge,
|
||||
} from "@/components/coursePlan/MaterialBookView";
|
||||
import type { WorkbookMode } from "@/components/coursePlan/InteractiveWorkbook";
|
||||
import type {
|
||||
CoursePlan,
|
||||
CoursePlanMaterial,
|
||||
CoursePlanMedia,
|
||||
CoursePlanWeek,
|
||||
} from "@/types";
|
||||
|
||||
const SKILL_ICONS: Record<string, LucideIcon> = {
|
||||
reading: BookOpen,
|
||||
writing: PenSquare,
|
||||
listening: Headphones,
|
||||
speaking: Mic,
|
||||
grammar: Type,
|
||||
vocabulary: Library,
|
||||
integrated: MessageSquare,
|
||||
};
|
||||
|
||||
/**
|
||||
* Read-only renderer for a course plan that BOTH the student page and
|
||||
* the admin "View as Student" preview share. The only difference is
|
||||
* the workbook `mode`:
|
||||
*
|
||||
* - `mode="student"` → answers persist server-side (real attempts).
|
||||
* - `mode="preview"` → InteractiveWorkbook runs in preview mode (no
|
||||
* persistence) and surfaces an "Show answer key" toggle so admins
|
||||
* can verify the v2 generator's output.
|
||||
*
|
||||
* Materials are rendered through `MaterialBookView`, which dispatches
|
||||
* `interactive_workbook` materials into the live workbook component.
|
||||
*/
|
||||
export interface PlanReaderProps {
|
||||
plan: CoursePlan;
|
||||
mode?: WorkbookMode;
|
||||
/** Heading level for accessibility — admins use this inside their own
|
||||
* Card; students use it as the page's main grid block. Defaults to 'h3'. */
|
||||
headingClassName?: string;
|
||||
}
|
||||
|
||||
export default function PlanReader({ plan, mode = "student" }: PlanReaderProps) {
|
||||
const { t } = useTranslation();
|
||||
const materialsByWeek = useMemo(() => {
|
||||
const map = new Map<number, CoursePlanMaterial[]>();
|
||||
if (!plan.materials) return map;
|
||||
for (const m of plan.materials) {
|
||||
const list = map.get(m.week_number) ?? [];
|
||||
list.push(m);
|
||||
map.set(m.week_number, list);
|
||||
}
|
||||
return map;
|
||||
}, [plan.materials]);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between gap-3 flex-wrap">
|
||||
<div className="flex-1 min-w-0">
|
||||
<CardTitle className="text-2xl">{plan.name}</CardTitle>
|
||||
{plan.description && (
|
||||
<CardDescription className="max-w-3xl">
|
||||
{plan.description}
|
||||
</CardDescription>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<Badge variant="secondary" className="uppercase">
|
||||
{plan.cefr_level}
|
||||
</Badge>
|
||||
<Badge variant="outline">
|
||||
{t("coursePlan.weeksCount", { count: plan.total_weeks })}
|
||||
</Badge>
|
||||
<Badge variant="outline">
|
||||
{t("coursePlan.hoursPerWeek", {
|
||||
count: plan.contact_hours_per_week,
|
||||
})}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
{plan.assignment && (
|
||||
<p className="text-xs text-muted-foreground flex items-center gap-1.5">
|
||||
<Calendar className="h-3.5 w-3.5" />
|
||||
{plan.assignment.due_date
|
||||
? t("coursePlan.student.due", { date: plan.assignment.due_date })
|
||||
: t("coursePlan.student.noDue")}
|
||||
{plan.assignment.assigned_by_name && (
|
||||
<span>
|
||||
·{" "}
|
||||
{t("coursePlan.student.assignedBy", {
|
||||
name: plan.assignment.assigned_by_name,
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
{plan.assignment?.message && (
|
||||
<p className="text-sm bg-muted/40 rounded-md px-3 py-2 mt-2">
|
||||
{plan.assignment.message}
|
||||
</p>
|
||||
)}
|
||||
</CardHeader>
|
||||
</Card>
|
||||
|
||||
{plan.objectives && plan.objectives.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<ClipboardList className="h-4 w-4 text-primary" />
|
||||
{t("coursePlan.sections.objectives")}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ol className="list-decimal list-inside space-y-1 text-sm">
|
||||
{plan.objectives.map((o, i) => (
|
||||
<li key={i}>{o}</li>
|
||||
))}
|
||||
</ol>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{plan.weeks && plan.weeks.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Sparkles className="h-4 w-4 text-primary" />
|
||||
{t("coursePlan.sections.delivery")}
|
||||
</CardTitle>
|
||||
<CardDescription>{t("coursePlan.deliveryHint")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Accordion type="multiple" className="w-full">
|
||||
{plan.weeks.map((w) => (
|
||||
<ReaderWeek
|
||||
key={w.id}
|
||||
week={w}
|
||||
materials={materialsByWeek.get(w.week_number) ?? []}
|
||||
mode={mode}
|
||||
/>
|
||||
))}
|
||||
</Accordion>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ReaderWeek({
|
||||
week,
|
||||
materials,
|
||||
mode,
|
||||
}: {
|
||||
week: CoursePlanWeek;
|
||||
materials: CoursePlanMaterial[];
|
||||
mode: WorkbookMode;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [skillFilter, setSkillFilter] = useState<string>("all");
|
||||
const skills = useMemo(
|
||||
() => Array.from(new Set(materials.map((m) => m.skill))).sort(),
|
||||
[materials],
|
||||
);
|
||||
const filteredMaterials = useMemo(
|
||||
() =>
|
||||
materials.filter(
|
||||
(m) => skillFilter === "all" || m.skill === skillFilter,
|
||||
),
|
||||
[materials, skillFilter],
|
||||
);
|
||||
return (
|
||||
<AccordionItem value={String(week.week_number)}>
|
||||
<AccordionTrigger className="text-left">
|
||||
<div className="flex-1 flex items-center gap-3 min-w-0">
|
||||
<Badge variant="outline" className="shrink-0">
|
||||
{t("coursePlan.weekN", { n: week.week_number })}
|
||||
</Badge>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium truncate">
|
||||
{week.focus || week.unit || "—"}
|
||||
</div>
|
||||
{week.date_label && (
|
||||
<div className="text-xs text-muted-foreground truncate">
|
||||
{week.date_label}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="space-y-3">
|
||||
{skills.length > 0 && (
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
<Button
|
||||
size="sm"
|
||||
variant={skillFilter === "all" ? "default" : "outline"}
|
||||
onClick={() => setSkillFilter("all")}
|
||||
>
|
||||
{t("common.all", "All")}
|
||||
</Button>
|
||||
{skills.map((s) => (
|
||||
<Button
|
||||
key={s}
|
||||
size="sm"
|
||||
variant={skillFilter === s ? "default" : "outline"}
|
||||
onClick={() => setSkillFilter(s)}
|
||||
className="capitalize"
|
||||
>
|
||||
{s}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{materials.length === 0 && (
|
||||
<p className="text-sm italic text-muted-foreground">
|
||||
{t("coursePlan.media.noMedia")}
|
||||
</p>
|
||||
)}
|
||||
{filteredMaterials.map((m) => (
|
||||
<ReaderMaterial key={m.id} material={m} mode={mode} />
|
||||
))}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
);
|
||||
}
|
||||
|
||||
function ReaderMaterial({
|
||||
material,
|
||||
mode,
|
||||
}: {
|
||||
material: CoursePlanMaterial;
|
||||
mode: WorkbookMode;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const Icon = SKILL_ICONS[material.skill] ?? ClipboardList;
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Icon className="h-4 w-4 text-primary" />
|
||||
<CardTitle className="text-base flex-1 min-w-0">
|
||||
{material.title}
|
||||
</CardTitle>
|
||||
<Badge variant="outline" className="text-[10px]">
|
||||
{t(
|
||||
`coursePlan.materialType.${material.material_type}`,
|
||||
material.material_type,
|
||||
)}
|
||||
</Badge>
|
||||
<SkillBadge skill={material.skill} />
|
||||
<GroundingBadge material={material} />
|
||||
</div>
|
||||
{material.summary && (
|
||||
<CardDescription>{material.summary}</CardDescription>
|
||||
)}
|
||||
{material.share_date && (
|
||||
<CardDescription>
|
||||
{t("coursePlan.shareDate", "Share date")}: {material.share_date}
|
||||
</CardDescription>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{(material.media ?? []).map((m) => (
|
||||
<ReaderMediaTile key={m.id} media={m} />
|
||||
))}
|
||||
<MaterialBookView material={material} mode={mode} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function ReaderMediaTile({ media }: { media: CoursePlanMedia }) {
|
||||
const url = withAuthQuery(media.preview_url || media.download_url || "");
|
||||
if (!url) return null;
|
||||
return (
|
||||
<div className="rounded-md border bg-muted/20 p-2 space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
{media.kind === "audio" && <Music className="h-4 w-4" />}
|
||||
{media.kind === "image" && <ImageIcon className="h-4 w-4" />}
|
||||
{media.kind === "video" && <Video className="h-4 w-4" />}
|
||||
<span className="capitalize text-xs text-muted-foreground">
|
||||
{media.kind}
|
||||
</span>
|
||||
</div>
|
||||
{media.kind === "audio" && <audio src={url} controls className="w-full" />}
|
||||
{media.kind === "image" && (
|
||||
<img
|
||||
src={url}
|
||||
alt={media.title}
|
||||
className="w-full rounded-md max-h-72 object-contain bg-muted/30"
|
||||
/>
|
||||
)}
|
||||
{media.kind === "video" && (
|
||||
<video src={url} controls className="w-full rounded-md max-h-72" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Pill that surfaces RAG / extraction provenance for one material. */
|
||||
export function GroundingBadge({ material }: { material: CoursePlanMaterial }) {
|
||||
const grounded = material.grounded_on ?? [];
|
||||
const extracted = material.extracted_from ?? null;
|
||||
if (!grounded.length && !extracted) return null;
|
||||
const total =
|
||||
grounded.reduce((acc, g) => acc + (g.chunks_used || 0), 0) +
|
||||
(extracted ? 1 : 0);
|
||||
return (
|
||||
<HoverCard openDelay={150}>
|
||||
<HoverCardTrigger asChild>
|
||||
<Badge variant="secondary" className="cursor-help">
|
||||
<Link2 className="mr-1 h-3 w-3" />
|
||||
Grounded on {total} reference{total === 1 ? "" : "s"}
|
||||
</Badge>
|
||||
</HoverCardTrigger>
|
||||
<HoverCardContent className="w-72 text-xs">
|
||||
{grounded.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
<div className="font-medium text-sm">RAG sources</div>
|
||||
<ul className="space-y-1">
|
||||
{grounded.map((g) => (
|
||||
<li key={g.source_id} className="flex justify-between gap-2">
|
||||
<span className="truncate">{g.title || `Source #${g.source_id}`}</span>
|
||||
<span className="text-muted-foreground">{g.chunks_used} chunk(s)</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
{extracted && (
|
||||
<div className={grounded.length ? "mt-3 border-t pt-2" : ""}>
|
||||
<div className="font-medium text-sm">Extracted from</div>
|
||||
<div className="text-muted-foreground">
|
||||
{extracted.source_title || `Source #${extracted.source_id}`}
|
||||
{extracted.page_hint ? ` · ${extracted.page_hint}` : ""}
|
||||
</div>
|
||||
{extracted.topic_keywords && extracted.topic_keywords.length > 0 && (
|
||||
<div className="mt-1 text-muted-foreground">
|
||||
Topics: {extracted.topic_keywords.slice(0, 5).join(", ")}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</HoverCardContent>
|
||||
</HoverCard>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user