@learnpack/learnpack 5.0.198 → 5.0.204

package/src/creator/src/App.tsx

@@ -12,6 +12,7 @@ import {
   isValidRigoToken,
   loginWithToken,
   parseLesson,
+  fixTitleLength,
 } from "./utils/lib"
 
 import { Uploader } from "./components/Uploader"
@@ -22,9 +23,11 @@ import TurnstileChallenge from "./components/TurnstileChallenge"
 // import TurnstileChallenge from "./components/TurnstileChallenge"
 import ResumeCourseModal from "./components/ResumeCourseModal"
 import { possiblePurposes, PurposeSelector } from "./components/PurposeSelector"
+import { useTranslation } from "react-i18next"
 
 function App() {
   const navigate = useNavigate()
+  const { t, i18n } = useTranslation()
 
   const {
     formState,
@@ -82,11 +85,12 @@ function App() {
   }
 
   const checkDescription = () => {
-    const { description, duration, plan, purpose } = checkParams([
+    const { description, duration, plan, purpose, language } = checkParams([
       "description",
       "duration",
       "plan",
       "purpose",
+      "language",
     ])
     if (description) {
       console.log("description", description)
@@ -114,6 +118,12 @@ function App() {
       console.debug("No plan received in params")
     }
 
+    if (language && language.length === 2) {
+      setFormState({
+        language: language,
+      })
+    }
+
     if (purpose && purpose.length > 0 && possiblePurposes.includes(purpose)) {
       setFormState({
         purpose: purpose,
@@ -137,8 +147,8 @@ function App() {
 
       const res = await publicInteractiveCreation(
         {
-          courseInfo: `${JSON.stringify(formState)}         `,
-          prevInteractions: "",
+          courseInfo: `${JSON.stringify(formState)}`,
+          prevInteractions: "USER: " + formState.description,
         },
         auth.rigoToken && isValid ? auth.rigoToken : auth.publicToken,
         formState.purpose || "learnpack-lesson-writer",
@@ -148,16 +158,21 @@ function App() {
         return parseLesson(lesson, [])
       })
 
-      console.log("RES FROM RIGO", res)
       push({
         lessons,
         courseInfo: {
           ...formState,
-          title: res.parsed.title,
+          title: fixTitleLength(res.parsed.title),
           description: res.parsed.description,
+          language: res.parsed.languageCode || formState.language || "en",
+          technologies: res.parsed.technologies,
         },
-        // messages: [],
       })
+
+      if (res.parsed.languageCode) {
+        i18n.changeLanguage(res.parsed.languageCode)
+      }
+
       navigate("/creator/syllabus")
       setFormState({
         isCompleted: false,
@@ -195,14 +210,14 @@ function App() {
   const buildSteps = () => {
     const steps = [
       {
-        title: "What do you want to learn?",
+        title: t("stepWizard.description"),
         slug: "description",
         isCompleted: formState.description.length > 0,
         required: true,
         content: (
           <textarea
             required
-            placeholder="Describe your course"
+            placeholder={t("stepWizard.descriptionPlaceholder")}
             className="w-full h-24 border-2 border-gray-300 rounded-md p-2 bg-white"
             value={formState.description}
             onChange={(e) => {
@@ -215,14 +230,14 @@ function App() {
       },
 
       {
-        title: "What is the estimated duration for this tutorial?",
+        title: t("stepWizard.duration"),
         slug: "duration",
         isCompleted: formState.duration > 0,
         required: true,
         content: (
           <div className="flex flex-col md:flex-row gap-2">
             <SelectableCard
-              title="Around 30 minutes"
+              title={t("stepWizard.durationCard.30")}
               // subtitle="This is a tutorial that will take 30 minutes to complete"
               onClick={() => {
                 setFormState({
@@ -233,7 +248,7 @@ function App() {
               selected={formState.duration === 30}
             />
             <SelectableCard
-              title="Around 1 hour"
+              title={t("stepWizard.durationCard.60")}
               // subtitle="This is a tutorial that will take 1 hour to complete"
               onClick={() => {
                 setFormState({
@@ -244,7 +259,7 @@ function App() {
               selected={formState.duration === 60}
             />
             <SelectableCard
-              title="Around 2 hours"
+              title={t("stepWizard.durationCard.120")}
               // subtitle="This is a tutorial that will take 2 hours to complete"
               onClick={() => {
                 setFormState({
@@ -258,7 +273,7 @@ function App() {
         ),
       },
       {
-        title: "How would you like to use learnpack?",
+        title: t("stepWizard.purpose"),
         slug: "purpose",
         isCompleted: formState?.purpose?.length > 0,
         required: true,
@@ -274,7 +289,7 @@ function App() {
         ),
       },
       {
-        title: "Please verify you are a human",
+        title: t("stepWizard.verifyHuman"),
         slug: "verifyHuman",
         isCompleted: false,
         required: true,
@@ -286,7 +301,7 @@ function App() {
             onSuccess={async (token) => {
               const { human, message, token: jwtToken } = await isHuman(token)
               if (human) {
-                toast.success("You are a human! 👌🏻")
+                toast.success(t("stepWizard.humanSuccess"))
 
                 console.log("JWT TOKEN received", jwtToken)
                 setAuth({
@@ -307,14 +322,14 @@ function App() {
         ),
       },
       {
-        title: "Any materials to get this course started?",
+        title: t("stepWizard.hasContentIndex"),
         slug: "hasContentIndex",
         isCompleted: false,
         content: (
           <>
             <div className="flex flex-col md:flex-row gap-2 justify-center">
               <SelectableCard
-                title="❌ No, help me create one"
+                title={t("stepWizard.hasContentIndexCard.no")}
                 onClick={() => {
                   setFormState({
                     hasContentIndex: false,
@@ -329,7 +344,7 @@ function App() {
                 // selected={formState.hasContentIndex === false}
               />
               <SelectableCard
-                title="✅ Yes"
+                title={t("stepWizard.hasContentIndexCard.yes")}
                 onClick={() => {
                   setFormState({
                     hasContentIndex: true,
@@ -344,10 +359,9 @@ function App() {
         ),
       },
       {
-        title: "Any materials to get this course started?",
+        title: t("stepWizard.contentIndex"),
         slug: "contentIndex",
-        helpText:
-          "It could be just text, paste an URL or even upload a document.",
+        helpText: t("stepWizard.contentIndexHelpText"),
         isCompleted:
           formState.contentIndex.length > 0 || uploadedFiles.length > 0,
         required: true,
@@ -376,11 +390,23 @@ function App() {
       <ParamsChecker />
       {formState.isCompleted && history.length === 0 ? (
         <Loader
-          text="Learnpack is setting up your tutorial. It may take a moment..."
+          text={t("loader.text")}
           icon={<img src={RIGO_FLOAT_GIF} alt="rigo" className="w-20 h-20" />}
         />
       ) : (
         <>
+          {/* {formState.language && (
+            <div className="flex flex-col items-center justify-center">
+              <p>
+                <span className="font-bold">Language:</span>{" "}
+                {formState.language}
+              </p>
+              <p>
+                <span className="font-bold">Technologies:</span>{" "}
+                {formState.technologies?.join(", ")}
+              </p>
+            </div>
+          )} */}
           {history.length > 0 && (
             <ResumeCourseModal
               onContinue={() => {

package/src/creator/src/components/FileUploader.tsx

@@ -6,7 +6,7 @@ import toast from "react-hot-toast"
 import CreatorSocket from "../utils/socket"
 import { DEV_MODE, RIGOBOT_HOST } from "../utils/constants"
 import axios from "axios"
-
+import { useTranslation } from "react-i18next"
 
 // `
 // app.post("/read-document", upload.single("file"), async (req, res) => {
@@ -174,6 +174,7 @@ const FileUploader: React.FC<FileUploaderProps> = ({
   onFinish,
 }) => {
   // const rigoToken = useStore((state) => state.auth.rigoToken)
+  const { t } = useTranslation()
   const publicToken = useStore((state) => state.auth.publicToken)
   const inputRef = useRef<HTMLInputElement>(null)
   const uploadedFiles = useStore((state) => state.uploadedFiles)
@@ -293,10 +294,10 @@ const FileUploader: React.FC<FileUploaderProps> = ({
           <ContentCard
             description={
               isDragging
-                ? "Drop it here"
+                ? t("uploader.files.drop")
                 : isLoading
-                ? "Processing..."
-                : "Upload a PDF or DOCX file or drag it here"
+                ? t("uploader.files.processing")
+                : t("uploader.files.descriptionLong")
             }
             icon={isDragging ? SVGS.clip : SVGS.pdf}
             onClick={() => inputRef.current?.click()}
@@ -315,7 +316,7 @@ const FileUploader: React.FC<FileUploaderProps> = ({
               onFinish?.(uploadedFiles)
             }}
           >
-            🚀 Finish
+            {t("uploader.files.finish")}
           </button>
         </>
       )}

package/src/creator/src/components/LinkUploader.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react"
+import { useTranslation } from "react-i18next"
 
 export interface ParsedLink {
   url: string
@@ -19,6 +20,7 @@ const toBase64Url = (str: string) =>
   btoa(str).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "")
 
 const LinkUploader: React.FC<LinkUploaderProps> = ({ onResult }) => {
+  const { t } = useTranslation()
   const [url, setUrl] = useState("")
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -54,7 +56,7 @@ const LinkUploader: React.FC<LinkUploaderProps> = ({ onResult }) => {
           onChange={(e) => setUrl(e.target.value)}
           onKeyDown={(e) => e.key === "Enter" && handleAdd()}
           disabled={loading}
-          placeholder="Paste your link here…"
+          placeholder={t("uploader.youtube.placeholder")}
           className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-200 transition disabled:bg-gray-100"
         />
         <button

package/src/creator/src/components/Login.tsx

@@ -5,9 +5,12 @@ import toast from "react-hot-toast"
 import useStore from "../utils/store"
 import { useShallow } from "zustand/react/shallow"
 import { login4Geeks, registerUserWithFormData } from "../utils/lib"
+import { useTranslation } from "react-i18next"
 
 export default function Login({ onFinish }: { onFinish: () => void }) {
   // Login states
+  const { t } = useTranslation()
+
   const [email, setEmail] = useState("")
   const [password, setPassword] = useState("")
   const [isLoading, setIsLoading] = useState(false)
@@ -28,20 +31,20 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
   const login = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     setIsLoading(true)
-    const tid = toast.loading("Logging in…")
+    const tid = toast.loading(t("login.loggingIn"))
     try {
       if (!email || !password) {
         setIsLoading(false)
-        toast.error("Please fill all fields", { id: tid })
+        toast.error(t("login.pleaseFillAllFields"), { id: tid })
         return
       }
       const resp = await login4Geeks({ email, password })
       if (!resp) {
         setIsLoading(false)
-        toast.error("Invalid credentials", { id: tid })
+        toast.error(t("login.invalidCredentials"), { id: tid })
         return
       }
-      toast.success("Logged in successfully", { id: tid })
+      toast.success(t("login.loggedInSuccessfully"), { id: tid })
       setAuth({
         bcToken: resp.token,
         userId: resp.user.id,
@@ -62,21 +65,21 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
   const handleSignup = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     setIsLoading(true)
-    const tid = toast.loading("Creating account…")
+    const tid = toast.loading(t("login.creatingAccount"))
     const { firstName, lastName, email } = signupData
     if (!firstName || !lastName || !email) {
       setIsLoading(false)
-      toast.error("Please fill all fields", { id: tid })
+      toast.error(t("login.pleaseFillAllFields"), { id: tid })
       return
     }
     try {
       await registerUserWithFormData(firstName, lastName, email)
-      toast.success("Account created! Check your email.", { id: tid })
+      toast.success(t("login.accountCreated"), { id: tid })
       setShowSignup(false)
       setShowForm(true)
       setEmail(email)
     } catch (err) {
-      toast.error("Registration failed. Try again.", { id: tid })
+      toast.error(t("login.registrationFailed"), { id: tid })
     } finally {
       setIsLoading(false)
     }
@@ -109,12 +112,12 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
         {showSignup ? (
           <>
             <h2 className="mb-4 text-xl font-semibold text-center">
-              Create your account
+              {t("login.createYourAccount")}
             </h2>
             <form className="space-y-3" onSubmit={handleSignup}>
               <input
                 type="text"
-                placeholder="First name"
+                placeholder={t("login.firstName")}
                 className="w-full border border-gray-300 px-3 py-2 rounded-md"
                 value={signupData.firstName}
                 onChange={(e) =>
@@ -123,7 +126,7 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
               />
               <input
                 type="text"
-                placeholder="Last name"
+                placeholder={t("login.lastName")}
                 className="w-full border border-gray-300 px-3 py-2 rounded-md"
                 value={signupData.lastName}
                 onChange={(e) =>
@@ -144,11 +147,11 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
                 className="w-full bg-blue-600 text-white py-2 rounded-md font-semibold cursor-pointer"
                 disabled={isLoading}
               >
-                {isLoading ? "Creating..." : "Sign up"}
+                {isLoading ? t("login.creating") : t("login.signUp")}
               </button>
             </form>
             <div className="mt-4 text-sm text-center">
-              Already have an account?{" "}
+              {t("login.alreadyHaveAnAccount")}
               <button
                 className="text-blue-600 font-medium"
                 onClick={() => {
@@ -156,31 +159,32 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
                   setShowForm(true)
                 }}
               >
-                Log in here
+                {t("login.logInHere")}
               </button>
             </div>
           </>
         ) : (
           <>
             <p className="mb-4 text-center text-gray-700">
-              You need to have a 4Geeks account with a creator plan to create a
-              tutorial.
+              {t("login.youNeedToHaveAnAccount")}
             </p>
             <button
               onClick={redirectGithub}
               className="w-full border border-gray-300 py-2 rounded-md font-semibold flex items-center justify-center gap-2 mb-4 cursor-pointer"
             >
-              {SVGS.github} LOGIN WITH GITHUB
+              {SVGS.github} {t("login.loginWithGithub")}
             </button>
             <button
               onClick={redirectGoogle}
               className="w-full border border-gray-300 py-2 rounded-md font-semibold flex items-center justify-center gap-2 mb-4 cursor-pointer"
             >
-              {SVGS.google} LOGIN WITH GOOGLE
+              {SVGS.google} {t("login.loginWithGoogle")}
             </button>
             <div className="flex items-center mb-4">
               <hr className="flex-grow border-gray-300" />
-              <span className="mx-2 text-gray-400 text-sm">or</span>
+              <span className="mx-2 text-gray-400 text-sm">
+                {t("login.or")}
+              </span>
               <hr className="flex-grow border-gray-300" />
             </div>
             {showForm ? (
@@ -194,7 +198,7 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
                 />
                 <input
                   type="password"
-                  placeholder="Password"
+                  placeholder={t("login.password")}
                   className="w-full border border-gray-300 px-3 py-2 rounded-md"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
@@ -204,23 +208,23 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
                     type="submit"
                     className="flex-1 bg-blue-500 text-white py-2 rounded-md font-semibold cursor-pointer"
                   >
-                    {isLoading ? "Logging in..." : "Log in"}
+                    {isLoading ? t("login.loggingIn") : t("login.logIn")}
                   </button>
                   <button
                     type="button"
                     onClick={() => setShowForm(false)}
                     className="flex-1 border border-blue-500 text-blue-600 py-2 rounded-md font-semibold cursor-pointer"
                   >
-                    Skip
+                    {t("login.skip")}
                   </button>
                 </div>
                 <div className="text-sm text-gray-600 mt-2">
-                  Forgot your password?{" "}
+                  {t("login.forgotPassword")}
                   <a
                     href={`${BREATHECODE_HOST}/v1/auth/password/reset?url=${getCurrentUrlWithQueryParams()}`}
                     className="text-blue-600 font-medium"
                   >
-                    Recover it here.
+                    {t("login.recoverItHere")}
                   </a>
                 </div>
               </form>
@@ -229,12 +233,14 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
                 onClick={() => setShowForm(true)}
                 className="w-full bg-blue-600 text-white py-2 rounded-md font-semibold cursor-pointer"
               >
-                Login with Email
+                {t("login.loginWithEmail")}
               </button>
             )}
             <div className="flex justify-between items-center mt-4">
               <div className="bg-blue-50 text-sm p-2 rounded text-left">
-                <p className="text-gray-700 m-0">You don't have an account?</p>
+                <p className="text-gray-700 m-0">
+                  {t("login.youDontHaveAnAccount")}
+                </p>
                 {/* <button
                   className="text-blue-600 font-medium cursor-pointer"
                   onClick={() => setShowSignup(true)}
@@ -246,7 +252,7 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
                   target="_blank"
                   className="text-blue-600 font-medium"
                 >
-                  Register here.
+                  {t("login.registerHere")}
                 </a>
               </div>
             </div>

package/src/creator/src/components/PurposeSelector.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import SelectableCard from "./SelectableCard"
 import useStore from "../utils/store"
+import { useTranslation } from "react-i18next"
 
 export const possiblePurposes = [
   "learnpack-lesson-writer",
@@ -15,31 +16,6 @@ type PurposeSlug =
   | "skill-building-facilitator"
   | "certification-preparation-specialist"
 
-const PURPOSES: { slug: PurposeSlug; label: string; description: string }[] = [
-  {
-    slug: "learnpack-lesson-writer",
-    label: "Understand a new topic",
-    description:
-      "Learn about a new concept (e.g., ISO 27001 or exponential decay).",
-  },
-  {
-    slug: "homework-and-exam-preparation-aid",
-    label: "Practice for an exam or homework",
-    description: "Solve math problems or certification questions.",
-  },
-  {
-    slug: "skill-building-facilitator",
-    label: "Build real-world skills",
-    description:
-      "Apply concepts to projects, data science, or security audits.",
-  },
-  {
-    slug: "certification-preparation-specialist",
-    label: "Prepare for a certification",
-    description: "Get ready for exams like ISO 27001 Lead Auditor.",
-  },
-]
-
 interface PurposeSelectorProps {
   onFinish: (purpose: PurposeSlug) => void
   // Optionally allow passing an initial purpose, for testability or server-side rendering
@@ -50,6 +26,37 @@ export const PurposeSelector: React.FC<PurposeSelectorProps> = ({
   onFinish,
 }) => {
   const formState = useStore((state) => state.formState)
+  const { t } = useTranslation()
+
+  const PURPOSES: { slug: PurposeSlug; label: string; description: string }[] =
+    [
+      {
+        slug: "learnpack-lesson-writer",
+        label: t("purposeSelector.learnpack-lesson-writer.label"),
+        description: t("purposeSelector.learnpack-lesson-writer.description"),
+      },
+      {
+        slug: "homework-and-exam-preparation-aid",
+        label: t("purposeSelector.homework-and-exam-preparation-aid.label"),
+        description: t(
+          "purposeSelector.homework-and-exam-preparation-aid.description"
+        ),
+      },
+      {
+        slug: "skill-building-facilitator",
+        label: t("purposeSelector.skill-building-facilitator.label"),
+        description: t(
+          "purposeSelector.skill-building-facilitator.description"
+        ),
+      },
+      {
+        slug: "certification-preparation-specialist",
+        label: t("purposeSelector.certification-preparation-specialist.label"),
+        description: t(
+          "purposeSelector.certification-preparation-specialist.description"
+        ),
+      },
+    ]
 
   return (
     <div className="w-full">

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

@@ -1,6 +1,7 @@
 import React from "react"
 import { SVGS } from "../assets/svgs"
 import { toast } from "react-hot-toast"
+import { useTranslation } from "react-i18next"
 
 export type Step = {
   title: string
@@ -27,6 +28,7 @@ const StepWizard: React.FC<Props> = ({
   onFinish,
   hideLastButton = false,
 }) => {
+  const { t } = useTranslation()
   const currentStep = formState.currentStep
   const index = steps.findIndex((step) => step.slug === currentStep)
   const totalSteps = steps.length
@@ -34,7 +36,7 @@ const StepWizard: React.FC<Props> = ({
   const goNext = () => {
     const index = steps.findIndex((step) => step.slug === currentStep)
     if (steps[index].required && !steps[index].isCompleted) {
-      toast.error("Please fill out all required fields!")
+      toast.error(t("stepWizard.requiredFields"))
       return
     }
     if (index < totalSteps - 1)
@@ -55,7 +57,7 @@ const StepWizard: React.FC<Props> = ({
       <div className=" rounded-xl  p-8 w-full max-w-xl">
         <h5 className="text-sm text-blue-400 uppercase mb-2">
           {steps.find((step) => step.slug === currentStep)?.subtitle ||
-            "Setting up your tutorial"}
+            t("stepWizard.subtitle")}
         </h5>
         <h2 className="text-lg font-medium mb-6">
           <span className="text-blue-600 mr-1">{index + 1}.</span>
@@ -97,7 +99,7 @@ const StepWizard: React.FC<Props> = ({
               index === 0 ? "cursor-not-allowed" : "cursor-pointer"
             }`}
           >
-            ⬅ Back
+            ⬅ {t("stepWizard.back")}
           </button>
           {!(hideLastButton && index === totalSteps - 1) && (
             <button
@@ -106,7 +108,9 @@ const StepWizard: React.FC<Props> = ({
                 index === totalSteps - 1 ? "bg-blue-600 text-white" : ""
               }`}
             >
-              {index === totalSteps - 1 ? "Finish 🚀" : "Next ➡"}
+              {index === totalSteps - 1
+                ? t("stepWizard.finish")
+                : t("stepWizard.next")}
             </button>
           )}
         </div>

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

@@ -3,15 +3,17 @@ import { SVGS } from "../assets/svgs"
 import { ContentCard } from "./ContentCard"
 import LinkUploader from "./LinkUploader"
 import FileUploader from "./FileUploader"
+import { useTranslation } from "react-i18next"
 
 const TextUploader = ({ onFinish }: { onFinish: (text: string) => void }) => {
   const [text, setText] = useState("")
+  const { t } = useTranslation()
 
   return (
     <div className="flex flex-col gap-2 w-full">
       <textarea
         className="mt-4 p-2 border rounded w-full bg-white border-heavy-blue"
-        placeholder="Add your text here..."
+        placeholder={t("uploader.text.placeholder")}
         value={text}
         onChange={(e) => setText(e.target.value)}
       />
@@ -19,7 +21,7 @@ const TextUploader = ({ onFinish }: { onFinish: (text: string) => void }) => {
         className="mt-4 p-2 border rounded w-full bg-learnpack text-white"
         onClick={() => onFinish(text)}
       >
-        Finish
+        {t("uploader.text.finish")}
       </button>
     </div>
   )
@@ -31,6 +33,7 @@ export const Uploader = ({
   onFinish: (text: string) => void
 }) => {
   const [selectedOption, setSelectedOption] = useState<string | null>(null)
+  const { t } = useTranslation()
 
   const handleSelectOption = (option: string) => {
     setSelectedOption(option)
@@ -41,18 +44,18 @@ export const Uploader = ({
       {!selectedOption && (
         <>
           <ContentCard
-            description="Write or paste a content table"
+            description={t("uploader.text.description")}
             icon={SVGS.contentTable}
             onClick={() => handleSelectOption("text")}
           />
           <ContentCard
-            description="Upload files"
+            description={t("uploader.files.description")}
             icon={SVGS.pdf}
             onClick={() => handleSelectOption("files")}
           />
 
           <ContentCard
-            description="Share a Youtube link"
+            description={t("uploader.youtube.description")}
             icon={SVGS.youtube}
             onClick={() => handleSelectOption("youtube")}
           />