@learnpack/learnpack 5.0.69 → 5.0.70

package/src/creator/src/App.tsx

@@ -1,20 +1,18 @@
-import { useEffect, useState } from "react"
-import StepWizard, { Step } from "./components/StepWizard"
+import { useEffect } from "react"
+import StepWizard from "./components/StepWizard"
 import SelectableCard from "./components/SelectableCard"
 import Loader from "./components/Loader"
-import { SVGS } from "./assets/svgs"
 import { useNavigate } from "react-router"
 import Login, { loginWithToken } from "./components/Login"
 import { useShallow } from "zustand/react/shallow"
 import useStore from "./utils/store"
 import { interactiveCreation } from "./utils/rigo"
 import { checkParams, parseLesson } from "./utils/lib"
+import FileUploader from "./components/FileUploader"
 
-// import SyllabusEditor from "./components/SyllabusEditor"
-
-const exampleContentIndex = `-Introduction to AI: Explain what is AI and its applications
--Introduction to Machine Learning: Explain What is machine learning and its aplications
--What is an AI Model: Explain what is an AI model an its applications`
+// const exampleContentIndex = `-Introduction to AI: Explain what is AI and its applications
+// -Introduction to Machine Learning: Explain What is machine learning and its aplications
+// -What is an AI Model: Explain what is an AI model an its applications`
 
 function App() {
   const navigate = useNavigate()
@@ -29,157 +27,8 @@ function App() {
     }))
   )
 
-  // const [currentStep, setCurrentStep] = useState(0)
-  const [steps, setSteps] = useState<Array<Step>>([
-    {
-      title: "Provide a description for your tutorial",
-      slug: "description",
-      content: (
-        <textarea
-          placeholder="Describe your tutorial"
-          className="w-full h-24 border-2 border-gray-300 rounded-md p-2 bg-white"
-          defaultValue={formState.description}
-          onBlur={(e) => {
-            setFormState({
-              description: e.target.value,
-              currentStep: 1,
-            })
-          }}
-        />
-      ),
-    },
-    {
-      title:
-        "First you need to login with 4Geeks.com to use AI Generation tool for creators. ",
-      slug: "login",
-      content: (
-        <Login
-          onFinish={() => {
-            setFormState({
-              currentStep: 2,
-            })
-          }}
-        />
-      ),
-    },
-    {
-      title: "What is the estimated duration for this tutorial?",
-      slug: "duration",
-      content: (
-        <div className="flex flex-row gap-4">
-          <SelectableCard
-            title="Around 30 minutes"
-            // subtitle="This is a tutorial that will take 30 minutes to complete"
-            onClick={() => {
-              setFormState({
-                duration: 30,
-                currentStep: 3,
-              })
-            }}
-            selected={false}
-          />
-          <SelectableCard
-            title="Around 1 hour"
-            // subtitle="This is a tutorial that will take 1 hour to complete"
-            onClick={() => {
-              setFormState({
-                duration: 60,
-                currentStep: 3,
-              })
-            }}
-            selected={false}
-          />
-          <SelectableCard
-            title="Around 2 hours"
-            // subtitle="This is a tutorial that will take 2 hours to complete"
-            onClick={() => {
-              setFormState({
-                duration: 120,
-                currentStep: 3,
-              })
-            }}
-            selected={false}
-          />
-        </div>
-      ),
-    },
-    {
-      title: "What is the target audience for this tutorial?",
-      slug: "target-audience",
-      content: (
-        <div className="flex flex-row gap-4">
-          <textarea
-            placeholder="Describe the target audience for this tutorial"
-            className="w-full h-24 border-2 border-gray-300 rounded-md p-2 bg-white"
-            defaultValue={formState.targetAudience}
-            onBlur={(e) => {
-              setFormState({
-                targetAudience: e.target.value,
-                currentStep: 3,
-              })
-            }}
-          />
-        </div>
-      ),
-    },
-    {
-      title: "Do you have a content index for this tutorial?",
-      slug: "content-index",
-      content: (
-        <div className="flex flex-row gap-4 justify-center">
-          <SelectableCard
-            title="Yes"
-            onClick={() => {
-              setFormState({
-                hasContentIndex: true,
-                currentStep: 4,
-              })
-              setSteps([
-                ...steps,
-                {
-                  title:
-                    "Write or paste your content index below, each topic should be defined on a new line, here is an example:",
-                  slug: "content-index",
-                  content: (
-                    <textarea
-                      placeholder="Provide a content index for this tutorial"
-                      className="w-full h-24 border-2 border-gray-300 rounded-md p-2"
-                      defaultValue={exampleContentIndex}
-                      onBlur={(e) => {
-                        setFormState({
-                          contentIndex: e.target.value,
-                          isCompleted: true,
-                        })
-                      }}
-                    />
-                  ),
-                },
-              ])
-            }}
-            selected={false}
-          />
-          <SelectableCard
-            title="No, help me create one"
-            onClick={() => {
-              setFormState({
-                hasContentIndex: false,
-                isCompleted: true,
-              })
-
-              // createTutorial()
-              // setCurrentStep(4)
-            }}
-            selected={false}
-          />
-        </div>
-      ),
-    },
-  ])
-
   useEffect(() => {
-    console.log(formState, "FORM STATE")
     if (formState.isCompleted) {
-      // navigate("/syllabus")
       handleCreateTutorial()
     }
   }, [formState])
@@ -192,14 +41,29 @@ function App() {
     const { token } = checkParams()
     if (token) {
       const user = await loginWithToken(token)
-      console.log(user, "user at the beginning")
       setAuth({
         bcToken: token,
         userId: user.id,
         rigoToken: user.rigobot.key,
       })
-
-      setSteps(steps.filter((step) => step.slug !== "login"))
+      setFormState({
+        variables: [
+          "description",
+          "duration",
+          "targetAudience",
+          "hasContentIndex",
+        ],
+      })
+    } else {
+      setFormState({
+        variables: [
+          "description",
+          "login",
+          "duration",
+          "targetAudience",
+          "hasContentIndex",
+        ],
+      })
     }
   }
 
@@ -226,19 +90,194 @@ function App() {
       hasContentIndex: false,
       contentIndex: "",
       isCompleted: false,
-      currentStep: 0,
+      currentStep: "description",
     })
   }
 
+  const buildSteps = () => {
+    const steps = [
+      {
+        title: "Provide a description for your tutorial",
+        slug: "description",
+        isCompleted: false,
+        content: (
+          <textarea
+            placeholder="Describe your tutorial"
+            className="w-full h-24 border-2 border-gray-300 rounded-md p-2 bg-white"
+            value={formState.description}
+            onChange={(e) => {
+              setFormState({
+                description: e.target.value,
+              })
+            }}
+          />
+        ),
+      },
+      {
+        title:
+          "First you need to login with 4Geeks.com to use AI Generation tool for creators. ",
+        slug: "login",
+        isCompleted: false,
+        content: (
+          <Login
+            onFinish={() => {
+              setFormState({
+                currentStep: "duration",
+              })
+            }}
+          />
+        ),
+      },
+      {
+        title: "What is the estimated duration for this tutorial?",
+        slug: "duration",
+        isCompleted: false,
+        content: (
+          <div className="flex flex-col md:flex-row gap-2">
+            <SelectableCard
+              title="Around 30 minutes"
+              // subtitle="This is a tutorial that will take 30 minutes to complete"
+              onClick={() => {
+                setFormState({
+                  duration: 30,
+                  currentStep: "targetAudience",
+                })
+              }}
+              selected={formState.duration === 30}
+            />
+            <SelectableCard
+              title="Around 1 hour"
+              // subtitle="This is a tutorial that will take 1 hour to complete"
+              onClick={() => {
+                setFormState({
+                  duration: 60,
+                  currentStep: "targetAudience",
+                })
+              }}
+              selected={formState.duration === 60}
+            />
+            <SelectableCard
+              title="Around 2 hours"
+              // subtitle="This is a tutorial that will take 2 hours to complete"
+              onClick={() => {
+                setFormState({
+                  duration: 120,
+                  currentStep: "targetAudience",
+                })
+              }}
+              selected={formState.duration === 120}
+            />
+          </div>
+        ),
+      },
+      {
+        title: "What is the target audience for this tutorial?",
+        slug: "targetAudience",
+        isCompleted: false,
+        content: (
+          <div className="flex flex-row gap-4">
+            <textarea
+              placeholder="Describe the target audience for this tutorial"
+              className="w-full h-24 border-2 border-gray-300 rounded-md p-2 bg-white"
+              defaultValue={formState.targetAudience}
+              onBlur={(e) => {
+                setFormState({
+                  targetAudience: e.target.value,
+                })
+              }}
+            />
+          </div>
+        ),
+      },
+      {
+        title: "Do you have a content index for this tutorial?",
+        slug: "hasContentIndex",
+        isCompleted: false,
+        content: (
+          <div className="flex flex-col md:flex-row gap-2 justify-center">
+            <SelectableCard
+              title="Yes"
+              onClick={() => {
+                setFormState({
+                  hasContentIndex: true,
+                  currentStep: "contentIndex",
+                  variables: [...formState.variables, "contentIndex"],
+                })
+              }}
+              selected={false}
+            />
+            <SelectableCard
+              title="No, help me create one"
+              onClick={() => {
+                setFormState({
+                  hasContentIndex: false,
+                  isCompleted: true,
+                })
+              }}
+              selected={false}
+            />
+          </div>
+        ),
+      },
+      {
+        title:
+          "Write or paste your content index below, each topic should be defined on a new line, here is an example:",
+        slug: "contentIndex",
+        isCompleted: false,
+        content: (
+          <>
+            <textarea
+              placeholder="Provide a content index for this tutorial"
+              className="w-full h-40 border-2 border-gray-300 rounded-md p-2"
+              value={formState.contentIndex}
+              onChange={(e) => {
+                setFormState({
+                  contentIndex: e.target.value,
+                  // isCompleted: true,
+                })
+              }}
+            />
+            <FileUploader
+              onResult={(files) => {
+                // toast.success("File uploaded successfully")
+                let allFilesText = ``
+                files.forEach((file) => {
+                  allFilesText += `<FILE NAME="${file.name}">${file.text}</FILE>\n`
+                })
+                setFormState({
+                  contentIndex: allFilesText,
+                })
+              }}
+            />
+          </>
+        ),
+      },
+    ]
+
+    return steps.filter(
+      (step) =>
+        formState.variables.includes(step.slug) ||
+        step.slug === formState.currentStep
+    )
+  }
   return (
     <>
       {formState.isCompleted ? (
         <Loader
           text="Learnpack is setting up your tutorial. It may take a moment..."
-          icon={SVGS.rigoSoftBlue}
+          icon={<img src={"rigo-float.gif"} alt="rigo" className="w-20 h-20" />}
         />
       ) : (
-        <StepWizard initialStep={formState.currentStep} steps={steps} />
+        <StepWizard
+          formState={formState}
+          steps={buildSteps()}
+          setFormState={setFormState}
+          onFinish={() => {
+            setFormState({
+              isCompleted: true,
+            })
+          }}
+        />
       )}
     </>
   )

package/src/creator/src/assets/svgs.tsx

@@ -196,7 +196,7 @@ export const SVGS = {
   ),
   clip: (
     <svg
-      fill="#C7F3FD"
+      fill="var(--four-geeks-blue)"
       width="20"
       height="20"
       viewBox="0 0 32 32"

package/src/creator/src/components/LessonItem.tsx

@@ -11,15 +11,22 @@ export interface Lesson {
 
 interface LessonItemProps {
   lesson: Lesson
-  index: string
   isNew: boolean
   onChange: (id: string, newTitle: string) => void
   onRemove: (id: string) => void
 }
 
+function cleanFloatString(input: string): string {
+  const num = parseFloat(input)
+  const isInteger = Number.isInteger(num)
+
+  return isInteger
+    ? Math.floor(num).toString().padStart(2, "0")
+    : num.toString()
+}
+
 export const LessonItem: React.FC<LessonItemProps> = ({
   lesson,
-  index,
   onChange,
   onRemove,
   isNew,
@@ -32,7 +39,7 @@ export const LessonItem: React.FC<LessonItemProps> = ({
         isNew ? "bg-yellow-50" : ""
       }`}
     >
-      <span className="index-circle">{index}</span>
+      <span className="index-circle">{cleanFloatString(lesson.id)}</span>
       <span className="text-gray-500 text-sm">
         {lesson.type[0] + lesson.type.slice(1).toLowerCase()} ●
       </span>

package/src/creator/src/components/Message.tsx

@@ -12,7 +12,7 @@ export const Message: React.FC<TMessage> = ({ type, content }) => {
 
   const isLoading = isAI && !content
   return isLoading ? (
-    <RigoLoader text="Thinking..." svg={SVGS.rigoSoftBlue} />
+    <RigoLoader text="Thinking..." svg={<img src="rigo-float.gif" />} />
   ) : (
     <div
       className={`flex items-start space-x-2 p-3 rounded-md border ${

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

@@ -1,45 +1,60 @@
-import React, { useEffect, useState } from "react"
+import React from "react"
 
 export type Step = {
   title: string
   subtitle?: string
   content: React.ReactNode
   slug: string
+  isCompleted: boolean
 }
 
 type Props = {
   steps: Step[]
-  initialStep?: number
+  formState: any
+  setFormState: (formState: any) => void
+  onFinish: () => void
 }
 
-const StepWizard: React.FC<Props> = ({ steps, initialStep = 0 }) => {
-  const [currentStep, setCurrentStep] = useState(initialStep)
+const StepWizard: React.FC<Props> = ({
+  steps,
+  formState,
+  setFormState,
+  onFinish,
+}) => {
+  const currentStep = formState.currentStep
+  const index = steps.findIndex((step) => step.slug === currentStep)
   const totalSteps = steps.length
 
   const goNext = () => {
-    if (currentStep < totalSteps - 1) setCurrentStep((s) => s + 1)
+    const index = steps.findIndex((step) => step.slug === currentStep)
+    if (index < totalSteps - 1)
+      setFormState({
+        ...formState,
+        currentStep: steps[index + 1].slug,
+      })
   }
 
   const goBack = () => {
-    if (currentStep > 0) setCurrentStep((s) => s - 1)
+    const index = steps.findIndex((step) => step.slug === currentStep)
+    if (index > 0)
+      setFormState({ ...formState, currentStep: steps[index - 1].slug })
   }
 
-  useEffect(() => {
-    setCurrentStep(initialStep)
-  }, [initialStep])
-
   return (
     <div className="min-h-screen flex flex-col items-center justify-center  text-center px-4">
       <div className=" rounded-xl  p-8 w-full max-w-xl">
         <h5 className="text-sm text-blue-400 uppercase mb-2">
-          {steps[currentStep].subtitle || "Setting up your tutorial"}
+          {steps.find((step) => step.slug === currentStep)?.subtitle ||
+            "Setting up your tutorial"}
         </h5>
         <h2 className="text-lg font-medium mb-6">
-          <span className="text-blue-600 mr-1">{currentStep + 1}.</span>
-          {steps[currentStep].title}
+          <span className="text-blue-600 mr-1">{index + 1}.</span>
+          {steps.find((step) => step.slug === currentStep)?.title}
         </h2>
 
-        <div className="mb-6">{steps[currentStep].content}</div>
+        <div className="mb-6">
+          {steps.find((step) => step.slug === currentStep)?.content}
+        </div>
 
         {/* Dot Indicators */}
         <div className="flex justify-center mb-4 space-x-2">
@@ -47,7 +62,7 @@ const StepWizard: React.FC<Props> = ({ steps, initialStep = 0 }) => {
             <span
               key={i}
               className={`h-2 w-2 rounded-full ${
-                i === currentStep ? "bg-blue-600" : "bg-gray-300"
+                i === index ? "bg-blue-600" : "bg-gray-300"
               }`}
             />
           ))}
@@ -57,14 +72,13 @@ const StepWizard: React.FC<Props> = ({ steps, initialStep = 0 }) => {
         <div className="flex justify-between">
           <button
             onClick={goBack}
-            disabled={currentStep === 0}
+            disabled={index === 0}
             className="text-sm text-gray-500 hover:text-gray-900 disabled:opacity-40"
           >
             ⬅ Back
           </button>
           <button
-            onClick={goNext}
-            disabled={currentStep === totalSteps - 1}
+            onClick={index === totalSteps - 1 ? onFinish : goNext}
             className="text-sm text-blue-600 hover:text-blue-800 disabled:opacity-40"
           >
             Next ➡

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

@@ -1,7 +1,38 @@
 import { useEffect, useState, useRef } from "react"
-import useStore from "../../utils/store"
+import useStore, { Syllabus } from "../../utils/store"
 import { Lesson, LessonItem } from "../LessonItem"
 import { SVGS } from "../../assets/svgs"
+import { TMessage } from "../Message"
+
+const ContentIndexHeader = ({
+  messages,
+  syllabus,
+}: {
+  messages: TMessage[]
+  syllabus: Syllabus
+}) => {
+  return (
+    <div>
+      <h2 className="text-lg font-semibold">
+        {messages.filter((m) => m.type === "assistant" && m.content.length > 0)
+          .length === 0
+          ? "I've created a detailed structure for your course."
+          : "I've updated the structure based on your feedback."}
+      </h2>
+      <p className="text-sm text-gray-600">
+        {messages.filter((m) => m.type === "assistant" && m.content.length > 0)
+          .length === 0
+          ? `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"}
+      </p>
+      <h3 className="text-sm text-gray-600 mt-2 font-bold">
+        {syllabus.courseInfo.title}
+      </h3>
+    </div>
+  )
+}
 
 export const GenerateButton = ({
   handleSubmit,
@@ -25,19 +56,23 @@ export const GenerateButton = ({
 export const ContentIndex = ({
   prevLessons,
   handleSubmit,
+  messages,
 }: {
   prevLessons?: Lesson[]
   handleSubmit: () => void
+  messages: TMessage[]
 }) => {
   const syllabus = useStore((state) => state.syllabus)
   const setSyllabus = useStore((state) => state.setSyllabus)
   const containerRef = useRef<HTMLDivElement>(null)
   const [showScrollHint, setShowScrollHint] = useState(false)
 
-  const handleRemove = (id: string) => {
+  const handleRemove = (lesson: Lesson) => {
     setSyllabus({
       ...syllabus,
-      lessons: syllabus.lessons.filter((lesson) => lesson.id !== id),
+      lessons: syllabus.lessons.filter(
+        (l) => l.id !== lesson.id && l.title !== lesson.title
+      ),
     })
   }
 
@@ -52,7 +87,7 @@ export const ContentIndex = ({
 
   const addLessonAfter = (index: number, id: string) => {
     const newLesson: Lesson = {
-      id: (parseFloat(id) + 0.1).toString(),
+      id: (parseFloat(id) + 0.1).toFixed(1),
       title: "Hello World",
       type: "READ",
       duration: 2,
@@ -100,19 +135,19 @@ export const ContentIndex = ({
   }
 
   return (
-    <div className="relative">
+    <div className="relative ">
+      <ContentIndexHeader messages={messages} syllabus={syllabus} />
       <div
         ref={containerRef}
-        className=" space-y-3 overflow-y-auto max-h-[70vh] pr-2 scrollbar-hide relative"
+        className=" space-y-3 overflow-y-auto max-h-[70vh] pr-2 scrollbar-hide relative pb-5"
       >
         {syllabus.lessons.map((lesson, index) => (
           <div key={lesson.id}>
             <LessonItem
-              key={lesson.id}
-              index={lesson.id}
+              key={lesson.id + index + lesson.title}
               lesson={lesson}
               onChange={handleChange}
-              onRemove={handleRemove}
+              onRemove={() => handleRemove(lesson)}
               isNew={Boolean(
                 prevLessons &&
                   prevLessons.length > 0 &&