@learnpack/learnpack 5.0.81 → 5.0.85

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

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react"
+import React, { useState, useEffect } from "react"
 import { useShallow } from "zustand/react/shallow"
 import useStore from "../../utils/store"
 import { interactiveCreation } from "../../utils/rigo"
@@ -8,12 +8,13 @@ import {
   useConsumableCall,
   validateTokens,
   extractImagesFromMarkdown,
+  checkParams,
+  loginWithToken,
 } from "../../utils/lib"
 import {
   createLearnJson,
   processExercise,
   slugify,
-  randomUUID,
   processImage,
 } from "../../utils/creatorUtils"
 
@@ -26,8 +27,10 @@ import { ContentIndex } from "./ContentIndex"
 import { Sidebar } from "./Sidebar"
 import Login from "../Login"
 import { eventBus } from "../../utils/eventBus"
+import { useNavigate } from "react-router"
 
 const SyllabusEditor: React.FC = () => {
+  const navigate = useNavigate()
   const [messages, setMessages] = useState<TMessage[]>([
     {
       type: "assistant",
@@ -36,23 +39,48 @@ const SyllabusEditor: React.FC = () => {
     {
       type: "assistant",
       content:
-        "If not, what would you like me to change? You can sat things like: 'Add more exercises', 'Make it more difficult', 'Remove step 1.1 and replace it with a new step that explains the concept of X'",
+        "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)
 
-  const prevLessons = useRef<Lesson[]>([])
-  const { syllabus, setSyllabus, auth, setAuth } = useStore(
+  const { history, auth, setAuth, push, uploadedFiles } = useStore(
     useShallow((state) => ({
-      syllabus: state.syllabus,
-      setSyllabus: state.setSyllabus,
+      history: state.history,
       auth: state.auth,
       setAuth: state.setAuth,
+      push: state.push,
+      uploadedFiles: state.uploadedFiles,
     }))
   )
 
+  const syllabus = history[history.length - 1]
+
+  useEffect(() => {
+    if (!syllabus) {
+      navigate("/creator", { replace: true })
+    }
+  }, [syllabus, navigate])
+
+  useEffect(() => {
+    ;(async () => {
+      const { token } = checkParams()
+      if (token) {
+        const user = await loginWithToken(token)
+        if (user) {
+          setAuth({
+            bcToken: token,
+            userId: user.id,
+            rigoToken: user.rigobot.key,
+            user,
+          })
+        }
+      }
+    })()
+  }, [])
+
   const sendPrompt = async (prompt: string) => {
     setIsThinking(true)
 
@@ -61,9 +89,15 @@ const SyllabusEditor: React.FC = () => {
       { type: "user", content: prompt },
       { type: "assistant", content: "" },
     ])
-    prevLessons.current = syllabus.lessons
+
     const res = await interactiveCreation({
-      courseInfo: JSON.stringify(syllabus),
+      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)
+      }
+      `,
       prevInteractions:
         messages
           .map((message) => `${message.type}: ${message.content}`)
@@ -71,9 +105,9 @@ const SyllabusEditor: React.FC = () => {
     })
 
     const lessons: Lesson[] = res.parsed.listOfSteps.map((step: any) =>
-      parseLesson(step)
+      parseLesson(step, syllabus.lessons)
     )
-    setSyllabus({
+    push({
       ...syllabus,
       lessons: lessons,
       courseInfo: {
@@ -95,6 +129,11 @@ const SyllabusEditor: React.FC = () => {
       return
     }
 
+    if (!syllabus.courseInfo.title) {
+      toast.error("Please provide a title for the course")
+      return
+    }
+
     let tokenToUse = auth.rigoToken
     const onValidRigoToken = (rigotoken: string) => {
       setAuth({
@@ -115,8 +154,7 @@ const SyllabusEditor: React.FC = () => {
     }
     setIsGenerating(true)
 
-    const tutorialDir =
-      "courses/" + slugify(syllabus.courseInfo.title || randomUUID())
+    const tutorialDir = "courses/" + slugify(syllabus.courseInfo.title)
     const lessonsPromises = syllabus.lessons.map((lesson) =>
       processExercise(
         tokenToUse,
@@ -148,23 +186,21 @@ const SyllabusEditor: React.FC = () => {
     const learnJson = createLearnJson(syllabus.courseInfo)
     await uploadFileToBucket(
       JSON.stringify(learnJson),
-      "courses/" +
-        slugify(syllabus.courseInfo.title || randomUUID()) +
-        "/learn.json"
+      "courses/" + slugify(syllabus.courseInfo.title) + "/learn.json"
     )
     setIsGenerating(false)
 
-    window.location.href = `/?slug=${slugify(
-      syllabus.courseInfo.title || "exercises"
-    )}&token=${auth.bcToken}`
+    window.location.href = `preview/${slugify(
+      syllabus.courseInfo.title
+    )}?token=${auth.rigoToken}`
   }
 
+  if (!syllabus) return null
+
   return isGenerating ? (
     <Loader
       listeningTo="course-generation"
-      icon={
-        <img src={"rigo-float.gif"} 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..."
@@ -187,14 +223,11 @@ It may take a moment..."
         handleSubmit={handleSubmit}
       />
 
-      <div className="w-full p-8 space-y-6">
-        <ContentIndex
-          prevLessons={prevLessons.current}
-          handleSubmit={handleSubmit}
-          messages={messages}
-          isThinking={isThinking}
-        />
-      </div>
+      <ContentIndex
+        handleSubmit={handleSubmit}
+        messages={messages}
+        isThinking={isThinking}
+      />
     </div>
   )
 }

package/src/creator/src/index.css

@@ -141,3 +141,50 @@ h1 {
   top: -10px;
   left: 10px;
 }
+
+.fluid-svg {
+  > svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.outline-blue:focus {
+  outline: 1px solid #51b3e5;
+}
+
+.border-C8DBFC {
+  border-color: #c8dbfc;
+}
+
+.markdown-renderer {
+  & ul {
+    padding-left: 0;
+    list-style-position: inside;
+    list-style-type: disc;
+  }
+
+  & ol {
+    padding-left: 0;
+    list-style-position: inside;
+    list-style-type: decimal;
+  }
+}
+
+.appear {
+  animation: appear 0.5s ease-in-out forwards;
+  transform-origin: top center; /* o donde quieras que crezca */
+  opacity: 0;
+  transform: scaleY(0) translateY(20px);
+}
+
+@keyframes appear {
+  from {
+    opacity: 0;
+    transform: scaleY(0) translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: scaleY(1) translateY(0);
+  }
+}

package/src/creator/src/utils/creatorUtils.ts

@@ -18,14 +18,18 @@ export const slugify = (text: string) => {
 
 export const createLearnJson = (courseInfo: FormState) => {
   const learnJson = {
-    slug: slugify(courseInfo.title || randomUUID()),
+    slug: slugify(courseInfo.title as string),
     title: {
       us: courseInfo.title,
     },
+    difficulty: "beginner",
     description: {
       us: courseInfo.description,
     },
     grading: "isolated",
+    telemetry: {
+      batch: "https://breathecode.herokuapp.com/v1/assignment/me/telemetry",
+    },
   }
   return learnJson
 }

package/src/creator/src/utils/lib.ts

@@ -1,15 +1,9 @@
 import axios from "axios"
 import { BREATHECODE_HOST, RIGOBOT_HOST } from "./constants"
+import { Lesson } from "../components/LessonItem"
+import { randomUUID } from "./creatorUtils"
 
-type ParsedLesson = {
-  id: string
-  title: string
-  type: string
-  description: string
-  duration?: number
-}
-
-export function parseLesson(input: string): ParsedLesson | null {
+export function parseLesson(input: string, previous: Lesson[]): Lesson | null {
   const pattern = /^([\d.]+)\s*-\s*(.*?)\s*\[(\w+):\s*(.+)\]$/
   const match = input.match(pattern)
 
@@ -17,12 +11,28 @@ export function parseLesson(input: string): ParsedLesson | null {
 
   const [, index, title, type, description] = match
 
+  const alreadyExistsIndex = previous.findIndex(
+    (lesson) => lesson.id === index && lesson.title === title
+  )
+
+  if (alreadyExistsIndex !== -1) {
+    return {
+      id: index,
+      uid: previous[alreadyExistsIndex].uid,
+      title: title.trim(),
+      type: type.trim().toUpperCase() as "READ" | "CODE" | "QUIZ",
+      description: description.trim(),
+      duration: previous[alreadyExistsIndex].duration,
+    }
+  }
+
   return {
     id: index,
     title: title.trim(),
-    type: type.trim().toUpperCase(),
+    type: type.trim().toUpperCase() as "READ" | "CODE" | "QUIZ",
     description: description.trim(),
     duration: 2,
+    uid: randomUUID(),
   }
 }
 

package/src/creator/src/utils/store.ts

@@ -23,22 +23,28 @@ type Auth = {
 export type Syllabus = {
   lessons: Lesson[]
   courseInfo: FormState
-  uploadedFiles: {
-    name: string
-    text: string
-  }[]
 }
 
 type Consumables = {
   [key: string]: number
 }
 
+export type UploadedFile = {
+  name: string
+  text: string
+}
 type Store = {
   auth: Auth
   formState: FormState
   setAuth: (auth: Auth) => void
-  syllabus: Syllabus
-  setSyllabus: (syllabus: Partial<Syllabus>) => void
+  // syllabus: Syllabus
+  uploadedFiles: UploadedFile[]
+  setUploadedFiles: (uploadedFiles: UploadedFile[]) => void
+
+  history: Syllabus[]
+  undo: () => void
+  push: (syllabus: Syllabus) => void
+  // setSyllabus: (syllabus: Partial<Syllabus>) => void
   setFormState: (formState: Partial<FormState>) => void
   consumables: Consumables
   setConsumables: (consumables: Partial<Consumables>) => void
@@ -71,20 +77,24 @@ const useStore = create<Store>()(
       setFormState: (formState: Partial<FormState>) =>
         set((state) => ({ formState: { ...state.formState, ...formState } })),
 
-      syllabus: {
-        lessons: [],
-        courseInfo: {
-          description: "",
-          duration: 0,
-          targetAudience: "",
-          hasContentIndex: false,
-          contentIndex: "",
-          isCompleted: false,
-          currentStep: "description",
-          title: "",
-          variables: [],
-        },
-        uploadedFiles: [],
+      setUploadedFiles: (uploadedFiles) =>
+        set(() => ({
+          uploadedFiles: [...uploadedFiles],
+        })),
+      uploadedFiles: [],
+      history: [],
+      push: (syllabus: Syllabus) => {
+        set((state) => ({
+          history: [...state.history, syllabus],
+        }))
+      },
+
+      undo: () => {
+        set((state) => {
+          return {
+            history: state.history.slice(0, -1),
+          }
+        })
       },
       consumables: {},
       setConsumables: (consumables: Partial<Consumables>) =>
@@ -99,8 +109,7 @@ const useStore = create<Store>()(
             },
           }
         }),
-      setSyllabus: (syllabus: Partial<Syllabus>) =>
-        set((state) => ({ syllabus: { ...state.syllabus, ...syllabus } })),
+
       setAuth: (auth: Auth) => set({ auth }),
     }),
     {