@learnpack/learnpack 5.0.362 → 5.0.364

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

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

@@ -0,0 +1,193 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
+import toast from "react-hot-toast";
+import "../i18n";
+import { FileCard } from "./FileCard";
+import { FileReviewButton } from "./FileReviewModal";
+import { MarkdownRenderer } from "./MarkdownRenderer";
+import useStore from "../utils/store";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import type { ParsedFile, ReadReport } from "./FileUploader";
+
+vi.mock("react-hot-toast");
+
+const report: ReadReport = {
+  total_pages: 3,
+  ai_pages: [],
+  unread_pages: [],
+  failed_pages: [],
+  markdown: true,
+};
+
+const file = (changes: Partial<ParsedFile> = {}): ParsedFile => ({
+  name: "seed.pdf",
+  text: "\n[Page 1]\n|Term|Definition|\n|---|---|\n|Loop|Repeats|\n",
+  status: "SUCCESS",
+  notificationId: "read-1",
+  report,
+  ...changes,
+});
+
+const storedText = () => useStore.getState().uploadedFiles[0].text;
+
+const open = (name: string) => fireEvent.click(screen.getByText(name));
+
+beforeEach(() => {
+  vi.resetAllMocks();
+  useStore.getState().setUploadedFiles([file()]);
+});
+
+afterEach(cleanup);
+
+describe("FileReviewButton", () => {
+  it("stays quiet on an ordinary read", () => {
+    render(<FileReviewButton file={file()} />);
+
+    expect(screen.getByText("View text")).toBeTruthy();
+  });
+
+  it("asks for a review when the AI read pages", () => {
+    render(<FileReviewButton file={file({ report: { ...report, ai_pages: [1, 2] } })} />);
+
+    open("Review text");
+
+    expect(
+      screen.getByText("We read 2 of 3 pages with AI. Check names, figures and dates.")
+    ).toBeTruthy();
+  });
+
+  it("names the pages that are missing, without repeating them", () => {
+    render(
+      <FileReviewButton
+        file={file({ report: { ...report, unread_pages: [3, 2], failed_pages: [2] } })}
+      />
+    );
+
+    open("Review text");
+
+    expect(screen.getByText("We could not fully read these pages: 2, 3.")).toBeTruthy();
+  });
+
+  it("draws tables instead of showing their markdown", () => {
+    render(<FileReviewButton file={file()} />);
+
+    open("View text");
+
+    expect(screen.getByRole("table")).toBeTruthy();
+    expect(screen.getByRole("cell", { name: "Repeats" })).toBeTruthy();
+  });
+
+  it("shows page headings on screen and keeps the markers in the stored text", () => {
+    render(<FileReviewButton file={file()} />);
+
+    open("View text");
+
+    expect(screen.getByRole("heading", { name: "Page 1" })).toBeTruthy();
+    expect(screen.queryByText("[Page 1]")).toBeNull();
+    expect(storedText()).toContain("[Page 1]");
+  });
+
+  it("keeps the lines of plain text apart", () => {
+    render(<FileReviewButton file={file({ text: "One\nTwo", report: undefined })} />);
+
+    open("View text");
+
+    expect(screen.getByText(/One/).className).toContain("whitespace-pre-wrap");
+  });
+
+  it("saves edits where every prompt reads the file from", () => {
+    render(<FileReviewButton file={file()} />);
+    open("View text");
+    open("Edit");
+
+    fireEvent.change(screen.getByRole("textbox"), {
+      target: { value: "Corrected text" },
+    });
+    open("Save changes");
+
+    expect(storedText()).toBe("Corrected text");
+    expect(screen.queryByText("Save changes")).toBeNull();
+  });
+
+  it("discards edits on close", () => {
+    render(<FileReviewButton file={file()} />);
+    open("View text");
+    open("Edit");
+
+    fireEvent.change(screen.getByRole("textbox"), { target: { value: "Changed" } });
+    open("Close");
+
+    expect(storedText()).toBe(file().text);
+  });
+
+  it("does not let the user save an empty document", () => {
+    render(<FileReviewButton file={file()} />);
+    open("View text");
+    open("Edit");
+
+    fireEvent.change(screen.getByRole("textbox"), { target: { value: "   " } });
+
+    expect(
+      (screen.getByText("Save changes") as HTMLButtonElement).disabled
+    ).toBe(true);
+  });
+});
+
+describe("MarkdownRenderer", () => {
+  it("leaves the chat's markdown without table support", () => {
+    render(<MarkdownRenderer content={"|a|b|\n|---|---|\n|1|2|"} />);
+
+    expect(screen.queryByRole("table")).toBeNull();
+  });
+});
+
+describe("FileCard", () => {
+  const renderCard = (value: ParsedFile) =>
+    render(
+      <TooltipProvider>
+        <FileCard file={value} handleRemove={() => {}} />
+      </TooltipProvider>
+    );
+
+  const rerenderCard = (
+    rerender: ReturnType<typeof render>["rerender"],
+    value: ParsedFile
+  ) =>
+    act(() =>
+      rerender(
+        <TooltipProvider>
+          <FileCard file={value} handleRemove={() => {}} />
+        </TooltipProvider>
+      )
+    );
+
+  it("warns once when a read from the sidebar used the AI", () => {
+    const { rerender } = renderCard(
+      file({ status: "PROCESSING", text: "", report: undefined })
+    );
+
+    const finished = file({ report: { ...report, ai_pages: [1] } });
+    rerenderCard(rerender, finished);
+    rerenderCard(rerender, { ...finished });
+
+    expect(toast).toHaveBeenCalledTimes(1);
+  });
+
+  it("says nothing when the page reloads with a read already finished", () => {
+    renderCard(file({ report: { ...report, ai_pages: [1] } }));
+
+    expect(toast).not.toHaveBeenCalled();
+  });
+
+  it("reports a failed read", () => {
+    const { rerender } = renderCard(
+      file({ status: "PROCESSING", text: "", report: undefined })
+    );
+
+    rerenderCard(rerender, file({ status: "ERROR", text: "", report: undefined }));
+
+    expect(toast.error).toHaveBeenCalledWith(
+      "We could not read this file. Remove it or upload it again."
+    );
+  });
+});