@learnpack/learnpack 5.0.196 → 5.0.202

package/src/creator/src/App.tsx

@@ -7,7 +7,13 @@ import { useShallow } from "zustand/react/shallow"
 import useStore from "./utils/store"
 
 import { publicInteractiveCreation, isHuman } from "./utils/rigo"
-import { checkParams, loginWithToken, parseLesson } from "./utils/lib"
+import {
+  checkParams,
+  isValidRigoToken,
+  loginWithToken,
+  parseLesson,
+  fixTitleLength,
+} from "./utils/lib"
 
 import { Uploader } from "./components/Uploader"
 import toast from "react-hot-toast"
@@ -17,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,
@@ -32,6 +40,8 @@ function App() {
     uploadedFiles,
     auth,
     resetFormState,
+    cleanAll,
+    setMessages,
   } = useStore(
     useShallow((state) => ({
       formState: state.formState,
@@ -44,6 +54,8 @@ function App() {
       uploadedFiles: state.uploadedFiles,
       auth: state.auth,
       resetFormState: state.resetFormState,
+      cleanAll: state.cleanAll,
+      setMessages: state.setMessages,
     }))
   )
 
@@ -73,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)
@@ -105,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,
@@ -115,42 +134,69 @@ function App() {
 
   const handleCreateTutorial = async () => {
     try {
-      cleanHistory()
+      const isValid = await isValidRigoToken(auth.rigoToken)
+      if (!isValid) {
+        setAuth({
+          ...auth,
+          rigoToken: "",
+          bcToken: "",
+          userId: "",
+          user: null,
+        })
+      }
 
       const res = await publicInteractiveCreation(
         {
-          courseInfo: `${JSON.stringify(formState)}         `,
-          prevInteractions: "",
+          courseInfo: `${JSON.stringify(formState)}`,
+          prevInteractions: "USER: " + formState.description,
         },
-        auth.rigoToken ? auth.rigoToken : auth.publicToken,
+        auth.rigoToken && isValid ? auth.rigoToken : auth.publicToken,
         formState.purpose || "learnpack-lesson-writer",
-        auth.rigoToken ? false : true
+        auth.rigoToken && isValid ? false : true
       )
       const lessons = res.parsed.listOfSteps.map((lesson: any) => {
         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: [
-          {
-            type: "assistant",
-            content: res.parsed.aiMessage,
-          },
-        ],
-        // sources: uploadedFiles,
       })
+
+      if (res.parsed.languageCode) {
+        i18n.changeLanguage(res.parsed.languageCode)
+      }
+
       navigate("/creator/syllabus")
       setFormState({
         isCompleted: false,
         currentStep: "description",
       })
+      setMessages([
+        {
+          type: "user",
+          content: formState.description,
+        },
+        {
+          type: "assistant",
+          content: res.parsed.aiMessage,
+        },
+        {
+          type: "assistant",
+          content: "If you're satisfied, type 'OK' in the chat.",
+        },
+        {
+          type: "assistant",
+          content:
+            "If not, what would you like me to change? You can sat things like:\n  - Add more exercises\n   - Make it more difficult\n   - Remove step 1.1 and replace it with a new step that explains the concept of X ",
+        },
+      ])
     } catch (error) {
       console.error(error, "ERROR CREATING TUTORIAL")
       toast.error("Something went wrong. Please try again.")
@@ -164,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) => {
@@ -184,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({
@@ -202,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({
@@ -213,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({
@@ -227,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,
@@ -243,9 +289,10 @@ function App() {
         ),
       },
       {
-        title: "Please verify you are a human",
+        title: t("stepWizard.verifyHuman"),
         slug: "verifyHuman",
         isCompleted: false,
+        required: true,
         content: (
           <TurnstileChallenge
             siteKey={
@@ -254,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({
@@ -275,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,
@@ -297,7 +344,7 @@ function App() {
                 // selected={formState.hasContentIndex === false}
               />
               <SelectableCard
-                title="✅ Yes"
+                title={t("stepWizard.hasContentIndexCard.yes")}
                 onClick={() => {
                   setFormState({
                     hasContentIndex: true,
@@ -312,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,
@@ -344,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={() => {
@@ -356,6 +414,7 @@ function App() {
               }}
               onStartOver={() => {
                 resetFormState()
+                cleanAll()
                 cleanHistory()
               }}
             />

package/src/creator/src/components/FileCard.tsx

@@ -1,11 +1,11 @@
 import { SVGS } from "../assets/svgs"
-import { UploadedFile } from "../utils/store"
+import { ParsedFile } from "./FileUploader"
 
 export const FileCard = ({
   file,
   handleRemove,
 }: {
-  file: UploadedFile
+  file: ParsedFile
   handleRemove: () => void
 }) => (
   <div className="flex items-center justify-between bg-white shadow-sm p-2 rounded-lg w-[100px]">

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">