Study session

Renders a timed agenda from createStudySession(). Pass session.content (StudySessionContent). The component walks blocks, shows a per-block countdown, and mounts the matching material UI from materials (Quiz, Flashcards, StudyGuide, PracticeProblems, or notes).

Generation stays in edu-sdk. This component does not call createStudySession. Persistence of progress is also app-owned — use onBlockComplete / onSessionComplete if you need hooks.

Generated materials may include optional topics; quiz grades may include byTopic. This runner does not display those fields yet. Pass learnerContext at generation time — see Personalization.

Usage

import { createStudySession } from "edu-sdk";
import { StudySession } from "@edu-sdk/react";
import "@edu-sdk/react/styles.css";

const session = await createStudySession({
  model: "google/gemini-3.6-flash",
  content,
  durationMinutes: 45,
  difficulty: "medium",
});

<StudySession
  session={session.content}
  onBlockComplete={(block, index) => {
    // Optional: persist progress
  }}
  onSessionComplete={() => {
    // Optional: mark the session finished
  }}
/>

Props

type StudySessionProps = {
  session: StudySessionContent;
  className?: string;
  classNames?: StudySessionClassNames;
  allowSkip?: boolean; // default true
  autoAdvance?: boolean; // default false
  renderNotes?: (markdown: string) => ReactNode;
  onBlockComplete?: (block: StudySessionBlock, index: number) => void;
  onSessionComplete?: () => void;
};

• allowSkip — when true (default), a Skip control advances without waiting for the timer.
• autoAdvance — when true, moving to the next block (or finishing) happens when the block timer hits zero. Default is false.
• renderNotes — optional Markdown renderer for materials.notes. Without it, notes render as plain preformatted text.
• onBlockComplete — fires once per block when the learner leaves it (Next / Skip / Finish) or when the timer expires.
• onSessionComplete — fires once when the last block is finished (or auto-advanced through).

Empty blocks renders nothing.

classNames

Example

<StudySession
  session={session.content}
  allowSkip
  className="my-session"
  classNames={{
    topic: "my-topic",
    timer: "my-timer",
  }}
  renderNotes={(markdown) => <Markdown>{markdown}</Markdown>}
  onSessionComplete={() => {
    // App-owned persistence
  }}
/>

For a custom runner instead of this component, see Study session flow. See Styling for styles.css and CSS variables.