@learnpack/learnpack 5.0.68 → 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"
@@ -223,4 +223,44 @@ export const SVGS = {
       />
     </svg>
   ),
+  downArrow: (
+    <svg
+      width="7"
+      height="6"
+      viewBox="0 0 7 6"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.100496 1.0705C0.22866 0.950272 0.430019 0.956708 0.550243 1.08487L3.5 4.2294L6.44976 1.08487C6.56998 0.956708 6.77134 0.950272 6.8995 1.0705C7.02767 1.19072 7.0341 1.39208 6.91388 1.52024L3.73206 4.91216C3.67191 4.97628 3.58792 5.01266 3.5 5.01266C3.41208 5.01266 3.32809 4.97628 3.26794 4.91216L0.086122 1.52024C-0.0341029 1.39208 -0.0276674 1.19072 0.100496 1.0705Z"
+        fill="#0084FF"
+      />
+    </svg>
+  ),
+  bottom: (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.9297 2V22"
+        stroke="#0084FF"
+        strokeWidth="1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19 16L14 21.1599C13.7437 21.4336 13.434 21.6519 13.0899 21.801C12.7459 21.9502 12.375 22.0271 12 22.0271C11.625 22.0271 11.2541 21.9502 10.9101 21.801C10.566 21.6519 10.2563 21.4336 10 21.1599L5 16"
+        stroke="#0084FF"
+        strokeWidth="1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  ),
 }

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 ➡