@learnpack/learnpack 5.0.198 → 5.0.202

package/src/creator/src/components/syllabus/ContentIndex.tsx

@@ -8,6 +8,7 @@ import { motion, AnimatePresence } from "framer-motion"
 // import { randomUUID } from "../../utils/creatorUtils"
 import toast from "react-hot-toast"
 import { randomUUID } from "../../utils/creatorUtils"
+import { useTranslation } from "react-i18next"
 
 const ContentIndexHeader = ({
   messages,
@@ -16,13 +17,16 @@ const ContentIndexHeader = ({
   messages: TMessage[]
   syllabus: Syllabus
 }) => {
+  const { t } = useTranslation()
   const isFirst =
     messages.filter((m) => m.type === "assistant" && m.content.length > 0)
       .length === 2
 
   const headerText = isFirst
-    ? `I've created a detailed structure for your course: ${syllabus.courseInfo.title}`
-    : "I've updated the structure based on your feedback."
+    ? t("contentIndexHeader.firstMessage", {
+        title: syllabus.courseInfo.title,
+      })
+    : t("contentIndexHeader.secondMessage")
 
   return (
     <div className="mt-2 ">
@@ -47,15 +51,14 @@ const ContentSecondaryHeader = ({
 {
   messages: TMessage[]
 }) => {
+  const { t } = useTranslation()
   const isFirst =
     messages.filter((m) => m.type === "assistant" && m.content.length > 0)
       .length === 2
 
   const subText = isFirst
-    ? `It includes a mix of reading, coding exercises, and quizzes. Give
-       it a look and let me know if it aligns with your expectations or if
-       there are any changes you'd like to make.`
-    : "Based on your input, here is the new syllabus, updates are highlighted in yellow"
+    ? t("contentIndex.subText.first")
+    : t("contentIndex.subText.second")
 
   return (
     <AnimatePresence mode="wait">
@@ -80,6 +83,7 @@ export const GenerateButton = ({
   handleSubmit: () => void
   openLogin: () => void
 }) => {
+  const { t } = useTranslation()
   const history = useStore((state) => state.history)
   const undo = useStore((state) => state.undo)
   const auth = useStore((state) => state.auth)
@@ -92,12 +96,12 @@ export const GenerateButton = ({
           <button
             onClick={() => {
               undo()
-              toast.success("Changes reverted!")
+              toast.success(t("contentIndex.changesReverted"))
             }}
             className="w-full sm:w-auto text-gray-500 bg-gray-200 rounded px-4 py-2 hover:bg-gray-300 flex items-center justify-center gap-2 cursor-pointer"
           >
             {SVGS.undo}
-            Revert changes
+            {t("contentIndex.revertChanges")}
           </button>
         )}
 
@@ -105,7 +109,7 @@ export const GenerateButton = ({
           onClick={handleSubmit}
           className="w-full sm:w-auto bg-blue-600 text-white rounded px-4 py-2 hover:bg-blue-700 flex items-center justify-center gap-2 cursor-pointer"
         >
-          <span>I'm ready. Create the course for me!</span>
+          <span>{t("contentIndex.readyToCreate")}</span>
           {SVGS.rigoSoftBlue}
         </button>
       </div>
@@ -116,7 +120,9 @@ export const GenerateButton = ({
             className="text-sm text-gray-500 rounded px-4 py-2 flex items-center justify-center gap-1 "
           >
             <span>
-              Creating the course as <strong>{auth.user.first_name}</strong> or
+              {t("contentIndex.creatingCourseAs", {
+                name: auth.user.first_name,
+              })}
             </span>
             <button
               className="text-sm rounded   items-center justify-center cursor-pointer text-blue-600"
@@ -131,7 +137,7 @@ export const GenerateButton = ({
                 openLogin()
               }}
             >
-              login as someone else
+              {t("contentIndex.loginAsSomeoneElse")}
             </button>
           </div>
         )}

package/src/creator/src/components/syllabus/Sidebar.tsx

@@ -4,6 +4,7 @@ import FileUploader from "../FileUploader"
 import { SVGS } from "../../assets/svgs"
 import { Message } from "../Message"
 import { FileCard } from "../FileCard"
+import { useTranslation } from "react-i18next"
 
 export const Sidebar = ({
   // messages,
@@ -14,6 +15,8 @@ export const Sidebar = ({
   sendPrompt: (prompt: string) => void
   handleSubmit: () => void
 }) => {
+  const { t } = useTranslation()
+
   const sidebarRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLTextAreaElement>(null)
   const uploadedFiles = useStore((state) => state.uploadedFiles)
@@ -44,9 +47,7 @@ export const Sidebar = ({
             <div
               className={`flex flex-row gap-3 cloudy bg-white rounded-md p-2 shadow-md bg-learnpack-blue duration-500 border-2 border-blue-600 mb-4`}
             >
-              <span className="w-[280px]">
-                Chat with me to update the course content
-              </span>
+              <span className="w-[280px]">{t("sidebar.chatWithMe")}</span>
               <button
                 className=" text-red-500 cursor-pointer bg-learnpack-blue p-2 rounded-md"
                 onClick={() => setShowBubble(false)}

package/src/creator/src/components/syllabus/SyllabusEditor.tsx

@@ -13,6 +13,7 @@ import {
   reWriteTitle,
   useConsumableCall,
   isValidRigoToken,
+  fixTitleLength,
 } from "../../utils/lib"
 
 import Loader from "../Loader"
@@ -27,9 +28,11 @@ import { useNavigate } from "react-router"
 import { ParamsChecker } from "../ParamsChecker"
 import { slugify } from "../../utils/creatorUtils"
 import { RIGO_FLOAT_GIF } from "../../utils/constants"
+import { useTranslation } from "react-i18next"
 
 const SyllabusEditor: React.FC = () => {
   const navigate = useNavigate()
+  const { t, i18n } = useTranslation()
 
   const { history, auth, setAuth, push, cleanAll, messages, setMessages } =
     useStore(
@@ -128,6 +131,8 @@ const SyllabusEditor: React.FC = () => {
         auth.rigoToken && isValid ? false : true
       )
 
+      console.log(res, "RES from rigobot")
+
       const lessons: Lesson[] = res.parsed.listOfSteps.map((step: any) =>
         parseLesson(step, syllabus.lessons)
       )
@@ -136,11 +141,20 @@ const SyllabusEditor: React.FC = () => {
         lessons: lessons,
         courseInfo: {
           ...syllabus.courseInfo,
-          title: res.parsed.title || syllabus.courseInfo.title,
+          title: fixTitleLength(res.parsed.title) || syllabus.courseInfo.title,
           description:
             res.parsed.description || syllabus.courseInfo.description,
+          language:
+            res.parsed.languageCode || syllabus.courseInfo.language || "en",
+          technologies:
+            res.parsed.technologies || syllabus.courseInfo.technologies || [],
         },
       })
+
+      if (res.parsed.languageCode) {
+        i18n.changeLanguage(res.parsed.languageCode)
+      }
+
       const newMessages: TMessage[] = [
         ...messages,
         {
@@ -213,12 +227,14 @@ const SyllabusEditor: React.FC = () => {
       setIsGenerating(false)
       window.location.href = `/preview/${slugify(
         syllabus.courseInfo.title || ""
-      )}?token=${auth.bcToken}`
+      )}?token=${auth.bcToken}&language=${syllabus.courseInfo.language}`
     }, 3000)
   }
 
   if (!syllabus) return null
 
+  console.log(syllabus, "SYLLABUS")
+
   return isGenerating ? (
     <>
       <Loader

package/src/creator/src/i18n.ts

@@ -0,0 +1,28 @@
+// src/i18n.ts
+import i18n from "i18next"
+import { initReactI18next } from "react-i18next"
+import LanguageDetector from "i18next-browser-languagedetector"
+
+import enTranslation from "./locales/en.json"
+import esTranslation from "./locales/es.json"
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: { translation: enTranslation },
+      es: { translation: esTranslation },
+    },
+    fallbackLng: "en",
+    interpolation: {
+      escapeValue: false,
+    },
+    detection: {
+      // Puedes personalizar el orden de detección si lo deseas
+      order: ["querystring", "localStorage", "navigator"],
+      caches: ["localStorage"],
+    },
+  })
+
+export default i18n

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

@@ -0,0 +1,110 @@
+{
+    "contentIndexHeader": {
+        "firstMessage": "I've created a detailed structure for your course: {{title}}",
+        "secondMessage": "I've updated the structure based on your feedback."
+    },
+    "stepWizard": {
+        "requiredFields": "Please fill out all required fields!",
+        "subtitle": "Setting up your tutorial",
+        "back": "Back",
+        "next": "Next",
+        "finish": "Finish 🚀",
+        "description": "What do you want to learn?",
+        "descriptionPlaceholder": "Describe your course",
+        "duration": "What is the estimated duration for this tutorial?",
+        "durationCard": {
+            "30": "Around 30 minutes",
+            "60": "Around 1 hour",
+            "120": "Around 2 hours"
+        },
+        "purpose": "How would you like to use learnpack?",
+        "verifyHuman": "Please verify you are a human",
+        "humanSuccess": "You are a human! 👌🏻",
+        "hasContentIndex": "Any materials to get this course started?",
+        "hasContentIndexCard": {
+            "no": "❌ No, help me create one",
+            "yes": "✅ Yes"
+        },
+        "contentIndex": "Any materials to get this course started?",
+        "contentIndexHelpText": "It could be just text, paste an URL or even upload a document."
+    },
+    "purposeSelector": {
+        "learnpack-lesson-writer": {
+            "label": "Understand a new topic",
+            "description": "Learn about a new concept (e.g., ISO 27001 or exponential decay)."
+        },
+        "homework-and-exam-preparation-aid": {
+            "label": "Practice for an exam or homework",
+            "description": "Solve math problems or certification questions."
+        },
+        "skill-building-facilitator": {
+            "label": "Build real-world skills",
+            "description": "Apply concepts to projects, data science, or security audits."
+        },
+        "certification-preparation-specialist": {
+            "label": "Prepare for a certification",
+            "description": "Get ready for exams like ISO 27001 Lead Auditor."
+        }
+    },
+    "uploader": {
+        "text": {
+            "description": "Write or paste a content table",
+            "placeholder": "Add your text here...",
+            "finish": "Finish"
+        },
+        "files": {
+            "description": "Upload files",
+            "descriptionLong": "Upload a PDF or DOCX file or drag it here",
+            "processing": "Processing...",
+            "drop": "Drop it here",
+            "finish": "🚀 Finish"
+        },
+        "youtube": {
+            "description": "Share a Youtube link",
+            "placeholder": "Paste your link here…"
+        }
+    },
+    "loader": {
+        "text": "Learnpack is setting up your tutorial. It may take a moment..."
+    },
+    "sidebar": {
+        "chatWithMe": "Chat with me to update the course content"
+    },
+    "contentIndex": {
+        "subText": {
+            "first": "It includes a mix of reading, coding exercises, and quizzes. Give it a look and let me know if it aligns with your expectations or if there are any changes you'd like to make.",
+            "second": "Based on your input, here is the new syllabus, updates are highlighted in yellow"
+        },
+        "revertChanges": "Revert changes",
+        "changesReverted": "Changes reverted!",
+        "readyToCreate": "I'm ready. Create the course for me!",
+        "creatingCourseAs": "Creating the course as {{name}}",
+        "loginAsSomeoneElse": "Login as someone else"
+    },
+    "login": {
+        "creatingAccount": "Creating account…",
+        "loggedInSuccessfully": "Logged in successfully",
+        "invalidCredentials": "Invalid credentials",
+        "pleaseFillAllFields": "Please fill all fields",
+        "loggingIn": "Logging in…",
+        "accountCreated": "Account created! Check your email.",
+        "registrationFailed": "Registration failed. Try again.",
+        "createYourAccount": "Create your account",
+        "firstName": "First name",
+        "lastName": "Last name",
+        "alreadyHaveAnAccount": "Already have an account?",
+        "logInHere": "Log in here",
+        "youNeedToHaveAnAccount": "You need to have a 4Geeks account with a creator plan to create a tutorial.",
+        "loginWithGithub": "LOGIN WITH GITHUB",
+        "loginWithGoogle": "LOGIN WITH GOOGLE",
+        "or": "or",
+        "password": "Password",
+        "logIn": "Log in",
+        "skip": "Skip",
+        "forgotPassword": "Forgot your password?",
+        "recoverItHere": "Recover it here",
+        "loginWithEmail": "Login with Email",
+        "youDontHaveAnAccount": "You don't have an account?",
+        "registerHere": "Register here."
+    }
+}

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

@@ -0,0 +1,110 @@
+{
+    "contentIndexHeader": {
+        "firstMessage": "He creado una estructura detallada para tu curso: {{title}}",
+        "secondMessage": "He actualizado la estructura según tu feedback."
+    },
+    "stepWizard": {
+        "requiredFields": "Por favor, completa todos los campos requeridos.",
+        "subtitle": "Configurando tu tutorial",
+        "back": "Atrás",
+        "next": "Siguiente",
+        "finish": "Finalizar 🚀",
+        "description": "¿Qué quieres aprender?",
+        "descriptionPlaceholder": "Describe tu curso",
+        "duration": "¿Cuál es la duración estimada para este tutorial?",
+        "durationCard": {
+            "30": "Alrededor de 30 minutos",
+            "60": "Alrededor de 1 hora",
+            "120": "Alrededor de 2 horas"
+        },
+        "purpose": "¿Cómo te gustaría usar learnpack?",
+        "verifyHuman": "Por favor, verifica que eres un humano",
+        "humanSuccess": "¡Eres un humano! 👌🏻",
+        "hasContentIndex": "¿Hay algún material para empezar este curso?",
+        "hasContentIndexCard": {
+            "no": "❌ No, ayúdame a crear uno",
+            "yes": "✅ Sí"
+        },
+        "contentIndex": "¿Hay algún material para empezar este curso?",
+        "contentIndexHelpText": "Puede ser solo texto, pegar una URL o incluso subir un documento."
+    },
+    "purposeSelector": {
+        "learnpack-lesson-writer": {
+            "label": "Entender un nuevo tema",
+            "description": "Aprender sobre un nuevo concepto (ej. ISO 27001 o decaimiento exponencial)."
+        },
+        "homework-and-exam-preparation-aid": {
+            "label": "Practicar para un examen o tarea",
+            "description": "Resolver problemas matemáticos o preguntas de certificación."
+        },
+        "skill-building-facilitator": {
+            "label": "Construir habilidades reales",
+            "description": "Aplicar conceptos a proyectos, ciencia de datos o auditorías de seguridad."
+        },
+        "certification-preparation-specialist": {
+            "label": "Prepararse para una certificación",
+            "description": "Prepararse para exámenes como ISO 27001 Lead Auditor."
+        }
+    },
+    "uploader": {
+        "text": {
+            "description": "Escribir o pegar una tabla de contenido",
+            "placeholder": "Agrega tu texto aquí...",
+            "finish": "Finalizar"
+        },
+        "files": {
+            "description": "Subir archivos",
+            "descriptionLong": "Subir un archivo PDF o DOCX o arrastralo aquí",
+            "processing": "Procesando...",
+            "drop": "Arrastra el archivo aquí",
+            "finish": "🚀 Finalizar"
+        },
+        "youtube": {
+            "description": "Compartir un enlace de Youtube",
+            "placeholder": "Pega tu enlace aquí…"
+        }
+    },
+    "loader": {
+        "text": "Learnpack está configurando tu tutorial. Puede que tarde un momento..."
+    },
+    "sidebar": {
+        "chatWithMe": "Chatea conmigo para actualizar el contenido del curso"
+    },
+    "contentIndex": {
+        "subText": {
+            "first": "Incluye una mezcla de lectura, ejercicios de codificación y cuestionarios. Dále un vistazo y dímelo si coincide con tus expectativas o si hay algún cambio que te gustaría hacer.",
+            "second": "Basado en tu entrada, aquí está el nuevo plan de estudios, los cambios se resaltan en amarillo"
+        },
+        "revertChanges": "Revertir cambios",
+        "changesReverted": "Cambios revertidos!",
+        "readyToCreate": "Estoy listo. ¡Crea el curso por mí!",
+        "creatingCourseAs": "Creando el curso como {{name}}",
+        "loginAsSomeoneElse": "Iniciar sesión como alguien más"
+    },
+    "login": {
+        "creatingAccount": "Creando cuenta…",
+        "loggedInSuccessfully": "Inicio de sesión exitoso",
+        "invalidCredentials": "Credenciales inválidas",
+        "pleaseFillAllFields": "Por favor, completa todos los campos",
+        "loggingIn": "Iniciando sesión…",
+        "accountCreated": "Cuenta creada! Revisa tu correo.",
+        "registrationFailed": "Registro fallido. Intenta de nuevo.",
+        "createYourAccount": "Crear tu cuenta",
+        "firstName": "Nombre",
+        "lastName": "Apellido",
+        "alreadyHaveAnAccount": "¿Ya tienes una cuenta?",
+        "logInHere": "Iniciar sesión aquí",
+        "youNeedToHaveAnAccount": "Necesitas tener una cuenta en 4Geeks con un plan de creador para crear un tutorial.",
+        "loginWithGithub": "INICIAR SESIÓN CON GITHUB",
+        "loginWithGoogle": "INICIAR SESIÓN CON GOOGLE",
+        "or": "o",
+        "password": "Contraseña",
+        "logIn": "Iniciar sesión",
+        "skip": "Saltar",
+        "forgotPassword": "¿Olvidaste tu contraseña?",
+        "recoverItHere": "Recuperarla aquí",
+        "loginWithEmail": "Iniciar sesión con Email",
+        "youDontHaveAnAccount": "¿No tienes una cuenta?",
+        "registerHere": "Regístrate aquí."
+    }
+}

package/src/creator/src/main.tsx

@@ -5,6 +5,7 @@ import "./index.css"
 import App from "./App.tsx"
 import SyllabusEditor from "./components/syllabus/SyllabusEditor.tsx"
 import { Toaster } from "react-hot-toast"
+import "./i18n"
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <Toaster />

package/src/creator/src/utils/creatorUtils.ts

@@ -9,9 +9,9 @@ export const slugify = (text: string) => {
     .toLowerCase()
     .trim()
     .replace(/\s+/g, "-")
-    .replace(/[^\w.-]+/g, "")
+    .replace(/[<>:"/\\|?*]/g, "")
+    .replace(/-+/g, "-")
 }
-
 export const randomUUID = () => {
   return Math.random().toString(36).substring(2, 15)
 }

package/src/creator/src/utils/lib.ts

@@ -426,3 +426,10 @@ export const isValidRigoToken = async (rigobotToken: string) => {
 
   return true
 }
+
+export const fixTitleLength = (title: string) => {
+  const MAX_LENGTH = 49
+  let fixed = title.slice(0, MAX_LENGTH)
+  fixed = fixed.replace(/^[^a-zA-Z0-9]+|[^a-zA-Z0-9]+$/g, "")
+  return fixed
+}

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

@@ -8,11 +8,10 @@ import { TMessage } from "../components/Message"
 export type FormState = {
   description: string
   duration: number
-  targetAudience: string
   hasContentIndex: boolean
   contentIndex: string
   purpose: string
-  // sources: ParsedLink[]
+  language?: string
   isCompleted: boolean
   variables: string[]
   currentStep: string
@@ -77,10 +76,11 @@ const useStore = create<Store>()(
       formState: {
         description: "",
         duration: 0,
-        targetAudience: "",
         hasContentIndex: false,
         contentIndex: "",
         purpose: "",
+        language: "en",
+        technologies: [],
         // sources: [],
         isCompleted: false,
         currentStep: "description",
@@ -102,7 +102,8 @@ const useStore = create<Store>()(
             currentStep: "description",
             description: "",
             duration: 0,
-            targetAudience: "",
+            language: "en",
+            technologies: [],
             hasContentIndex: false,
             contentIndex: "",
             purpose: "",
@@ -147,7 +148,9 @@ const useStore = create<Store>()(
           formState: {
             description: "",
             duration: 0,
-            targetAudience: "",
+
+            language: "en",
+            technologies: [],
             hasContentIndex: false,
             contentIndex: "",
             purpose: "",