@learnpack/learnpack 5.0.178 → 5.0.180

package/src/creator/src/App.tsx

@@ -12,10 +12,11 @@ import { checkParams, loginWithToken, parseLesson } from "./utils/lib"
 import { Uploader } from "./components/Uploader"
 import toast from "react-hot-toast"
 import { ParamsChecker } from "./components/ParamsChecker"
-import { RIGO_FLOAT_GIT } from "./utils/constants"
+import { RIGO_FLOAT_GIF } from "./utils/constants"
 import TurnstileChallenge from "./components/TurnstileChallenge"
 // import TurnstileChallenge from "./components/TurnstileChallenge"
 import ResumeCourseModal from "./components/ResumeCourseModal"
+import { possiblePurposes, PurposeSelector } from "./components/PurposeSelector"
 
 function App() {
   const navigate = useNavigate()
@@ -72,10 +73,11 @@ function App() {
   }
 
   const checkDescription = () => {
-    const { description, duration, plan } = checkParams([
+    const { description, duration, plan, purpose } = checkParams([
       "description",
       "duration",
       "plan",
+      "purpose",
     ])
     if (description) {
       console.log("description", description)
@@ -102,6 +104,13 @@ function App() {
     } else {
       console.debug("No plan received in params")
     }
+
+    if (purpose && purpose.length > 0 && possiblePurposes.includes(purpose)) {
+      setFormState({
+        purpose: purpose,
+        currentStep: "hasContentIndex",
+      })
+    }
   }
 
   const handleCreateTutorial = async () => {
@@ -110,22 +119,17 @@ function App() {
 
       const res = await publicInteractiveCreation(
         {
-          courseInfo: `${JSON.stringify(formState)}         
-${
-  uploadedFiles.length > 0
-    ? `These files where uploaded by the user: \n\n${JSON.stringify(
-        uploadedFiles
-      )}`
-    : ""
-}`,
+          courseInfo: `${JSON.stringify(formState)}         `,
           prevInteractions: "",
         },
-        auth.publicToken
+        auth.publicToken,
+        formState.purpose
       )
       const lessons = res.parsed.listOfSteps.map((lesson: any) => {
         return parseLesson(lesson, [])
       })
 
+      console.log("RES FROM RIGO", res)
       push({
         lessons,
         courseInfo: {
@@ -133,7 +137,13 @@ ${
           title: res.parsed.title,
           description: res.parsed.description,
         },
-        sources: uploadedFiles,
+        messages: [
+          {
+            type: "assistant",
+            content: res.parsed.aiMessage,
+          },
+        ],
+        // sources: uploadedFiles,
       })
       navigate("/creator/syllabus")
       setFormState({
@@ -185,7 +195,7 @@ ${
               onClick={() => {
                 setFormState({
                   duration: 30,
-                  currentStep: "hasContentIndex",
+                  currentStep: "purpose",
                 })
               }}
               selected={formState.duration === 30}
@@ -196,7 +206,7 @@ ${
               onClick={() => {
                 setFormState({
                   duration: 60,
-                  currentStep: "hasContentIndex",
+                  currentStep: "purpose",
                 })
               }}
               selected={formState.duration === 60}
@@ -207,7 +217,7 @@ ${
               onClick={() => {
                 setFormState({
                   duration: 120,
-                  currentStep: "hasContentIndex",
+                  currentStep: "purpose",
                 })
               }}
               selected={formState.duration === 120}
@@ -215,6 +225,53 @@ ${
           </div>
         ),
       },
+      {
+        title: "How would you like to use learnpack?",
+        slug: "purpose",
+        isCompleted: formState?.purpose?.length > 0,
+        required: true,
+        content: (
+          <PurposeSelector
+            onFinish={(purpose) => {
+              setFormState({
+                purpose: purpose,
+                currentStep: "verifyHuman",
+              })
+            }}
+          />
+        ),
+      },
+      {
+        title: "Please verify you are a human",
+        slug: "verifyHuman",
+        isCompleted: false,
+        content: (
+          <TurnstileChallenge
+            // siteKey={"0x4AAAAAABeKMBYYinMU4Ib0"}
+            siteKey={"0x4AAAAAABeZ9tjEevGBsJFU"} // This is the learnpack one
+            onSuccess={async (token) => {
+              const { human, message, token: jwtToken } = await isHuman(token)
+              if (human) {
+                toast.success("You are a human! 👌🏻")
+
+                console.log("JWT TOKEN received", jwtToken)
+                setAuth({
+                  ...auth,
+                  publicToken: jwtToken,
+                })
+                setFormState({
+                  currentStep: "hasContentIndex",
+                })
+              } else {
+                toast.error(message)
+                setFormState({
+                  currentStep: "purpose",
+                })
+              }
+            }}
+          />
+        ),
+      },
       {
         title: "Any materials to get this course started?",
         slug: "hasContentIndex",
@@ -227,16 +284,15 @@ ${
                 onClick={() => {
                   setFormState({
                     hasContentIndex: false,
-                    currentStep: "verifyHuman",
                     variables: [
                       ...formState.variables.filter(
                         (v) => v !== "contentIndex"
                       ),
                     ],
-                    // isCompleted: true,
+                    isCompleted: true,
                   })
                 }}
-                selected={false}
+                selected={formState.hasContentIndex === false}
               />
               <SelectableCard
                 title="✅ Yes"
@@ -247,7 +303,7 @@ ${
                     variables: [...formState.variables, "contentIndex"],
                   })
                 }}
-                selected={false}
+                selected={formState.hasContentIndex === true}
               />
             </div>
           </>
@@ -266,41 +322,12 @@ ${
             onFinish={(text) => {
               setFormState({
                 contentIndex: text,
-                currentStep: "verifyHuman",
-                // isCompleted: true,
+                isCompleted: true,
               })
             }}
           />
         ),
       },
-      {
-        title: "Please verify you are a human",
-        slug: "verifyHuman",
-        isCompleted: false,
-        content: (
-          <TurnstileChallenge
-            // siteKey={"0x4AAAAAABeKMBYYinMU4Ib0"}
-            siteKey={"0x4AAAAAABeZ9tjEevGBsJFU"}
-            onSuccess={async (token) => {
-              const { human, message, token: jwtToken } = await isHuman(token)
-              if (human) {
-                toast.success("You are a human! 👌🏻")
-
-                setAuth({
-                  ...auth,
-                  publicToken: jwtToken,
-                })
-                setFormState({ isCompleted: true })
-              } else {
-                toast.error(message)
-                setFormState({
-                  currentStep: "hasContentIndex",
-                })
-              }
-            }}
-          />
-        ),
-      },
     ]
 
     return steps.filter(
@@ -316,7 +343,7 @@ ${
       {formState.isCompleted && history.length === 0 ? (
         <Loader
           text="Learnpack is setting up your tutorial. It may take a moment..."
-          icon={<img src={RIGO_FLOAT_GIT} alt="rigo" className="w-20 h-20" />}
+          icon={<img src={RIGO_FLOAT_GIF} alt="rigo" className="w-20 h-20" />}
         />
       ) : (
         <>

package/src/creator/src/components/ConsumablesManager.tsx

@@ -20,11 +20,9 @@ export const ConsumablesManager = () => {
       setConsumables(parseConsumables(consumables.voids))
     } catch (error) {
       setAuth({
+        ...auth,
         bcToken: "",
         rigoToken: "",
-        userId: "",
-        user: null,
-        publicToken: "",
       })
     }
   }

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

@@ -1,8 +1,11 @@
-import React, { useRef, useState } from "react"
+import React, { useEffect, useRef, useState } from "react"
 import { SVGS } from "../assets/svgs"
 import { ContentCard } from "./ContentCard"
 import useStore from "../utils/store"
 import toast from "react-hot-toast"
+import CreatorSocket from "../utils/socket"
+
+const socketClient = new CreatorSocket("")
 
 const allowedTypes = [
   "application/pdf",
@@ -14,14 +17,100 @@ const allowedTypes = [
 export interface ParsedFile {
   name: string
   text: string
+  status: "PROCESSING" | "SUCCESS" | "ERROR"
+  notificationId: string
 }
 
 interface FileUploaderProps {
   styledAs?: "button" | "card"
+  onFinish?: (files: ParsedFile[]) => void
+}
+
+const UploadedFileCard = ({ idx, file }: { idx: number; file: ParsedFile }) => {
+  const setUploadedFiles = useStore((state) => state.setUploadedFiles)
+  const uploadedFiles = useStore((state) => state.uploadedFiles)
+
+  const handleUpdate = (data: any) => {
+    if (data.text) {
+      setUploadedFiles(
+        uploadedFiles.map((f, i) =>
+          i === idx ? { ...f, status: "SUCCESS", text: data.text } : f
+        )
+      )
+    } else {
+      setUploadedFiles(
+        uploadedFiles.map((f, i) => (i === idx ? { ...f, status: "ERROR" } : f))
+      )
+    }
+  }
+
+  useEffect(() => {
+    if (file.status === "SUCCESS") return
+
+    console.log("CONNECTING TO SOCKET", file.notificationId)
+    socketClient.connect()
+    socketClient.on(file.notificationId, handleUpdate)
+
+    socketClient.emit("registerNotification", {
+      notificationId: file.notificationId,
+    })
+
+    return () => {
+      socketClient.off(file.notificationId, handleUpdate)
+      socketClient.disconnect()
+    }
+  }, [])
+
+  return (
+    <div
+      className={
+        "p-3 rounded-md shadow-sm text-sm text-gray-800 text-left flex items-center gap-2" +
+        (file.status === "PROCESSING"
+          ? " bg-gray-100"
+          : file.status === "ERROR"
+          ? " bg-red-100"
+          : " bg-white")
+      }
+      title={file.name}
+    >
+      {file.status === "PROCESSING" && (
+        <div className="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
+      )}
+      {file.status === "ERROR" && (
+        <span className="text-red-500 font-bold">Error!</span>
+      )}
+
+      <strong className="truncate">{file.name.slice(0, 20)}...</strong>
+
+      <button
+        className={
+          "ml-auto cursor-pointer transition-colors " +
+          (file.status === "PROCESSING"
+            ? "text-gray-400 cursor-not-allowed"
+            : "text-gray-600 hover:text-red-500")
+        }
+        onClick={
+          () => setUploadedFiles(uploadedFiles.filter((_, i) => i !== idx))
+          // Set the file as error
+          // setUploadedFiles(
+          //   uploadedFiles.map((f, i) =>
+          //     i === idx ? { ...f, status: "ERROR" } : f
+          //   )
+          // )
+        }
+      >
+        {SVGS.trash}
+      </button>
+    </div>
+  )
 }
 
-const FileUploader: React.FC<FileUploaderProps> = ({ styledAs = "button" }) => {
-  const rigoToken = useStore((state) => state.auth.rigoToken)
+const FileUploader: React.FC<FileUploaderProps> = ({
+  styledAs = "button",
+  onFinish,
+}) => {
+  // const rigoToken = useStore((state) => state.auth.rigoToken)
+  const publicToken = useStore((state) => state.auth.publicToken)
   const inputRef = useRef<HTMLInputElement>(null)
   const uploadedFiles = useStore((state) => state.uploadedFiles)
   const setUploadedFiles = useStore((state) => state.setUploadedFiles)
@@ -33,7 +122,7 @@ const FileUploader: React.FC<FileUploaderProps> = ({ styledAs = "button" }) => {
 
     if (type === "text/plain" || type === "text/markdown") {
       const text = await file.text()
-      return { name, text }
+      return { name, text, status: "SUCCESS", notificationId: "" }
     }
 
     const formData = new FormData()
@@ -41,24 +130,28 @@ const FileUploader: React.FC<FileUploaderProps> = ({ styledAs = "button" }) => {
 
     const loadingToast = toast.loading(`Processing ${file.name}...`)
     try {
-      const res = await fetch("http://localhost:3000/read-document", {
+      const res = await fetch("/read-document", {
         method: "POST",
         headers: {
-          "x-rigo-token": rigoToken,
+          "x-public-token": publicToken,
         },
         body: formData,
       })
 
       if (!res.ok) throw new Error(`Failed to read ${file.name}`)
       const data = await res.json()
-      console.log("DATA FROM BACKEND", data)
-      toast.success(`✅ ${file.name} processed`, { id: loadingToast })
-      return { name, text: data.content }
+      toast.success(`Processing ${file.name}`, { id: loadingToast })
+      return {
+        name,
+        text: "",
+        status: data.status,
+        notificationId: data.notificationId,
+      }
     } catch (err: any) {
       toast.error(`❌ ${file.name} failed: ${err.message}`, {
         id: loadingToast,
       })
-      return { name, text: "" }
+      return { name, text: "", status: "ERROR", notificationId: "" }
     }
   }
 
@@ -73,7 +166,9 @@ const FileUploader: React.FC<FileUploaderProps> = ({ styledAs = "button" }) => {
 
     setIsLoading(true)
     const parsed = await Promise.all(validFiles.map(extractTextFromFile))
-    setUploadedFiles([...uploadedFiles, ...parsed])
+    const newFiles = [...uploadedFiles, ...parsed]
+
+    setUploadedFiles(newFiles.filter((file) => file.status !== "ERROR"))
     setIsLoading(false)
   }
 
@@ -95,21 +190,7 @@ const FileUploader: React.FC<FileUploaderProps> = ({ styledAs = "button" }) => {
       {uploadedFiles.length > 0 && styledAs === "card" && (
         <div className="w-full flex flex-row gap-2 flex-wrap justify-center items-center">
           {uploadedFiles.map((file, idx) => (
-            <div
-              key={idx}
-              className="p-3 rounded-md bg-white shadow-sm text-sm text-gray-800 text-left"
-              title={file.name}
-            >
-              <strong>{file.name.slice(0, 20)}...</strong>
-              <button
-                className="text-gray-600 mt-1 float-right cursor-pointer"
-                onClick={() =>
-                  setUploadedFiles(uploadedFiles.filter((_, i) => i !== idx))
-                }
-              >
-                {SVGS.trash}
-              </button>
-            </div>
+            <UploadedFileCard key={idx} idx={idx} file={file} />
           ))}
         </div>
       )}
@@ -131,24 +212,35 @@ const FileUploader: React.FC<FileUploaderProps> = ({ styledAs = "button" }) => {
       )}
 
       {styledAs === "card" && (
-        <ContentCard
-          description={
-            isDragging
-              ? "Drop it here"
-              : isLoading
-              ? "Processing..."
-              : "Upload a PDF or DOCX file or drag it here"
-          }
-          icon={isDragging ? SVGS.clip : SVGS.pdf}
-          onClick={() => inputRef.current?.click()}
-          onDragOver={(e) => {
-            e.preventDefault()
-            setIsDragging(true)
-          }}
-          onDragLeave={() => setIsDragging(false)}
-          onDrop={handleDrop}
-          className={isDragging ? "border-blue-600 bg-blue-50" : ""}
-        />
+        <>
+          <ContentCard
+            description={
+              isDragging
+                ? "Drop it here"
+                : isLoading
+                ? "Processing..."
+                : "Upload a PDF or DOCX file or drag it here"
+            }
+            icon={isDragging ? SVGS.clip : SVGS.pdf}
+            onClick={() => inputRef.current?.click()}
+            onDragOver={(e) => {
+              e.preventDefault()
+              setIsDragging(true)
+            }}
+            onDragLeave={() => setIsDragging(false)}
+            onDrop={handleDrop}
+            className={isDragging ? "border-blue-600 bg-blue-50" : ""}
+          />
+          <button
+            disabled={uploadedFiles.some((file) => file.status !== "SUCCESS")}
+            className="bg-blue-500 text-white px-4 py-2 rounded-md cursor-pointer disabled:opacity-50"
+            onClick={() => {
+              onFinish?.(uploadedFiles)
+            }}
+          >
+            🚀 Finish
+          </button>
+        </>
       )}
 
       <input

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

@@ -0,0 +1,70 @@
+import React from "react"
+import SelectableCard from "./SelectableCard"
+import useStore from "../utils/store"
+
+export const possiblePurposes = [
+  "learnpack-lesson-writer",
+  "homework-and-exam-preparation-aid",
+  "skill-building-facilitator",
+  "certification-preparation-specialist",
+]
+
+type PurposeSlug =
+  | "learnpack-lesson-writer"
+  | "homework-and-exam-preparation-aid"
+  | "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
+  initialPurpose?: PurposeSlug
+}
+
+export const PurposeSelector: React.FC<PurposeSelectorProps> = ({
+  onFinish,
+}) => {
+  const formState = useStore((state) => state.formState)
+
+  return (
+    <div className="w-full">
+      <ul className="flex flex-row gap-4 flex-wrap">
+        {PURPOSES.map((p) => (
+          <SelectableCard
+            key={p.slug}
+            title={p.label}
+            selected={formState.purpose === p.slug}
+            subtitle={p.description}
+            onClick={() => onFinish(p.slug)}
+            className="w-full"
+          />
+        ))}
+      </ul>
+    </div>
+  )
+}

package/src/creator/src/components/SelectableCard.tsx

@@ -5,6 +5,7 @@ interface SelectableCardProps {
   subtitle?: string
   selected?: boolean
   onClick: () => void
+  className?: string
 }
 
 const SelectableCard: React.FC<SelectableCardProps> = ({
@@ -12,13 +13,14 @@ const SelectableCard: React.FC<SelectableCardProps> = ({
   selected = false,
   subtitle = "",
   onClick,
+  className = "",
 }) => {
   return (
     <div
       className={`cursor-pointer bg-white rounded-lg shadow-md p-6 text-center transition-all 
-        hover:shadow-lg border-2 ${
-          selected ? "border-blue-500" : "border-transparent"
-        }`}
+        hover:shadow-lg border-2 ${className} ${
+        selected ? "border-blue-500" : "border-transparent"
+      }`}
       onClick={onClick}
     >
       <p className="text-md font-medium">{title}</p>

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

@@ -61,7 +61,18 @@ export const Uploader = ({
 
       {selectedOption === "text" && <TextUploader onFinish={onFinish} />}
 
-      {selectedOption === "files" && <FileUploader styledAs="card" />}
+      {selectedOption === "files" && (
+        <FileUploader
+          styledAs="card"
+          onFinish={(files) => {
+            const allFilesText = files
+              .filter((f) => f.status === "SUCCESS")
+              .map((f) => `<FILE name="${f.name}">${f.text}</FILE>`)
+              .join("\n")
+            onFinish(allFilesText)
+          }}
+        />
+      )}
 
       {selectedOption === "youtube" && (
         <LinkUploader

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

@@ -24,7 +24,7 @@ import Login from "../Login"
 import { useNavigate } from "react-router"
 import { ParamsChecker } from "../ParamsChecker"
 import { slugify } from "../../utils/creatorUtils"
-import { RIGO_FLOAT_GIT } from "../../utils/constants"
+import { RIGO_FLOAT_GIF } from "../../utils/constants"
 
 const SyllabusEditor: React.FC = () => {
   const navigate = useNavigate()
@@ -69,7 +69,6 @@ const SyllabusEditor: React.FC = () => {
   useEffect(() => {
     if (!syllabus) {
       navigate("/creator", { replace: true })
-    } else {
     }
   }, [syllabus, navigate])
 
@@ -141,19 +140,14 @@ const SyllabusEditor: React.FC = () => {
 
     const res = await publicInteractiveCreation(
       {
-        courseInfo: `${JSON.stringify(syllabus.courseInfo)}
-      ${
-        uploadedFiles.length > 0 &&
-        "The user has uploaded files, take them in consideration while generating the course structure." +
-          JSON.stringify(uploadedFiles)
-      }
-      `,
+        courseInfo: JSON.stringify(syllabus.courseInfo),
         prevInteractions:
           messages
             .map((message) => `${message.type}: ${message.content}`)
             .join("\n") + `\nUSER: ${prompt}`,
       },
-      auth.publicToken
+      auth.publicToken,
+      syllabus.courseInfo.purpose
     )
 
     const lessons: Lesson[] = res.parsed.listOfSteps.map((step: any) =>
@@ -208,7 +202,7 @@ const SyllabusEditor: React.FC = () => {
     //   toast.error("You don't have enough credits to generate a course!")
     //   return
     // }
-    syllabus.sources = uploadedFiles
+    // syllabus.sources = uploadedFiles
     console.log(syllabus)
 
     setIsGenerating(true)
@@ -229,7 +223,7 @@ const SyllabusEditor: React.FC = () => {
     <>
       <Loader
         listeningTo="course-generation"
-        icon={<img src={RIGO_FLOAT_GIT} alt="rigo" className="w-20 h-20" />}
+        icon={<img src={RIGO_FLOAT_GIF} alt="rigo" className="w-20 h-20" />}
         initialBuffer="🚀 Starting course generation..."
         text="Learnpack is setting up your tutorial.
 It may take a moment..."

package/src/creator/src/utils/constants.ts

@@ -1,6 +1,12 @@
-export const RIGOBOT_HOST = "https://rigobot.herokuapp.com"
-// export const RIGOBOT_HOST = "https://rigobot-test-cca7d841c9d8.herokuapp.com"
-export const BREATHECODE_HOST = "https://breathecode.herokuapp.com"
+export const DEV_MODE = false
 
-export const RIGO_FLOAT_GIT =
+export const RIGOBOT_HOST = DEV_MODE
+  ? "https://rigobot-test-cca7d841c9d8.herokuapp.com"
+  : "https://rigobot.herokuapp.com"
+
+export const BREATHECODE_HOST = DEV_MODE
+  ? "https://breathecode-test.herokuapp.com"
+  : "https://breathecode.herokuapp.com"
+
+export const RIGO_FLOAT_GIF =
   "https://raw.githubusercontent.com/learnpack/ide/20ed3f4c3ead9b33d5d6acb20154dcd93a0ec4af/public/rigo-float.gif"