@learnpack/learnpack 5.0.358 → 5.0.360

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

@@ -0,0 +1,104 @@
+import { describe, it, expect } from "vitest";
+import type { ParsedFile } from "../components/FileUploader";
+import { buildCourseInfo, toCourseFormState } from "./creationRequest";
+import useStore, { FormState } from "./store";
+
+/**
+ * The courseInfo the wizard sent before the course language could be settled,
+ * copied byte for byte from App.tsx (upstream 68c0bf9). Whitespace inside the
+ * template is part of the prompt, so it must not be reformatted.
+ */
+const legacyCourseInfo = (
+  formState: FormState,
+  techs: { slug: string }[],
+  uploadedFiles: ParsedFile[]
+) =>
+  // prettier-ignore
+  `${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")}
+            `;
+
+const defaultFormState = () => useStore.getInitialState().formState;
+
+const techs = [{ slug: "python" }, { slug: "sql" }];
+const uploadedFiles: ParsedFile[] = [
+  {
+    name: "notes.pdf",
+    text: "Relational databases",
+    status: "SUCCESS",
+    notificationId: "n1",
+  },
+];
+
+describe("buildCourseInfo", () => {
+  it("sends exactly the previous prompt when no language is settled", () => {
+    const formState = {
+      ...defaultFormState(),
+      description: "Learn SQL joins",
+      purpose: "learnpack-lesson-writer",
+      duration: 30,
+      hasContentIndex: true,
+    };
+    // The wizard state before this change had no languageChosen key.
+    const previousFormState = { ...formState };
+    delete previousFormState.languageChosen;
+
+    expect(
+      buildCourseInfo({ formState, techs, uploadedFiles, language: null })
+    ).toBe(legacyCourseInfo(previousFormState, techs, uploadedFiles));
+  });
+
+  it("asks for the settled language in plain words", () => {
+    const formState = { ...defaultFormState(), language: "en" };
+    const courseInfo = buildCourseInfo({
+      formState,
+      techs,
+      uploadedFiles,
+      language: "es",
+    });
+
+    expect(courseInfo).toContain('"language":"es"');
+    expect(courseInfo).not.toContain('"language":"en"');
+    expect(
+      courseInfo.endsWith(
+        "The user chose Spanish as the course language. This replaces the rule to write in the language of the user messages: write every field in Spanish, including the title, the description, and each step's title and description in listOfSteps, even if the user's messages or the uploaded files are in another language. Set languageCode to \"es\"."
+      )
+    ).toBe(true);
+  });
+
+  it("never sends languageChosen to the model", () => {
+    const formState = {
+      ...defaultFormState(),
+      language: "es",
+      languageChosen: true,
+    };
+    for (const language of [null, "es"] as const) {
+      expect(
+        buildCourseInfo({ formState, techs, uploadedFiles, language })
+      ).not.toContain("languageChosen");
+    }
+  });
+});
+
+describe("toCourseFormState", () => {
+  it("drops languageChosen and keeps every other key in order", () => {
+    const formState = { ...defaultFormState(), languageChosen: true };
+    const courseFormState = toCourseFormState(formState);
+
+    expect("languageChosen" in courseFormState).toBe(false);
+    expect(Object.keys(courseFormState)).toEqual(
+      Object.keys(formState).filter((key) => key !== "languageChosen")
+    );
+  });
+
+  it("does not change the form state it was given", () => {
+    const formState = { ...defaultFormState(), languageChosen: true };
+    toCourseFormState(formState);
+    expect(formState.languageChosen).toBe(true);
+  });
+});

package/src/creator/src/utils/creationRequest.ts

@@ -0,0 +1,63 @@
+import type { ParsedFile } from "../components/FileUploader";
+import type { TCourseLanguage } from "./courseLanguage";
+import type { FormState } from "./store";
+
+const LANGUAGE_NAMES: Record<TCourseLanguage, string> = {
+  en: "English",
+  es: "Spanish",
+};
+
+/**
+ * Drops the wizard-only fields from the form state before it leaves the
+ * wizard, in the prompt or in the syllabus sent to the server.
+ * @param formState - The wizard's form state.
+ * @returns A copy without `languageChosen`, keys otherwise in the same order.
+ */
+export const toCourseFormState = (formState: FormState): FormState => {
+  const courseFormState = { ...formState };
+  delete courseFormState.languageChosen;
+  return courseFormState;
+};
+
+/**
+ * Builds the `courseInfo` text sent to the model to generate the syllabus.
+ *
+ * Without a settled language the text is exactly what the wizard sent before
+ * the course language could be settled, so the model keeps choosing.
+ * @param language - The course language settled before generation, or null.
+ */
+export const buildCourseInfo = ({
+  formState,
+  techs,
+  uploadedFiles,
+  language,
+}: {
+  formState: FormState;
+  techs: { slug: string }[];
+  uploadedFiles: ParsedFile[];
+  language: TCourseLanguage | null;
+}): string => {
+  const courseFormState = toCourseFormState(formState);
+
+  // Kept byte for byte from the original request, including the spaces on the
+  // blank line, which .editorconfig would trim. creationRequest.test.ts checks
+  // it against a copy of the original.
+  const courseInfo = `${JSON.stringify(
+    language ? { ...courseFormState, language } : courseFormState
+  )}. 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")}
+            `;
+
+  if (!language) return courseInfo;
+
+  const name = LANGUAGE_NAMES[language];
+  // Prompt 390 keys on the first sentence to override its rule of writing in
+  // the language of the user messages, so keep its wording in sync.
+  return `${courseInfo}
+The user chose ${name} as the course language. This replaces the rule to write in the language of the user messages: write every field in ${name}, including the title, the description, and each step's title and description in listOfSteps, even if the user's messages or the uploaded files are in another language. Set languageCode to "${language}".`;
+};

package/src/creator/src/utils/store.ts

@@ -15,6 +15,10 @@ export type FormState = {
   difficulty: TDifficulty;
   slug: string;
   language?: string;
+  // True once the user picked the course language themselves (the language
+  // picker, the `language` URL param or a language modal). Never sent to the
+  // model or the server.
+  languageChosen?: boolean;
   isCompleted: boolean;
   variables: string[];
   currentStep: string;
@@ -93,6 +97,7 @@ const useStore = create<Store>()(
         contentIndex: "",
         purpose: "",
         language: "en",
+        languageChosen: false,
         technologies: [],
         difficulty: "beginner",
         // sources: [],
@@ -129,6 +134,7 @@ const useStore = create<Store>()(
             description: "",
             duration: 0,
             language: "en",
+            languageChosen: false,
             difficulty: "beginner",
             technologies: [],
             hasContentIndex: false,
@@ -179,6 +185,7 @@ const useStore = create<Store>()(
             slug: "",
             difficulty: "beginner",
             language: "en",
+            languageChosen: false,
             technologies: [],
             hasContentIndex: false,
             contentIndex: "",

package/src/creatorDist/assets/{index-zrPponAn.css → index-B7s5Nmq8.css}

@@ -65,6 +65,7 @@
     --color-blue-50: oklch(97% 0.014 254.604);
     --color-blue-100: oklch(93.2% 0.032 255.585);
     --color-blue-200: oklch(88.2% 0.059 254.128);
+    --color-blue-300: oklch(80.9% 0.105 251.813);
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
@@ -439,6 +440,12 @@
   .z-1000 {
     z-index: 1000;
   }
+  .col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .row-start-2 {
+    grid-row-start: 2;
+  }
   .container {
     width: 100%;
   }
@@ -536,6 +543,9 @@
   .flex {
     display: flex;
   }
+  .grid {
+    display: grid;
+  }
   .hidden {
     display: none;
   }
@@ -548,6 +558,9 @@
   .table {
     display: table;
   }
+  .field-sizing-content {
+    field-sizing: content;
+  }
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
@@ -644,6 +657,9 @@
   .w-full {
     width: 100%;
   }
+  .max-w-64 {
+    max-width: calc(var(--spacing) * 64);
+  }
   .max-w-\[700px\] {
     max-width: 700px;
   }
@@ -705,6 +721,9 @@
   .list-disc {
     list-style-type: disc;
   }
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -780,6 +799,15 @@
       calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))
     );
   }
+  .justify-self-center {
+    justify-self: center;
+  }
+  .justify-self-end {
+    justify-self: flex-end;
+  }
+  .justify-self-start {
+    justify-self: flex-start;
+  }
   .truncate {
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -905,6 +933,9 @@
   .bg-red-100 {
     background-color: var(--color-red-100);
   }
+  .bg-transparent {
+    background-color: #0000;
+  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -1046,6 +1077,9 @@
   .break-words {
     overflow-wrap: break-word;
   }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
   .whitespace-pre-line {
     white-space: pre-line;
   }
@@ -1244,6 +1278,19 @@
   .focus\:ring-blue-200:focus {
     --tw-ring-color: var(--color-blue-200);
   }
+  .focus\:outline-none:focus {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .focus-visible\:ring-2:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+      calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .focus-visible\:ring-blue-300:focus-visible {
+    --tw-ring-color: var(--color-blue-300);
+  }
   .disabled\:cursor-not-allowed:disabled {
     cursor: not-allowed;
   }
@@ -1257,9 +1304,21 @@
     opacity: 0.5;
   }
   @media (min-width: 40rem) {
+    .sm\:col-span-1 {
+      grid-column: span 1 / span 1;
+    }
+    .sm\:col-start-2 {
+      grid-column-start: 2;
+    }
+    .sm\:row-start-1 {
+      grid-row-start: 1;
+    }
     .sm\:w-auto {
       width: auto;
     }
+    .sm\:grid-cols-\[1fr_auto_1fr\] {
+      grid-template-columns: 1fr auto 1fr;
+    }
     .sm\:flex-row {
       flex-direction: row;
     }