@learnpack/learnpack 5.0.361 → 5.0.363

package/src/creator/src/App.test.tsx

@@ -24,7 +24,6 @@ vi.mock("./utils/lib", async (importOriginal) => ({
   ...(await importOriginal<typeof import("./utils/lib")>()),
   isValidPublicToken: vi.fn(async () => true),
   isValidRigoToken: vi.fn(async () => false),
-  getTechnologies: vi.fn(async () => []),
   loginWithToken: vi.fn(),
 }));
 let deliverNotification: ((payload: unknown) => void) | null = null;
@@ -34,6 +33,12 @@ vi.mock("./components/NotificationListener", () => ({
     return null;
   },
 }));
+let expireWatchdog: (() => void) | null = null;
+vi.mock("./utils/useCompletionWatchdog", () => ({
+  useCompletionWatchdog: (_id: string, onTimeout: () => void) => {
+    expireWatchdog = onTimeout;
+  },
+}));
 vi.mock("./components/TurnstileChallenge", () => ({ default: () => null }));
 vi.mock("./components/TurnstileModal", () => ({ default: () => null }));
 
@@ -296,6 +301,124 @@ describe("language URL param", () => {
   });
 });
 
+describe("when generation fails", () => {
+  const TITLE = "We could not generate your course";
+  const REJECTED = {
+    id: 231,
+    status: "ERROR",
+    status_text: "The selected model openai/gpt-5.6-luna doesn't support structured outputs",
+    parsed: null,
+  };
+  const UNEXPLAINED = { id: 232, status: "ERROR", status_text: "boom", parsed: null };
+
+  const generate = async () => {
+    deliverNotification = null;
+    finishWizard();
+    await waitFor(() => expect(deliverNotification).not.toBeNull());
+  };
+
+  const fail = async (payload: unknown) => {
+    await generate();
+    act(() => deliverNotification!(payload));
+  };
+
+  it("stays on screen with its reference instead of returning to the wizard", async () => {
+    await setUp({});
+    await fail(UNEXPLAINED);
+
+    expect(screen.getByRole("alert").textContent).toContain(TITLE);
+    expect(screen.getByText("Reference code: 232")).toBeTruthy();
+    expect(screen.getByText("Your answers and files are still saved.")).toBeTruthy();
+    expect(screen.queryByText("Any materials to get this course started?")).toBeNull();
+  });
+
+  it("retries with one click and no more questions", async () => {
+    await setUp({});
+    await fail(UNEXPLAINED);
+
+    deliverNotification = null;
+    fireEvent.click(screen.getByText("Try again"));
+
+    await waitFor(() => expect(publicInteractiveCreation).toHaveBeenCalledTimes(2));
+    await waitFor(() => expect(deliverNotification).not.toBeNull());
+    expect(screen.queryByRole("alert")).toBeNull();
+  });
+
+  it("sends to support a failure a retry cannot fix", async () => {
+    await setUp({});
+    await fail(REJECTED);
+
+    expect(
+      screen.getByText("Please contact support and share the reference code.")
+    ).toBeTruthy();
+    expect(screen.getByText("Reference code: 231")).toBeTruthy();
+    expect(screen.queryByText("Try again")).toBeNull();
+    expect(screen.getByText("Review my answers")).toBeTruthy();
+  });
+
+  it("sends to support an unknown failure that repeats", async () => {
+    await setUp({});
+    await fail(UNEXPLAINED);
+    expect(screen.getByText("Try again")).toBeTruthy();
+
+    deliverNotification = null;
+    fireEvent.click(screen.getByText("Try again"));
+    await waitFor(() => expect(deliverNotification).not.toBeNull());
+    act(() => deliverNotification!(UNEXPLAINED));
+
+    expect(screen.queryByText("Try again")).toBeNull();
+    expect(
+      screen.getByText("Please contact support and share the reference code.")
+    ).toBeTruthy();
+  });
+
+  it("names the job even when its notification never arrives", async () => {
+    vi.mocked(publicInteractiveCreation).mockResolvedValueOnce({
+      res: { id: 77 },
+      notificationId: "job-1",
+    });
+    await setUp({});
+    await generate();
+
+    act(() => expireWatchdog!());
+
+    expect(
+      screen.getByText("This is taking longer than expected, so we stopped waiting. Please try again.")
+    ).toBeTruthy();
+    expect(screen.getByText("Reference code: 77")).toBeTruthy();
+  });
+
+  it("shows no reference when the request never created a job", async () => {
+    vi.mocked(publicInteractiveCreation).mockResolvedValueOnce(null);
+    await setUp({});
+    finishWizard();
+
+    await waitFor(() => expect(screen.getByRole("alert")).toBeTruthy());
+    expect(screen.queryByText(/Reference code/)).toBeNull();
+  });
+
+  it("reviews the materials when there are files, keeping them", async () => {
+    await setUp({ form: { hasContentIndex: true }, files: [file(ENGLISH_SEED)] });
+    await fail(REJECTED);
+
+    fireEvent.click(screen.getByText("Review my answers"));
+
+    expect(screen.queryByRole("alert")).toBeNull();
+    expect(useStore.getState().formState.currentStep).toBe("contentIndex");
+    expect(useStore.getState().uploadedFiles).toHaveLength(1);
+  });
+
+  it("asks about materials again when there were none", async () => {
+    await setUp({});
+    await fail(REJECTED);
+
+    fireEvent.click(screen.getByText("Review my answers"));
+
+    expect(useStore.getState().formState.currentStep).toBe("hasContentIndex");
+    expect(screen.getByText("Any materials to get this course started?")).toBeTruthy();
+  });
+});
+
 describe("description language modal", () => {
   const typeDescriptionAndGoNext = (description: string) => {
     fireEvent.change(screen.getByPlaceholderText(i18n.t("stepWizard.descriptionPlaceholder")), {

package/src/creator/src/App.tsx

@@ -13,7 +13,6 @@ import {
   loginWithToken,
   parseLesson,
   fixTitleLength,
-  getTechnologies,
   detectLanguage,
   isValidPublicToken,
 } from "./utils/lib"
@@ -29,15 +28,16 @@ import { possiblePurposes, PurposeSelector } from "./components/PurposeSelector"
 import { useTranslation } from "react-i18next"
 import NotificationListener from "./components/NotificationListener"
 import {
-  COMPLETION_ERROR_I18N_KEY,
   interpretCompletionPayload,
   TCompletionErrorCode,
+  TGenerationFailure,
 } from "./utils/completionResult"
 import { useCompletionWatchdog } from "./utils/useCompletionWatchdog"
 import { slugify } from "./utils/creatorUtils"
 import TurnstileModal from "./components/TurnstileModal"
 import { TMessage } from "./components/Message"
 import { Lesson } from "./components/LessonItem"
+import GenerationErrorCard from "./components/GenerationErrorCard"
 import LanguageDetectionModal from "./components/LanguageDetectionModal"
 import CourseLanguagePicker, {
   TCourseLanguageChoice,
@@ -68,15 +68,11 @@ function App() {
     resetFormState,
     cleanAll,
     setMessages,
-    technologies,
-    setTechnologies,
   } = useStore(
     useShallow((state) => ({
       formState: state.formState,
       setFormState: state.setFormState,
       setAuth: state.setAuth,
-      technologies: state.technologies,
-      setTechnologies: state.setTechnologies,
       push: state.push,
       history: state.history,
       cleanHistory: state.cleanHistory,
@@ -90,6 +86,8 @@ function App() {
   )
 
   const [notificationId, setNotificationId] = useState<string>("")
+  const [generationFailure, setGenerationFailure] =
+    useState<TGenerationFailure | null>(null)
   const [showTurnstileModal, setShowTurnstileModal] = useState(false)
   const [showLanguageDetectionModal, setShowLanguageDetectionModal] = useState(false)
   const [detectedLanguage, setDetectedLanguage] = useState<string>("")
@@ -98,6 +96,9 @@ function App() {
   // video transcript), for detecting the course language. Uploaded files are
   // read from the store instead.
   const seedTextRef = useRef<string | null>(null)
+  // Refs, because a retry clears the failure on screen but must not forget them.
+  const failedAttemptsRef = useRef(0)
+  const jobReferenceRef = useRef("")
   // Course language settled when generation is fired, reused when the result
   // arrives so the stored language matches the one that was sent.
   const courseLanguageRef = useRef<TCourseLanguage | null>(null)
@@ -116,7 +117,6 @@ function App() {
   useEffect(() => {
     verifyToken()
     checkQueryParams()
-    checkTechs()
   }, [])
 
   useCompletionWatchdog(notificationId, () => {
@@ -266,6 +266,7 @@ function App() {
   }
 
   const handleCreateTutorial = async () => {
+    jobReferenceRef.current = ""
     try {
       const decision = decideLanguageForGeneration()
       if (decision.kind === "ask") {
@@ -308,19 +309,10 @@ function App() {
         return
       }
 
-      let techs = technologies.filter(
-        (t) => t.lang === (courseLanguage ?? formState.language)
-      )
-
-      if (techs.length === 0) {
-        techs = technologies.filter((t) => t.lang === "en")
-      }
-
       const res = await publicInteractiveCreation(
         {
           courseInfo: buildCourseInfo({
             formState,
-            techs,
             uploadedFiles,
             language: courseLanguage,
           }),
@@ -330,48 +322,74 @@ function App() {
         formState.purpose || "learnpack-lesson-writer",
         tokenType === "rigo" ? false : true
       )
+      if (!res) {
+        handleCompletionFailure("UNKNOWN", "The completion request failed")
+        return
+      }
+
+      jobReferenceRef.current = String(res.res?.id ?? "")
       setNotificationId(res.notificationId)
     } catch (error) {
       console.error(error, "ERROR CREATING TUTORIAL")
-      toast.error("Something went wrong. Please try again.")
-      setFormState({
-        isCompleted: false,
-        currentStep: "hasContentIndex",
-      })
+      handleCompletionFailure("UNKNOWN", String(error))
     }
   }
 
   /**
-   * Leaves the loading screen and puts the user back on the last wizard step.
+   * Leaves the loading screen for the error screen, which stays until the user
+   * acts on it.
    *
    * Their answers stay in the store, so retrying costs them nothing. The raw
-   * detail goes to the console rather than the toast: it carries provider
+   * detail goes to the console rather than the screen: it carries provider
    * internals, such as the Rigobot team id, that mean nothing to the user.
    * @param code - The failure to report.
    * @param detail - The underlying message, for the console.
+   * @param reference - The job the failure came from, when the failure names it.
    */
   const handleCompletionFailure = (
     code: TCompletionErrorCode,
-    detail: string
+    detail: string,
+    reference = ""
   ) => {
     console.error("COURSE GENERATION FAILED", code, detail)
-    toast.error(t(COMPLETION_ERROR_I18N_KEY[code]))
+    failedAttemptsRef.current += 1
+    setGenerationFailure({
+      code,
+      reference: reference || jobReferenceRef.current,
+      attempts: failedAttemptsRef.current,
+    })
     setNotificationId("")
+
+    const { formState: current, uploadedFiles: files } = useStore.getState()
     setFormState({
       isCompleted: false,
-      currentStep: "hasContentIndex",
+      currentStep:
+        files.length > 0 || current.contentIndex.length > 0
+          ? "contentIndex"
+          : "hasContentIndex",
     })
   }
 
+  const handleRetryGeneration = () => {
+    setGenerationFailure(null)
+    setFormState({ isCompleted: true })
+  }
+
+  const handleReviewAnswers = () => {
+    failedAttemptsRef.current = 0
+    setGenerationFailure(null)
+  }
+
   const handleNotification = (payload: unknown) => {
     try {
       const result = interpretCompletionPayload(payload)
 
       if (!result.ok) {
-        handleCompletionFailure(result.code, result.detail)
+        handleCompletionFailure(result.code, result.detail, result.reference)
         return
       }
 
+      failedAttemptsRef.current = 0
       const { parsed } = result
       // parseLesson returns null for a step that does not match the expected
       // "01.0 - Title [TYPE: description]" format. Those nulls used to slip into
@@ -461,14 +479,6 @@ function App() {
     }
   }
 
-  const checkTechs = async () => {
-    if (technologies.length === 0) {
-      const technologies = await getTechnologies()
-      console.log("TECHNOLOGIES", technologies)
-      setTechnologies(technologies)
-    }
-  }
-
   const handleLanguageSwitch = () => {
     setFormState({
       language: detectedLanguage,
@@ -749,7 +759,13 @@ function App() {
           }}
         />
       )}
-      {formState.isCompleted && history.length === 0 ? (
+      {generationFailure ? (
+        <GenerationErrorCard
+          failure={generationFailure}
+          onRetry={handleRetryGeneration}
+          onReview={handleReviewAnswers}
+        />
+      ) : formState.isCompleted && history.length === 0 ? (
         <>
           <Loader
             text={t("loader.text")}

package/src/creator/src/components/FileCard.tsx

@@ -1,4 +1,9 @@
+import { useEffect, useRef } from "react"
+import toast from "react-hot-toast"
+import { useTranslation } from "react-i18next"
 import { SVGS } from "../assets/svgs"
+import { readNotices } from "../utils/fileRead"
+import { FileReviewButton } from "./FileReviewModal"
 import { ParsedFile } from "./FileUploader"
 import {
   Tooltip,
@@ -12,23 +17,62 @@ export const FileCard = ({
 }: {
   file: ParsedFile
   handleRemove: () => void
-}) => (
-  <div className="flex items-center justify-between bg-white shadow-sm p-2 rounded-lg w-[100px]">
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <span className="text-xs text-gray-800 truncate">
-          {file.name}
-        </span>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>{file.name}</p>
-      </TooltipContent>
-    </Tooltip>
-    <button
-      onClick={handleRemove}
-      className="p-1 text-red-500 hover:text-red-700 transition-colors cursor-pointer "
+}) => {
+  const { t } = useTranslation()
+  const notices = readNotices(file, t)
+  const isReading = useRef(file.status === "PROCESSING")
+
+  // The sidebar never asks before reading, so a read that needs attention
+  // speaks up once when it ends. Reloading the page must not repeat it.
+  useEffect(() => {
+    if (!isReading.current || file.status === "PROCESSING") return
+    isReading.current = false
+
+    if (file.status === "ERROR") {
+      toast.error(t("uploader.files.readFailed"))
+      return
+    }
+
+    readNotices(file, t).forEach((notice) => toast(notice, { icon: "⚠️" }))
+  }, [file, t])
+
+  return (
+    <div
+      className={
+        "flex items-center justify-between gap-1 shadow-sm p-2 rounded-lg w-[100px] " +
+        (file.status === "ERROR"
+          ? "bg-red-100"
+          : notices.length > 0
+          ? "bg-amber-100"
+          : "bg-white")
+      }
     >
-      {SVGS.trash}
-    </button>
-  </div>
-)
+      {file.status === "PROCESSING" && (
+        <div className="shrink-0 w-3 h-3 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
+      )}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span className="text-xs text-gray-800 truncate">
+            {file.status === "SUCCESS" ? (
+              <FileReviewButton file={file} label={file.name} />
+            ) : (
+              file.name
+            )}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{file.name}</p>
+          {notices.map((notice) => (
+            <p key={notice}>{notice}</p>
+          ))}
+        </TooltipContent>
+      </Tooltip>
+      <button
+        onClick={handleRemove}
+        className="p-1 text-red-500 hover:text-red-700 transition-colors cursor-pointer "
+      >
+        {SVGS.trash}
+      </button>
+    </div>
+  )
+}

package/src/creator/src/components/FileReadListener.test.tsx

@@ -0,0 +1,128 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
+import { act, cleanup, render } from "@testing-library/react";
+import FileReadListener, { FILE_READ_TIMEOUT_MS } from "./FileReadListener";
+import useStore from "../utils/store";
+import type { ParsedFile } from "./FileUploader";
+
+const sockets = vi.hoisted(() => ({
+  listeners: new Map<string, (data: unknown) => void>(),
+}));
+
+vi.mock("../utils/socket", () => ({
+  default: class {
+    subscribe(id: string, callback: (data: unknown) => void) {
+      sockets.listeners.set(id, callback);
+      return () => sockets.listeners.delete(id);
+    }
+  },
+}));
+
+const reading = (name: string): ParsedFile => ({
+  name,
+  text: "",
+  status: "PROCESSING",
+  notificationId: `read-${name}`,
+});
+
+const answer = (name: string, data: unknown) =>
+  act(() => sockets.listeners.get(`read-${name}`)?.(data));
+
+const file = (name: string) =>
+  useStore.getState().uploadedFiles.find((f) => f.name === name);
+
+beforeEach(() => {
+  sockets.listeners.clear();
+  useStore.getState().setUploadedFiles([]);
+});
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+});
+
+describe("FileReadListener", () => {
+  it("stores the text and the report of a finished read", () => {
+    useStore.getState().setUploadedFiles([reading("a.pdf")]);
+    render(<FileReadListener />);
+
+    const report = {
+      total_pages: 1,
+      ai_pages: [1],
+      unread_pages: [],
+      failed_pages: [],
+    };
+    answer("a.pdf", { text: "\n[Page 1]\nHello", report });
+
+    expect(file("a.pdf")).toMatchObject({
+      status: "SUCCESS",
+      text: "\n[Page 1]\nHello",
+      report,
+    });
+  });
+
+  it("keeps both answers when two files finish in turn", () => {
+    useStore.getState().setUploadedFiles([reading("a.pdf"), reading("b.pdf")]);
+    render(<FileReadListener />);
+
+    answer("a.pdf", { text: "first" });
+    answer("b.pdf", { text: "second" });
+
+    expect(file("a.pdf")).toMatchObject({ status: "SUCCESS", text: "first" });
+    expect(file("b.pdf")).toMatchObject({ status: "SUCCESS", text: "second" });
+  });
+
+  it("hears files added from anywhere, without an upload card on screen", () => {
+    render(<FileReadListener />);
+
+    act(() => useStore.getState().setUploadedFiles([reading("sidebar.pdf")]));
+    answer("sidebar.pdf", { text: "Read from the sidebar" });
+
+    expect(file("sidebar.pdf")?.text).toBe("Read from the sidebar");
+  });
+
+  it("does not touch a newer file that took the name of an old read", () => {
+    useStore.getState().setUploadedFiles([reading("a.pdf")]);
+    render(<FileReadListener />);
+    const oldAnswer = sockets.listeners.get("read-a.pdf");
+
+    act(() =>
+      useStore.getState().setUploadedFiles([
+        { ...reading("a.pdf"), notificationId: "read-a.pdf-new" },
+      ])
+    );
+    act(() => oldAnswer?.({ text: "old version" }));
+
+    expect(file("a.pdf")).toMatchObject({ status: "PROCESSING", text: "" });
+  });
+
+  it("marks the file as failed when the read comes back empty", () => {
+    useStore.getState().setUploadedFiles([reading("a.pdf")]);
+    render(<FileReadListener />);
+
+    answer("a.pdf", { text: "", status: "ERROR", error_code: "read_failed" });
+
+    expect(file("a.pdf")?.status).toBe("ERROR");
+  });
+
+  it("gives up on a read that never answers", () => {
+    vi.useFakeTimers();
+    useStore.getState().setUploadedFiles([reading("a.pdf")]);
+    render(<FileReadListener />);
+
+    act(() => {
+      vi.advanceTimersByTime(FILE_READ_TIMEOUT_MS);
+    });
+
+    expect(file("a.pdf")?.status).toBe("ERROR");
+    expect(sockets.listeners.size).toBe(0);
+  });
+
+  it("stops listening once the file is removed", () => {
+    useStore.getState().setUploadedFiles([reading("a.pdf")]);
+    render(<FileReadListener />);
+
+    act(() => useStore.getState().setUploadedFiles([]));
+
+    expect(sockets.listeners.size).toBe(0);
+  });
+});

package/src/creator/src/components/FileReadListener.tsx

@@ -0,0 +1,75 @@
+import { useEffect } from "react"
+import useStore from "../utils/store"
+import CreatorSocket from "../utils/socket"
+import type { ParsedFile } from "./FileUploader"
+
+export const FILE_READ_TIMEOUT_MS = 5 * 60 * 1000
+
+const socketClient = new CreatorSocket("")
+
+// Reads the store at call time: this runs long after the subscription was
+// created, and two files can finish while the same list is on screen.
+const updateFile = (notificationId: string, changes: Partial<ParsedFile>) => {
+  const { uploadedFiles, setUploadedFiles } = useStore.getState()
+  setUploadedFiles(
+    uploadedFiles.map((file) =>
+      file.notificationId === notificationId ? { ...file, ...changes } : file
+    )
+  )
+}
+
+const FileReadSubscription = ({
+  notificationId,
+}: {
+  notificationId: string
+}) => {
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      updateFile(notificationId, { status: "ERROR" })
+    }, FILE_READ_TIMEOUT_MS)
+
+    const onAnswer = (data: Pick<ParsedFile, "text" | "report">) => {
+      updateFile(
+        notificationId,
+        data.text
+          ? { status: "SUCCESS", text: data.text, report: data.report }
+          : { status: "ERROR" }
+      )
+    }
+
+    const release = socketClient.subscribe(notificationId, onAnswer)
+
+    return () => {
+      clearTimeout(timeout)
+      release()
+    }
+  }, [notificationId])
+
+  return null
+}
+
+/**
+ * Waits for the rigobot answer of every file being read.
+ *
+ * Lives above the routes because files are attached from two places and the
+ * user can leave either one while a read is running: a listener inside a card
+ * would die with the card, and the sidebar has no such card at all.
+ */
+const FileReadListener = () => {
+  const uploadedFiles = useStore((state) => state.uploadedFiles)
+
+  return (
+    <>
+      {uploadedFiles
+        .filter((file) => file.status === "PROCESSING" && file.notificationId)
+        .map((file) => (
+          <FileReadSubscription
+            key={file.notificationId}
+            notificationId={file.notificationId}
+          />
+        ))}
+    </>
+  )
+}
+
+export default FileReadListener