@learnpack/learnpack 5.0.69 → 5.0.71

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,30 @@ 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,
+        user: user,
+      })
+      setFormState({
+        variables: [
+          "description",
+          "duration",
+          "targetAudience",
+          "hasContentIndex",
+        ],
+      })
+    } else {
+      setFormState({
+        variables: [
+          "description",
+          "login",
+          "duration",
+          "targetAudience",
+          "hasContentIndex",
+        ],
       })
-
-      setSteps(steps.filter((step) => step.slug !== "login"))
     }
   }
 
@@ -226,19 +91,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={"creator/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

@@ -190,13 +190,13 @@ export const SVGS = {
     >
       <path
         d="M6.12812 3.64814L0.384343 0.0378137C0.213539 -0.0696296 0 0.0647108 0 0.279307V5.34833C0 5.47075 0.0733163 5.57892 0.18082 5.61498L2.90314 6.52715L5.01075 7.23331C5.25193 7.31415 5.25193 7.68577 5.01075 7.76646L2.90314 8.47262L0.18082 9.38509C0.0733163 9.42114 0 9.52931 0 9.65173V14.7206C0 14.9354 0.213539 15.0695 0.384343 14.9622L6.12812 11.3519L11.8719 7.7416C12.0427 7.6343 12.0427 7.36576 11.8719 7.25847L6.12812 3.64814Z"
-        fill="#C7F3FD"
+        fill="var(--four-geeks-blue)"
       />
     </svg>
   ),
   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/Login.tsx

@@ -126,6 +126,7 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
       bcToken: isLoggedId.token,
       userId: isLoggedId.user.id,
       rigoToken: isLoggedId.rigobot.key,
+      user: isLoggedId.user,
     })
     setIsLoading(false)
     onFinish()
@@ -163,6 +164,7 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
           bcToken: token,
           userId: user.id,
           rigoToken: user.rigobot.key,
+          user: user,
         })
         onFinish()
       }
@@ -172,24 +174,6 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
   return (
     <>
       <div className="max-w-sm mx-auto mt-10 bg-white p-8 rounded-xl shadow-md text-center">
-        <div className="flex justify-between items-center mb-4">
-          <h2 className="text-xl font-semibold">Login</h2>
-          <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>
-            <a
-              href="https://4geeks.com/pricing?plan=basic"
-              className="text-blue-600 font-medium"
-            >
-              Register here.
-            </a>
-          </div>
-        </div>
-
-        <p className="text-gray-600 mb-6">
-          Log in to 4Geeks to get performance statistics, access to our AI
-          mentor, and many other benefits
-        </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"
@@ -251,6 +235,18 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
             Login with Email
           </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>
+            <a
+              href="https://4geeks.com/checkout?plan=4geeks-creator"
+              target="_blank"
+              className="text-blue-600 font-medium"
+            >
+              Register here.
+            </a>
+          </div>
+        </div>
       </div>
     </>
   )

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

@@ -1,6 +1,7 @@
 import { RigoLoader } from "./RigoLoader"
 
 import { SVGS } from "../assets/svgs"
+import useStore from "../utils/store"
 
 export type TMessage = {
   type: "user" | "assistant"
@@ -8,11 +9,14 @@ export type TMessage = {
 }
 
 export const Message: React.FC<TMessage> = ({ type, content }) => {
+  const user = useStore((state) => state.auth.user)
   const isAI = type === "assistant"
 
   const isLoading = isAI && !content
+
+  console.log("user", user)
   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 ${
@@ -21,7 +25,13 @@ export const Message: React.FC<TMessage> = ({ type, content }) => {
           : "bg-blue-50 border-blue-200 text-blue-900"
       }`}
     >
-      <span className="mt-1">{isAI ? SVGS.rigoSoftBlue : SVGS.user}</span>
+      {isAI ? (
+        <span className="mt-1">{SVGS.rigoSoftBlue}</span>
+      ) : user?.profile?.avatar_url ? (
+        <img src={user?.profile?.avatar_url} className="w-6 h-6 rounded-full" />
+      ) : (
+        <span className="mt-1">{SVGS.user}</span>
+      )}
       <p className="text-sm leading-relaxed">{content}</p>
     </div>
   )

package/src/creator/src/components/Redirector.tsx

@@ -0,0 +1,12 @@
+import { useEffect } from "react"
+import toast from "react-hot-toast"
+export const Redirector = ({ to }: { to: string }) => {
+  useEffect(() => {
+    window.location.href = to
+    window.location.reload()
+    toast.success("Redirecting to " + to)
+    console.log("Redirecting to " + to)
+  }, [])
+
+  return <h1>Redirecting to {to}...</h1>
+}

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 ➡