@learnpack/learnpack 5.0.359 → 5.0.360

package/lib/creatorDist/index.html

@@ -10,8 +10,8 @@
     />
 
     <title>Learnpack Creator: Craft tutorials in seconds!</title>
-    <script type="module" crossorigin src="/creator/assets/index-D6pmbMe9.js"></script>
-    <link rel="stylesheet" crossorigin href="/creator/assets/index-zrPponAn.css">
+    <script type="module" crossorigin src="/creator/assets/index-GYxGB_X0.js"></script>
+    <link rel="stylesheet" crossorigin href="/creator/assets/index-B7s5Nmq8.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@learnpack/learnpack",
   "description": "Seamlessly build, sell and/or take interactive & auto-graded tutorials, start learning now or build a new tutorial to your audience.",
-  "version": "5.0.359",
+  "version": "5.0.360",
   "author": "Alejandro Sanchez @alesanchezr",
   "contributors": [
     {

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

@@ -0,0 +1,338 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import i18n from "./i18n";
+import App from "./App";
+import useStore, { FormState } from "./utils/store";
+import { publicInteractiveCreation } from "./utils/rigo";
+import type { ParsedFile } from "./components/FileUploader";
+import { TooltipProvider } from "@/components/ui/tooltip";
+
+// Network edges only: everything else (store, i18n, wizard, detection) is real.
+vi.mock("./utils/rigo", () => ({
+  publicInteractiveCreation: vi.fn(async () => ({ notificationId: "job-1" })),
+  isHuman: vi.fn(),
+}));
+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;
+vi.mock("./components/NotificationListener", () => ({
+  default: ({ onNotification }: { onNotification: (p: unknown) => void }) => {
+    deliverNotification = onNotification;
+    return null;
+  },
+}));
+vi.mock("./components/TurnstileChallenge", () => ({ default: () => null }));
+vi.mock("./components/TurnstileModal", () => ({ default: () => null }));
+
+const ENGLISH_SEED =
+  "Relational databases store information in tables made of rows and columns. " +
+  "Each table describes one kind of thing, such as customers or orders, and the " +
+  "relationships between tables are expressed through keys. In this chapter you " +
+  "will learn how to write queries that filter, sort and join data. ";
+const SPANISH_SEED =
+  "Las bases de datos relacionales guardan la información en tablas formadas " +
+  "por filas y columnas. Cada tabla describe un tipo de cosa, como clientes o " +
+  "pedidos, y las relaciones entre tablas se expresan mediante claves. En este " +
+  "capítulo aprenderás a escribir consultas que filtran y combinan datos. ";
+
+const file = (text: string, status: ParsedFile["status"] = "SUCCESS"): ParsedFile => ({
+  name: "seed.pdf",
+  text,
+  status,
+  notificationId: "",
+});
+
+const sentCourseInfo = () => {
+  const calls = vi.mocked(publicInteractiveCreation).mock.calls;
+  expect(calls).toHaveLength(1);
+  return calls[0][0].courseInfo;
+};
+
+const ASK_MESSAGE = "Which language should the course be in?";
+
+const setUp = async ({
+  form = {},
+  files = [],
+  url = "/creator",
+  interfaceLanguage = "en",
+}: {
+  form?: Partial<FormState>;
+  files?: ParsedFile[];
+  url?: string;
+  interfaceLanguage?: string;
+}) => {
+  localStorage.clear();
+  window.history.replaceState({}, "", url);
+  useStore.setState(useStore.getInitialState(), true);
+  const store = useStore.getState();
+  store.setAuth({ ...store.auth, publicToken: "public-token" });
+  store.setFormState({ description: "React hooks", purpose: "learnpack-lesson-writer", duration: 30, ...form });
+  store.setUploadedFiles(files);
+  await act(() => i18n.changeLanguage(interfaceLanguage));
+  // Mounted like main.tsx does.
+  render(
+    <TooltipProvider>
+      <MemoryRouter>
+        <App />
+      </MemoryRouter>
+    </TooltipProvider>
+  );
+};
+
+/** What the wizard does when its last step is answered. */
+const finishWizard = () =>
+  act(() => useStore.getState().setFormState({ isCompleted: true }));
+
+beforeEach(() => {
+  vi.mocked(publicInteractiveCreation).mockClear();
+  deliverNotification = null;
+});
+afterEach(cleanup);
+
+describe("course language at generation", () => {
+  it("follows an English seed under a Spanish interface (the reported bug)", async () => {
+    await setUp({
+      form: { description: "Learn how to document REST APIs", hasContentIndex: true },
+      files: [file(ENGLISH_SEED)],
+      interfaceLanguage: "es",
+    });
+    finishWizard();
+
+    await waitFor(() => expect(publicInteractiveCreation).toHaveBeenCalled());
+    expect(screen.queryByText("¿En qué idioma quieres el curso?")).toBeNull();
+    expect(sentCourseInfo()).toContain('"language":"en"');
+    expect(sentCourseInfo()).toContain("The user chose English as the course language.");
+
+    // The model still answers Spanish: the settled language wins.
+    act(() =>
+      deliverNotification!({
+        status: "SUCCESS",
+        parsed: {
+          title: "Documentar APIs REST",
+          description: "Un curso.",
+          languageCode: "es",
+          technologies: [],
+          aiMessage: "Listo.",
+          listOfSteps: ["00.0 - Welcome [READ: ...]"],
+        },
+      })
+    );
+    const { courseInfo } = useStore.getState().history[0];
+    expect(courseInfo.language).toBe("en");
+    expect("languageChosen" in courseInfo).toBe(false);
+    expect(i18n.language).toBe("en");
+  });
+
+  it("asks when the seed and the description disagree, and sends the answer", async () => {
+    await setUp({
+      form: { description: "Quiero aprender a documentar APIs REST", hasContentIndex: true },
+      files: [file(ENGLISH_SEED)],
+    });
+    finishWizard();
+
+    expect(await screen.findByText(ASK_MESSAGE)).toBeTruthy();
+    expect(publicInteractiveCreation).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByText("Spanish"));
+
+    await waitFor(() => expect(publicInteractiveCreation).toHaveBeenCalled());
+    expect(sentCourseInfo()).toContain('"language":"es"');
+    expect(sentCourseInfo()).toContain("The user chose Spanish as the course language.");
+    expect(useStore.getState().formState).toMatchObject({
+      language: "es",
+      languageChosen: true,
+    });
+  });
+
+  it("asks when uploaded files disagree with each other", async () => {
+    await setUp({
+      form: { description: "React hooks", hasContentIndex: true },
+      files: [file(ENGLISH_SEED), file(SPANISH_SEED)],
+    });
+    finishWizard();
+
+    expect(await screen.findByText(ASK_MESSAGE)).toBeTruthy();
+    expect(publicInteractiveCreation).not.toHaveBeenCalled();
+  });
+
+  it("reads pasted text as the seed", async () => {
+    await setUp({
+      form: {
+        description: "Learn how to design databases",
+        hasContentIndex: true,
+        currentStep: "contentIndex",
+        variables: ["description", "contentIndex"],
+      },
+    });
+
+    fireEvent.click(screen.getByText("Write or paste a content table"));
+    fireEvent.change(screen.getByPlaceholderText("Add your text here..."), {
+      target: { value: SPANISH_SEED },
+    });
+    fireEvent.click(screen.getByText("Finish"));
+
+    expect(await screen.findByText(ASK_MESSAGE)).toBeTruthy();
+  });
+
+  it("ignores files that are still being read", async () => {
+    await setUp({
+      form: { description: "React hooks", hasContentIndex: true },
+      files: [file(ENGLISH_SEED), file(SPANISH_SEED, "PROCESSING")],
+    });
+    finishWizard();
+
+    await waitFor(() => expect(publicInteractiveCreation).toHaveBeenCalled());
+    expect(sentCourseInfo()).toContain("The user chose English as the course language.");
+  });
+
+  it("leaves the request untouched when the user said there is no content", async () => {
+    // Files left over from an earlier attempt are not the user's seed.
+    await setUp({
+      form: { description: "Quiero aprender SQL", hasContentIndex: false },
+      files: [file(ENGLISH_SEED)],
+    });
+    finishWizard();
+
+    await waitFor(() => expect(publicInteractiveCreation).toHaveBeenCalled());
+    expect(screen.queryByText(ASK_MESSAGE)).toBeNull();
+    expect(sentCourseInfo()).not.toContain("as the course language");
+    expect(sentCourseInfo()).not.toContain("languageChosen");
+  });
+});
+
+describe("course language picker", () => {
+  it("starts on Auto", async () => {
+    await setUp({});
+    expect((screen.getByRole("combobox") as HTMLSelectElement).value).toBe("auto");
+  });
+
+  it("wins over the seed without asking", async () => {
+    await setUp({
+      form: { description: "Learn how to document REST APIs", hasContentIndex: true },
+      files: [file(ENGLISH_SEED)],
+    });
+    fireEvent.change(screen.getByRole("combobox"), { target: { value: "es" } });
+    expect(i18n.language).toBe("es");
+    finishWizard();
+
+    await waitFor(() => expect(publicInteractiveCreation).toHaveBeenCalled());
+    expect(screen.queryByText("¿En qué idioma quieres el curso?")).toBeNull();
+    expect(sentCourseInfo()).toContain("The user chose Spanish as the course language.");
+  });
+
+  it("explains Auto in a hint", async () => {
+    await setUp({});
+    fireEvent.focus(screen.getByRole("combobox"));
+
+    expect(
+      (await screen.findAllByText(i18n.t("courseLanguage.autoHint"))).length
+    ).toBeGreaterThan(0);
+  });
+
+  it("hides the hint once a language is picked", async () => {
+    await setUp({});
+    fireEvent.change(screen.getByRole("combobox"), { target: { value: "en" } });
+    fireEvent.focus(screen.getByRole("combobox"));
+
+    expect(screen.queryAllByText(i18n.t("courseLanguage.autoHint"))).toHaveLength(0);
+  });
+
+  it("goes back to the defaults on Auto", async () => {
+    await setUp({});
+    fireEvent.change(screen.getByRole("combobox"), { target: { value: "es" } });
+    fireEvent.change(screen.getByRole("combobox"), { target: { value: "auto" } });
+
+    expect(useStore.getState().formState).toMatchObject({
+      language: "en",
+      languageChosen: false,
+    });
+  });
+});
+
+describe("language URL param", () => {
+  it("counts as the user's choice", async () => {
+    await setUp({
+      url: "/creator?language=es",
+      form: { description: "Learn how to document REST APIs", hasContentIndex: true },
+      files: [file(ENGLISH_SEED)],
+    });
+    expect(useStore.getState().formState).toMatchObject({
+      language: "es",
+      languageChosen: true,
+    });
+    finishWizard();
+
+    await waitFor(() => expect(publicInteractiveCreation).toHaveBeenCalled());
+    expect(sentCourseInfo()).toContain("The user chose Spanish as the course language.");
+  });
+
+  it.each(["fr", "es-MX"])("ignores the unsupported value %j", async (value) => {
+    await setUp({ url: `/creator?language=${value}` });
+    expect(useStore.getState().formState).toMatchObject({
+      language: "en",
+      languageChosen: false,
+    });
+  });
+
+  it("accepts an uppercase value", async () => {
+    await setUp({ url: "/creator?language=ES" });
+    expect(useStore.getState().formState).toMatchObject({
+      language: "es",
+      languageChosen: true,
+    });
+  });
+});
+
+describe("description language modal", () => {
+  const typeDescriptionAndGoNext = (description: string) => {
+    fireEvent.change(screen.getByPlaceholderText(i18n.t("stepWizard.descriptionPlaceholder")), {
+      target: { value: description },
+    });
+    fireEvent.click(screen.getByText(i18n.t("stepWizard.next")));
+  };
+
+  it("still suggests Spanish for a Spanish description", async () => {
+    await setUp({ form: { description: "" } });
+    typeDescriptionAndGoNext("Quiero aprender a crear APIs con Flask");
+    expect(screen.getByText("Language detected")).toBeTruthy();
+  });
+
+  it("records staying as a choice", async () => {
+    await setUp({ form: { description: "" } });
+    typeDescriptionAndGoNext("Quiero aprender a crear APIs con Flask");
+    fireEvent.click(screen.getByText("Stay in English"));
+
+    expect(useStore.getState().formState).toMatchObject({
+      language: "en",
+      languageChosen: true,
+    });
+  });
+
+  it("does not ask again once a language is chosen", async () => {
+    await setUp({ form: { description: "" } });
+    fireEvent.change(screen.getByRole("combobox"), { target: { value: "en" } });
+    typeDescriptionAndGoNext("Quiero aprender a crear APIs con Flask");
+    expect(screen.queryByText("Language detected")).toBeNull();
+  });
+
+  it("does not offer English to an en-US interface", async () => {
+    await setUp({
+      url: "/creator?description=Learn%20how%20to%20build%20REST%20APIs%20with%20Flask",
+      interfaceLanguage: "en-US",
+    });
+    expect(screen.queryByText("Language detected")).toBeNull();
+  });
+});

package/src/creator/src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import StepWizard from "./components/StepWizard"
 import SelectableCard from "./components/SelectableCard"
 import Loader from "./components/Loader"
@@ -39,6 +39,17 @@ import TurnstileModal from "./components/TurnstileModal"
 import { TMessage } from "./components/Message"
 import { Lesson } from "./components/LessonItem"
 import LanguageDetectionModal from "./components/LanguageDetectionModal"
+import CourseLanguagePicker, {
+  TCourseLanguageChoice,
+} from "./components/CourseLanguagePicker"
+import {
+  decideCourseLanguage,
+  detectDescriptionLanguage,
+  detectSeedLanguage,
+  TCourseLanguage,
+  toCourseLanguage,
+} from "./utils/courseLanguage"
+import { buildCourseInfo, toCourseFormState } from "./utils/creationRequest"
 
 function App() {
   const navigate = useNavigate()
@@ -82,6 +93,19 @@ function App() {
   const [showTurnstileModal, setShowTurnstileModal] = useState(false)
   const [showLanguageDetectionModal, setShowLanguageDetectionModal] = useState(false)
   const [detectedLanguage, setDetectedLanguage] = useState<string>("")
+  const [showCourseLanguageModal, setShowCourseLanguageModal] = useState(false)
+  // Readable content behind the last content-index answer (pasted text or a
+  // video transcript), for detecting the course language. Uploaded files are
+  // read from the store instead.
+  const seedTextRef = useRef<string | null>(null)
+  // 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)
+
+  // i18next's resolved language is always one with translations, so this is
+  // "en" for an "en-US" or a French browser alike.
+  const getInterfaceLanguage = (): TCourseLanguage =>
+    toCourseLanguage(i18n.resolvedLanguage) ?? "en"
 
   useEffect(() => {
     if (formState.isCompleted) {
@@ -162,24 +186,31 @@ function App() {
     }
     
     // Language detection logic
-    let finalLanguage = language
+    // Only a language the creator supports counts, because it is now the
+    // user's choice and wins over detection and the model.
+    const urlLanguage = toCourseLanguage(language)
 
     // Change if query param is provided
-    if (finalLanguage && finalLanguage.length === 2) {
-      console.log("LANGUAGE", finalLanguage)
+    if (urlLanguage) {
+      console.log("LANGUAGE", urlLanguage)
       setFormState({
-        language: finalLanguage,
+        language: urlLanguage,
+        languageChosen: true,
       })
-      if (i18n.language !== finalLanguage) {
-        i18n.changeLanguage(finalLanguage)
+      if (i18n.language !== urlLanguage) {
+        i18n.changeLanguage(urlLanguage)
       }
     }
 
-    // If no language is provided, detect the language of the description
-    if (!finalLanguage && description) {
+    // If no language is provided or already chosen, detect the language of
+    // the description
+    if (
+      !urlLanguage &&
+      description &&
+      !useStore.getState().formState.languageChosen
+    ) {
       const detectedLang = detectLanguage(description)
-      if (detectedLang && detectedLang !== i18n.language) {
-        finalLanguage = detectedLang
+      if (detectedLang && detectedLang !== getInterfaceLanguage()) {
         setDetectedLanguage(detectedLang)
         setShowLanguageDetectionModal(true)
       }
@@ -213,8 +244,37 @@ function App() {
     }
   }
 
+  /**
+   * Settles the course language from the user's choice or the content they
+   * gave. Reads the store directly because it also runs right after a language
+   * answer, before this render's formState has caught up.
+   */
+  const decideLanguageForGeneration = () => {
+    const { formState: current, uploadedFiles: files } = useStore.getState()
+    const seeds = current.hasContentIndex
+      ? [
+          ...files.filter((f) => f.status === "SUCCESS").map((f) => f.text),
+          ...(seedTextRef.current ? [seedTextRef.current] : []),
+        ]
+      : []
+
+    return decideCourseLanguage({
+      chosen: current.languageChosen ? toCourseLanguage(current.language) : null,
+      seed: detectSeedLanguage(seeds),
+      description: detectDescriptionLanguage(current.description),
+    })
+  }
+
   const handleCreateTutorial = async () => {
     try {
+      const decision = decideLanguageForGeneration()
+      if (decision.kind === "ask") {
+        setShowCourseLanguageModal(true)
+        return
+      }
+      const courseLanguage = decision.kind === "use" ? decision.language : null
+      courseLanguageRef.current = courseLanguage
+
       let isAuthenticated = false
       let tokenToUse = ""
       let tokenType = ""
@@ -248,7 +308,9 @@ function App() {
         return
       }
 
-      let techs = technologies.filter((t) => t.lang === formState.language)
+      let techs = technologies.filter(
+        (t) => t.lang === (courseLanguage ?? formState.language)
+      )
 
       if (techs.length === 0) {
         techs = technologies.filter((t) => t.lang === "en")
@@ -256,14 +318,12 @@ function App() {
 
       const res = await publicInteractiveCreation(
         {
-          courseInfo: `${JSON.stringify(
-            formState
-          )}. The following technologies are available, choose up to 3 from the following list: <techs>${techs
-            .map((t) => t.slug)
-            .join(", ")}</techs>
-            
-            The following files have been uploaded by the user: ${uploadedFiles.map((f) => `<FILE name="${f.name}">${f.text}</FILE>`).join("\n")}
-            `,
+          courseInfo: buildCourseInfo({
+            formState,
+            techs,
+            uploadedFiles,
+            language: courseLanguage,
+          }),
           prevInteractions: "USER: " + formState.description,
         },
         tokenToUse,
@@ -329,14 +389,28 @@ function App() {
         )
       }
 
+      // A language settled before generation (the user's choice or the
+      // seed's) wins over the model's, which follows the description.
+      const courseLanguage = courseLanguageRef.current
+      if (
+        courseLanguage &&
+        parsed.languageCode &&
+        parsed.languageCode !== courseLanguage
+      ) {
+        console.warn(
+          `Asked for a course in "${courseLanguage}", the model answered "${parsed.languageCode}"`
+        )
+      }
+
       push({
         lessons,
         courseInfo: {
-          ...formState,
+          ...toCourseFormState(formState),
           title: parsed.title,
           slug: slugify(fixTitleLength(parsed.title)),
           description: parsed.description,
-          language: parsed.languageCode || formState.language || "en",
+          language:
+            courseLanguage || parsed.languageCode || formState.language || "en",
           technologies:
             parsed.technologies.length > 0
               ? parsed.technologies
@@ -344,8 +418,9 @@ function App() {
         },
       })
 
-      if (parsed.languageCode) {
-        i18n.changeLanguage(parsed.languageCode)
+      const interfaceLanguage = courseLanguage || parsed.languageCode
+      if (interfaceLanguage) {
+        i18n.changeLanguage(interfaceLanguage)
       }
 
       const initialMessages: TMessage[] = [
@@ -397,15 +472,42 @@ function App() {
   const handleLanguageSwitch = () => {
     setFormState({
       language: detectedLanguage,
+      languageChosen: true,
     })
     i18n.changeLanguage(detectedLanguage)
     setShowLanguageDetectionModal(false)
   }
 
   const handleLanguageStay = () => {
+    // Staying is a choice too: the course keeps the interface language.
+    setFormState({
+      language: getInterfaceLanguage(),
+      languageChosen: true,
+    })
     setShowLanguageDetectionModal(false)
   }
 
+  const handleCourseLanguageChoice = (language: TCourseLanguage) => {
+    setShowCourseLanguageModal(false)
+    setFormState({ language, languageChosen: true })
+    i18n.changeLanguage(language)
+    handleCreateTutorial()
+  }
+
+  const handleCourseLanguagePick = (choice: TCourseLanguageChoice) => {
+    if (choice === "auto") {
+      // Back to the store's defaults: nothing chosen, the model decides.
+      setFormState({ language: "en", languageChosen: false })
+      return
+    }
+    setFormState({ language: choice, languageChosen: true })
+    i18n.changeLanguage(choice)
+  }
+
+  const courseLanguageChoice: TCourseLanguageChoice =
+    (formState.languageChosen && toCourseLanguage(formState.language)) ||
+    "auto"
+
   const buildSteps = () => {
     const steps = [
       {
@@ -417,7 +519,12 @@ function App() {
           const lang = detectLanguage(value)
           console.log("Description validator language detection:", { lang, currentLang: i18n.language, value })
 
-          if (lang && lang !== "en" && lang !== i18n.language) {
+          if (
+            !formState.languageChosen &&
+            lang &&
+            lang !== "en" &&
+            lang !== getInterfaceLanguage()
+          ) {
             setDetectedLanguage(lang)
             setShowLanguageDetectionModal(true)
           }
@@ -584,7 +691,8 @@ function App() {
         required: true,
         content: (
           <Uploader
-            onFinish={(text) => {
+            onFinish={(text, seedText) => {
+              seedTextRef.current = seedText ?? null
               setFormState({
                 contentIndex: text,
                 isCompleted: true,
@@ -612,6 +720,18 @@ function App() {
           onStay={handleLanguageStay}
         />
       )}
+      {showCourseLanguageModal && (
+        <LanguageDetectionModal
+          detectedLanguage="en"
+          title={t("languageDetection.chooseTitle")}
+          message={t("languageDetection.chooseMessage")}
+          switchLabel={t("languageDetection.languages.en")}
+          stayLabel={t("languageDetection.languages.es")}
+          equalChoices
+          onSwitch={() => handleCourseLanguageChoice("en")}
+          onStay={() => handleCourseLanguageChoice("es")}
+        />
+      )}
       {showTurnstileModal && (
         <TurnstileModal
           onClose={() => {
@@ -658,6 +778,12 @@ function App() {
           )}
           <StepWizard
             hideLastButton={true}
+            footer={
+              <CourseLanguagePicker
+                value={courseLanguageChoice}
+                onChange={handleCourseLanguagePick}
+              />
+            }
             formState={formState}
             steps={buildSteps()}
             setFormState={setFormState}