@learnpack/learnpack 5.0.359 → 5.0.360

package/src/creator/src/components/CourseLanguagePicker.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Icon } from "./Icon"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { TCourseLanguage } from "../utils/courseLanguage"
+
+export type TCourseLanguageChoice = TCourseLanguage | "auto"
+
+/**
+ * Lets the user fix the course language instead of leaving it to detection.
+ * Language names are written in their own language so each is recognizable
+ * whatever the interface language.
+ */
+export default function CourseLanguagePicker({
+  value,
+  onChange,
+}: {
+  value: TCourseLanguageChoice
+  onChange: (value: TCourseLanguageChoice) => void
+}) {
+  const { t } = useTranslation()
+  // Controlled so the hint only shows for Auto without remounting the select.
+  const [hintOpen, setHintOpen] = useState(false)
+
+  return (
+    <Tooltip open={hintOpen && value === "auto"} onOpenChange={setHintOpen}>
+      <TooltipTrigger asChild>
+        <label className="flex items-center gap-1 text-sm text-blue-600 whitespace-nowrap">
+          <Icon name="Globe" size={14} aria-hidden="true" />
+          {t("courseLanguage.label")}:
+          <select
+            className="field-sizing-content bg-transparent text-blue-600 hover:text-blue-800 cursor-pointer rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-300"
+            value={value}
+            onChange={(e) => onChange(e.target.value as TCourseLanguageChoice)}
+          >
+            <option value="auto">{t("courseLanguage.auto")}</option>
+            <option value="en">English</option>
+            <option value="es">Español</option>
+          </select>
+        </label>
+      </TooltipTrigger>
+      <TooltipContent className="max-w-64 text-center">
+        {t("courseLanguage.autoHint")}
+      </TooltipContent>
+    </Tooltip>
+  )
+}

package/src/creator/src/components/LanguageDetectionModal.tsx

@@ -4,12 +4,25 @@ interface LanguageDetectionModalProps {
   detectedLanguage: string
   onSwitch: () => void
   onStay: () => void
+  // Overrides for asking which language the course should be in, rather than
+  // suggesting an interface switch. Neither answer is the default there, so
+  // `equalChoices` gives both buttons the same weight.
+  title?: string
+  message?: string
+  switchLabel?: string
+  stayLabel?: string
+  equalChoices?: boolean
 }
 
 export default function LanguageDetectionModal({
   detectedLanguage,
   onSwitch,
   onStay,
+  title,
+  message,
+  switchLabel,
+  stayLabel,
+  equalChoices = false,
 }: LanguageDetectionModalProps) {
   const { t, i18n } = useTranslation()
 
@@ -17,27 +30,34 @@ export default function LanguageDetectionModal({
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-1000">
       <div className="bg-white p-6 rounded-xl shadow-md max-w-md w-full mx-4">
         <h2 className="text-xl font-semibold text-center mb-4">
-          {t("languageDetection.title")}
+          {title ?? t("languageDetection.title")}
         </h2>
         <p className="text-gray-600 text-center mb-6">
-          {t("languageDetection.message", { 
-            language: t(`languageDetection.languages.${detectedLanguage.toLowerCase()}`)
-          })}
+          {message ??
+            t("languageDetection.message", {
+              language: t(`languageDetection.languages.${detectedLanguage.toLowerCase()}`)
+            })}
         </p>
         <div className="flex flex-col sm:flex-row gap-3">
           <button
             onClick={onSwitch}
-            className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md font-semibold hover:bg-blue-700 transition-colors"
+            className={
+              equalChoices
+                ? "flex-1 bg-gray-200 text-gray-800 py-2 px-4 rounded-md font-semibold hover:bg-gray-300 transition-colors"
+                : "flex-1 bg-blue-600 text-white py-2 px-4 rounded-md font-semibold hover:bg-blue-700 transition-colors"
+            }
           >
-            {t("languageDetection.switchTo", { 
-              language: t(`languageDetection.languages.${detectedLanguage.toLowerCase()}`)
-            })}
+            {switchLabel ??
+              t("languageDetection.switchTo", {
+                language: t(`languageDetection.languages.${detectedLanguage.toLowerCase()}`)
+              })}
           </button>
           <button
             onClick={onStay}
             className="flex-1 bg-gray-200 text-gray-800 py-2 px-4 rounded-md font-semibold hover:bg-gray-300 transition-colors"
           >
-            {t(`languageDetection.stayIn${i18n.language.toLowerCase().split("-")[0]}`)}
+            {stayLabel ??
+              t(`languageDetection.stayIn${i18n.language.toLowerCase().split("-")[0]}`)}
           </button>
         </div>
       </div>

package/src/creator/src/components/StepWizard.tsx

@@ -20,6 +20,8 @@ type Props = {
   setFormState: (formState: any) => void
   onFinish: () => void
   hideLastButton?: boolean
+  // Shown between Back and Next on every step.
+  footer?: React.ReactNode
 }
 
 const StepWizard: React.FC<Props> = ({
@@ -28,6 +30,7 @@ const StepWizard: React.FC<Props> = ({
   setFormState,
   onFinish,
   hideLastButton = false,
+  footer,
 }) => {
   const { t } = useTranslation()
   const currentStep = formState.currentStep
@@ -99,20 +102,25 @@ const StepWizard: React.FC<Props> = ({
           {steps.find((step) => step.slug === currentStep)?.content}
         </div>
 
-        <div className="flex justify-between">
+        {/* Three columns keep the footer centered even when Next is hidden. On
+            narrow screens it gets its own row under Back and Next. */}
+        <div className="grid grid-cols-2 sm:grid-cols-[1fr_auto_1fr] items-center gap-2">
           <button
             onClick={goBack}
             disabled={index === 0}
-            className={`text-sm text-gray-500 hover:text-gray-900 disabled:opacity-40  ${
+            className={`justify-self-start text-sm text-gray-500 hover:text-gray-900 disabled:opacity-40  ${
               index === 0 ? "cursor-not-allowed" : "cursor-pointer"
             }`}
           >
             ⬅ {t("stepWizard.back")}
           </button>
+          <div className="col-span-2 row-start-2 justify-self-center sm:col-span-1 sm:col-start-2 sm:row-start-1">
+            {footer}
+          </div>
           {!(hideLastButton && index === totalSteps - 1) && (
             <button
               onClick={index === totalSteps - 1 ? onFinish : goNext}
-              className={`text-sm text-blue-600 hover:text-blue-800 cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed p-2 rounded-md ${
+              className={`justify-self-end text-sm text-blue-600 hover:text-blue-800 cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed p-2 rounded-md ${
                 index === totalSteps - 1 ? "bg-blue-600 text-white" : ""
               }`}
             >

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

@@ -0,0 +1,65 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import "../i18n";
+import { Uploader } from "./Uploader";
+
+const LINK = {
+  url: "https://www.youtube.com/watch?v=abc",
+  title: "Bases de datos",
+  transcript: "Hoy vamos a ver cómo se diseña una base de datos relacional",
+};
+
+// The real uploaders call Rigobot; these stand-ins finish straight away.
+vi.mock("./LinkUploader", () => ({
+  default: ({ onResult }: { onResult: (link: typeof LINK) => void }) => (
+    <button onClick={() => onResult(LINK)}>mock-link</button>
+  ),
+}));
+vi.mock("./FileUploader", () => ({
+  default: ({ onFinish }: { onFinish: () => void }) => (
+    <button onClick={onFinish}>mock-files</button>
+  ),
+}));
+
+afterEach(cleanup);
+
+describe("Uploader", () => {
+  it("hands pasted text over as both the content index and the seed", () => {
+    const onFinish = vi.fn();
+    render(<Uploader onFinish={onFinish} />);
+
+    fireEvent.click(screen.getByText("Write or paste a content table"));
+    fireEvent.change(screen.getByPlaceholderText("Add your text here..."), {
+      target: { value: "1. Tablas\n2. Claves" },
+    });
+    fireEvent.click(screen.getByText("Finish"));
+
+    expect(onFinish).toHaveBeenCalledWith(
+      "1. Tablas\n2. Claves",
+      "1. Tablas\n2. Claves"
+    );
+  });
+
+  it("hands a video's transcript over as the seed, outside the instructions", () => {
+    const onFinish = vi.fn();
+    render(<Uploader onFinish={onFinish} />);
+
+    fireEvent.click(screen.getByText("Share a Youtube link"));
+    fireEvent.click(screen.getByText("mock-link"));
+
+    expect(onFinish).toHaveBeenCalledWith(
+      `The following information comes from a Youtube video uploaded by the user. Use the transcript to create the course: ${JSON.stringify(LINK)}`,
+      LINK.transcript
+    );
+  });
+
+  it("gives no seed text for files, which are read from the store", () => {
+    const onFinish = vi.fn();
+    render(<Uploader onFinish={onFinish} />);
+
+    fireEvent.click(screen.getByText("Upload files"));
+    fireEvent.click(screen.getByText("mock-files"));
+
+    expect(onFinish).toHaveBeenCalledWith("");
+  });
+});

package/src/creator/src/components/Uploader.tsx

@@ -30,7 +30,10 @@ const TextUploader = ({ onFinish }: { onFinish: (text: string) => void }) => {
 export const Uploader = ({
   onFinish,
 }: {
-  onFinish: (text: string) => void
+  // seedText is the readable content behind `text`, used to detect the
+  // course language: the pasted text, or a video's transcript without the
+  // instructions wrapped around it. Uploaded files are read from the store.
+  onFinish: (text: string, seedText?: string) => void
 }) => {
   const [selectedOption, setSelectedOption] = useState<string | null>(null)
   const { t } = useTranslation()
@@ -62,7 +65,9 @@ export const Uploader = ({
         </>
       )}
 
-      {selectedOption === "text" && <TextUploader onFinish={onFinish} />}
+      {selectedOption === "text" && (
+        <TextUploader onFinish={(text) => onFinish(text, text)} />
+      )}
 
       {selectedOption === "files" && (
         <FileUploader
@@ -80,7 +85,8 @@ export const Uploader = ({
             onFinish(
               `The following information comes from a Youtube video uploaded by the user. Use the transcript to create the course: ${JSON.stringify(
                 link
-              )}`
+              )}`,
+              link.transcript
             )
           }}
         />

package/src/creator/src/locales/en.json

@@ -121,11 +121,18 @@
         "switchTo": "Yes, switch to {{language}}",
         "stayInen": "Stay in English",
         "stayInes": "Stay in Spanish",
+        "chooseTitle": "Course language",
+        "chooseMessage": "Which language should the course be in?",
         "languages": {
             "en": "English",
             "es": "Spanish"
         }
     },
+    "courseLanguage": {
+        "label": "Course language",
+        "auto": "Auto",
+        "autoHint": "Uses the language of your files and your description. If they don't match, we'll ask you."
+    },
     "login": {
         "creatingAccount": "Creating account…",
         "loggedInSuccessfully": "Logged in successfully",

package/src/creator/src/locales/es.json

@@ -121,11 +121,18 @@
         "switchTo": "Sí, cambiar a {{language}}",
         "stayInen": "Mantenerse en Inglés",
         "stayInes": "Mantenerse en Español",
+        "chooseTitle": "Idioma del curso",
+        "chooseMessage": "¿En qué idioma quieres el curso?",
         "languages": {
             "en": "Inglés",
             "es": "Español"
         }
     },
+    "courseLanguage": {
+        "label": "Idioma del curso",
+        "auto": "Automático",
+        "autoHint": "Usa el idioma de tus archivos y tu descripción. Si no coinciden, te preguntamos."
+    },
     "login": {
         "creatingAccount": "Creando cuenta…",
         "loggedInSuccessfully": "Inicio de sesión exitoso",

package/src/creator/src/utils/courseLanguage.test.ts

@@ -0,0 +1,215 @@
+import { describe, it, expect } from "vitest";
+import {
+  decideCourseLanguage,
+  detectDescriptionLanguage,
+  detectSeedLanguage,
+  detectTextLanguage,
+  toCourseLanguage,
+} from "./courseLanguage";
+
+const ENGLISH =
+  "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, and why " +
+  "indexes make those queries fast even when the tables hold millions of rows. ";
+
+const SPANISH =
+  "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, ordenan y combinan " +
+  "datos, y por qué los índices hacen que esas consultas sean rápidas. ";
+
+const PORTUGUESE =
+  "Os bancos de dados relacionais armazenam as informações em tabelas formadas " +
+  "por linhas e colunas. Cada tabela descreve um tipo de coisa, como clientes ou " +
+  "pedidos, e as relações entre as tabelas são expressas por meio de chaves. " +
+  "Neste capítulo você vai aprender a escrever consultas que filtram, ordenam e " +
+  "combinam dados, e por que os índices tornam essas consultas rápidas. ";
+
+const FRENCH =
+  "Les bases de données relationnelles stockent les informations dans des " +
+  "tables composées de lignes et de colonnes. Chaque table décrit un type de " +
+  "chose, comme les clients ou les commandes, et les relations entre les tables " +
+  "sont exprimées par des clés. Dans ce chapitre, vous apprendrez à écrire des " +
+  "requêtes qui filtrent, trient et combinent des données. ";
+
+const ENGLISH_COVER =
+  "University of Northfield. School of Engineering. Department of Computer " +
+  "Science. Lecture notes for the second year. Copyright 2024, all rights " +
+  "reserved. Prepared by the teaching staff for internal use only. ";
+
+const ENGLISH_REFERENCES =
+  "Codd, E. F. A relational model of data for large shared data banks. " +
+  "Communications of the ACM, volume 13, issue 6, pages 377 to 387. " +
+  "Date, C. J. An introduction to database systems. Addison Wesley. ";
+
+describe("toCourseLanguage", () => {
+  it.each([
+    ["es", "es"],
+    ["en", "en"],
+    ["EN", "en"],
+    [" es ", "es"],
+  ])("accepts %j as %s", (value, expected) => {
+    expect(toCourseLanguage(value)).toBe(expected);
+  });
+
+  it.each(["fr", "pt", "es-MX", "en-US", "", "spanish"])(
+    "rejects %j",
+    (value) => {
+      expect(toCourseLanguage(value)).toBeNull();
+    }
+  );
+
+  it("rejects a missing value", () => {
+    expect(toCourseLanguage(undefined)).toBeNull();
+    expect(toCourseLanguage(null)).toBeNull();
+  });
+});
+
+describe("detectTextLanguage", () => {
+  it("detects English and Spanish text", () => {
+    expect(detectTextLanguage(ENGLISH.repeat(2))).toBe("en");
+    expect(detectTextLanguage(SPANISH.repeat(2))).toBe("es");
+  });
+
+  it("reports other languages instead of passing them off as Spanish or English", () => {
+    expect(detectTextLanguage(PORTUGUESE.repeat(2))).toBe("other");
+    expect(detectTextLanguage(FRENCH.repeat(2))).toBe("other");
+  });
+
+  it("does not judge text with fewer than 200 letters", () => {
+    expect(detectTextLanguage("Python basics for data analysis")).toBeNull();
+  });
+
+  it("does not count digits and symbols as letters", () => {
+    // Over 200 characters, but under 200 letters: too little language to judge.
+    const text =
+      "Las ventas del trimestre por región y por producto son estas: " +
+      "| 2024 | 15.30 | 7 | 0.25 | 1999 | 48.10 | 3 | 0.75 |\n".repeat(6);
+    expect(text.length).toBeGreaterThan(200);
+    expect(detectTextLanguage(text)).toBeNull();
+  });
+
+  it("is not swayed by an English cover page on a Spanish document", () => {
+    const text = ENGLISH_COVER + SPANISH.repeat(20);
+    expect(detectTextLanguage(text)).toBe("es");
+  });
+
+  it("is not swayed by a long English bibliography after a Spanish body", () => {
+    // The body fills the first five windows, so the references never vote.
+    const text = SPANISH.repeat(40) + ENGLISH_REFERENCES.repeat(200);
+    expect(detectTextLanguage(text)).toBe("es");
+  });
+
+  it("does not guess when no language holds two thirds of the windows", () => {
+    // About half of the first five windows are Spanish, half English.
+    const text = SPANISH.repeat(14) + ENGLISH.repeat(40);
+    expect(detectTextLanguage(text)).toBeNull();
+  });
+});
+
+describe("detectSeedLanguage", () => {
+  const en = ENGLISH.repeat(2);
+  const es = SPANISH.repeat(2);
+  const pt = PORTUGUESE.repeat(2);
+
+  it("returns the language all sources share", () => {
+    expect(detectSeedLanguage([en])).toBe("en");
+    expect(detectSeedLanguage([es, es])).toBe("es");
+  });
+
+  it("reports sources that disagree instead of letting the longest win", () => {
+    expect(detectSeedLanguage([en.repeat(10), es])).toBe("mixed");
+  });
+
+  it("ignores sources too short to judge", () => {
+    expect(detectSeedLanguage([en, "Notas"])).toBe("en");
+  });
+
+  it("settles nothing when any source is in an unsupported language", () => {
+    expect(detectSeedLanguage([en, pt])).toBeNull();
+  });
+
+  it("settles nothing without judgeable sources", () => {
+    expect(detectSeedLanguage([])).toBeNull();
+    expect(detectSeedLanguage(["", "Notas"])).toBeNull();
+  });
+});
+
+describe("detectDescriptionLanguage", () => {
+  it.each([
+    "Learn TypeScript generics",
+    "Write better SQL queries",
+    "How to use pandas DataFrames",
+    "I want to learn how to build REST APIs with Flask",
+    "Teach the API documentation of our payment service",
+  ])("reads %j as English", (description) => {
+    expect(detectDescriptionLanguage(description)).toBe("en");
+  });
+
+  it.each([
+    "Curso de React hooks",
+    "Quiero aprender a construir APIs REST con Flask",
+    "Álgebra lineal para machine learning",
+    "Pipelines de CI/CD con GitHub Actions",
+    "¿Cómo funciona Docker?",
+  ])("reads %j as Spanish", (description) => {
+    expect(detectDescriptionLanguage(description)).toBe("es");
+  });
+
+  it.each([
+    "React hooks",
+    "Kubernetes",
+    "Data science con python course for beginners",
+    "",
+  ])("cannot tell %j", (description) => {
+    expect(detectDescriptionLanguage(description)).toBeNull();
+  });
+});
+
+describe("decideCourseLanguage", () => {
+  it.each([
+    // The user's choice wins over everything, with or without a seed.
+    [
+      { chosen: "es", seed: null, description: null },
+      { kind: "use", language: "es" },
+    ],
+    [
+      { chosen: "es", seed: "en", description: "en" },
+      { kind: "use", language: "es" },
+    ],
+    [
+      { chosen: "en", seed: "mixed", description: "es" },
+      { kind: "use", language: "en" },
+    ],
+    // Without a seed nothing is settled: the request goes out as before.
+    [{ chosen: null, seed: null, description: null }, { kind: "model" }],
+    [{ chosen: null, seed: null, description: "es" }, { kind: "model" }],
+    // The seed is used when the description agrees or cannot be judged.
+    [
+      { chosen: null, seed: "en", description: "en" },
+      { kind: "use", language: "en" },
+    ],
+    [
+      { chosen: null, seed: "en", description: null },
+      { kind: "use", language: "en" },
+    ],
+    [
+      { chosen: null, seed: "es", description: "es" },
+      { kind: "use", language: "es" },
+    ],
+    [
+      { chosen: null, seed: "es", description: null },
+      { kind: "use", language: "es" },
+    ],
+    // Any disagreement is the user's call.
+    [{ chosen: null, seed: "en", description: "es" }, { kind: "ask" }],
+    [{ chosen: null, seed: "es", description: "en" }, { kind: "ask" }],
+    [{ chosen: null, seed: "mixed", description: null }, { kind: "ask" }],
+    [{ chosen: null, seed: "mixed", description: "en" }, { kind: "ask" }],
+  ] as const)("%j decides %j", (input, expected) => {
+    expect(decideCourseLanguage(input)).toEqual(expected);
+  });
+});