@learnpack/learnpack 5.0.196 → 5.0.202

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")}
           />

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

@@ -1,24 +1,27 @@
 import { useEffect, useRef, useState } from "react"
 import useStore from "../../utils/store"
-import { TMessage } from "../Message"
 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,
+  // messages,
   sendPrompt,
   handleSubmit,
 }: {
-  messages: TMessage[]
+  // messages: TMessage[]
   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)
   const setUploadedFiles = useStore((state) => state.setUploadedFiles)
+  const messages = useStore((state) => state.messages)
   const [showBubble, setShowBubble] = useState(true)
 
   const [isOpen, setIsOpen] = useState(false)
@@ -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)}
@@ -110,7 +111,6 @@ export const Sidebar = ({
             style={{ resize: "none" }}
             className="w-full h-full p-2 outline-blue rounded"
             placeholder="How can Learnpack help you?"
-            autoFocus
             onKeyUp={(e) => {
               if (e.key === "Enter" && !e.shiftKey) {
                 e.preventDefault()

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

@@ -11,6 +11,9 @@ import {
   createCourse,
   isSlugAvailable,
   reWriteTitle,
+  useConsumableCall,
+  isValidRigoToken,
+  fixTitleLength,
 } from "../../utils/lib"
 
 import Loader from "../Loader"
@@ -25,41 +28,26 @@ 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,
-    // uploadedFiles,
-    cleanHistory,
-    formState,
-  } = useStore(
-    useShallow((state) => ({
-      history: state.history,
-      auth: state.auth,
-      setAuth: state.setAuth,
-      push: state.push,
-      // uploadedFiles: state.uploadedFiles,
-      cleanHistory: state.cleanHistory,
-      formState: state.formState,
-    }))
-  )
+  const { history, auth, setAuth, push, cleanAll, messages, setMessages } =
+    useStore(
+      useShallow((state) => ({
+        history: state.history,
+        auth: state.auth,
+        setAuth: state.setAuth,
+        push: state.push,
+        cleanAll: state.cleanAll,
+        messages: state.messages,
+        // formState: state.formState,
+        setMessages: state.setMessages,
+      }))
+    )
 
-  const [messages, setMessages] = useState<TMessage[]>([
-    {
-      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 ",
-    },
-  ])
   const [isGenerating, setIsGenerating] = useState(false)
   const [showLoginModal, setShowLoginModal] = useState(false)
   const [isThinking, setIsThinking] = useState(false)
@@ -72,26 +60,6 @@ const SyllabusEditor: React.FC = () => {
     }
   }, [syllabus, navigate])
 
-  useEffect(() => {
-    console.log(formState.description, "DESCRIPTION")
-
-    if (formState.description) {
-      setMessages((prevMessages) => {
-        if (prevMessages.length === 0 || prevMessages[0].type !== "user") {
-          // Si no hay mensajes o el primero no es de usuario, lo agrego al inicio
-          return [
-            { type: "user", content: formState.description },
-            ...prevMessages,
-          ]
-        } else {
-          // Si el primero ya es de usuario, lo reemplazo y mantengo el resto
-          const [, ...rest] = prevMessages
-          return [{ type: "user", content: formState.description }, ...rest]
-        }
-      })
-    }
-  }, [formState.description])
-
   useEffect(() => {
     ;(async () => {
       const { token } = checkParams(["token"])
@@ -139,6 +107,17 @@ const SyllabusEditor: React.FC = () => {
         { type: "assistant", content: "" },
       ])
 
+      const isValid = await isValidRigoToken(auth.rigoToken)
+      if (!isValid) {
+        setAuth({
+          ...auth,
+          rigoToken: "",
+          bcToken: "",
+          userId: "",
+          user: null,
+        })
+      }
+
       const res = await publicInteractiveCreation(
         {
           courseInfo: JSON.stringify(syllabus.courseInfo),
@@ -147,11 +126,13 @@ const SyllabusEditor: React.FC = () => {
               .map((message) => `${message.type}: ${message.content}`)
               .join("\n") + `\nUSER: ${prompt}`,
         },
-        auth.rigoToken ? auth.rigoToken : auth.publicToken,
+        auth.rigoToken && isValid ? auth.rigoToken : auth.publicToken,
         syllabus?.courseInfo?.purpose || "learnpack-lesson-writer",
-        auth.rigoToken ? false : true
+        auth.rigoToken && isValid ? false : true
       )
 
+      console.log(res, "RES from rigobot")
+
       const lessons: Lesson[] = res.parsed.listOfSteps.map((step: any) =>
         parseLesson(step, syllabus.lessons)
       )
@@ -160,25 +141,39 @@ 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 || [],
         },
       })
-      setMessages((prev) => {
-        const newMessages = [...prev]
-        newMessages[newMessages.length - 1].content = res.parsed.aiMessage
-        return newMessages
-      })
+
+      if (res.parsed.languageCode) {
+        i18n.changeLanguage(res.parsed.languageCode)
+      }
+
+      const newMessages: TMessage[] = [
+        ...messages,
+        {
+          type: "user",
+          content: prompt,
+        },
+        {
+          type: "assistant",
+          content: res.parsed.aiMessage,
+        },
+      ]
+      setMessages(newMessages)
       setIsThinking(false)
     } catch (error) {
       console.error(error)
       // Remove the last message
-      setMessages((prev) => {
-        const newMessages = [...prev]
-        newMessages.pop()
-        return newMessages
-      })
+      const newMessages = [...messages]
+      newMessages.pop()
+      setMessages(newMessages as TMessage[])
       setIsThinking(false)
     }
   }
@@ -207,31 +202,39 @@ const SyllabusEditor: React.FC = () => {
       setShowLoginModal(true)
       return
     }
-    // const success = await useConsumableCall(
-    //   auth.bcToken,
-    //   "ai-course-generation"
-    // )
-    // if (!success) {
-    //   toast.error("You don't have enough credits to generate a course!")
-    //   return
-    // }
-    // syllabus.sources = uploadedFiles
-    console.log(syllabus)
+    const success = await useConsumableCall(
+      auth.bcToken,
+      "ai-course-generation"
+    )
+    if (!success) {
+      toast.error(
+        "You don't have enough credits to generate a course! Please add more credits to your account."
+      )
+      toast.error("You will be redirected to the settings page in 5 seconds.")
+      setTimeout(() => {
+        window.location.href =
+          "https://learnpack.co/settings?token=" + auth.bcToken
+      }, 5000)
+      return
+    }
+    console.log(syllabus, "SYLLABUS")
 
     setIsGenerating(true)
     createCourse(syllabus, tokenToUse, auth.bcToken)
 
     setTimeout(() => {
-      cleanHistory()
+      cleanAll()
       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
@@ -256,7 +259,7 @@ It may take a moment..."
       <ConsumablesManager />
 
       <Sidebar
-        messages={messages}
+        // messages={messages}
         sendPrompt={sendPrompt}
         handleSubmit={handleSubmit}
       />

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."
+    }
+}