@learnpack/learnpack 5.0.71 → 5.0.75

package/src/creator/src/components/Login.tsx

@@ -1,132 +1,45 @@
 import { useEffect, useState } from "react"
-import { BREATHECODE_HOST, RIGOBOT_HOST } from "../utils/constants"
+import { BREATHECODE_HOST } from "../utils/constants"
 import { SVGS } from "../assets/svgs"
 import toast from "react-hot-toast"
 import useStore from "../utils/store"
 import { useShallow } from "zustand/react/shallow"
-import { checkParams } from "../utils/lib"
-
-type LoginInfo = {
-  email: string
-  password: string
-}
-
-const getRigobotJSON = async (breathecodeToken: string) => {
-  const rigoUrl = `${RIGOBOT_HOST}/v1/auth/me/token?breathecode_token=${breathecodeToken}`
-  const rigoResp = await fetch(rigoUrl)
-  if (!rigoResp.ok) {
-    throw new Error("Unable to obtain Rigobot token")
-  }
-  const rigobotJson = await rigoResp.json()
-  return rigobotJson
-}
-const validateUser = async (breathecodeToken: string) => {
-  const config = {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Token ${breathecodeToken}`,
-    },
-  }
-
-  const res = await fetch(`${BREATHECODE_HOST}/v1/auth/user/me`, config)
-  if (!res.ok) {
-    console.log("ERROR", res)
-    return null
-  }
-  const json = await res.json()
-
-  if ("roles" in json) {
-    delete json.roles
-  }
-  if ("permissions" in json) {
-    delete json.permissions
-  }
-  if ("settings" in json) {
-    delete json.settings
-  }
-
-  return json
-}
-
-const login4Geeks = async (loginInfo: LoginInfo) => {
-  const url = `${BREATHECODE_HOST}/v1/auth/login/`
-
-  const res = await fetch(url, {
-    body: JSON.stringify(loginInfo),
-    method: "post",
-    headers: {
-      "Content-Type": "application/json",
-    },
-  })
-
-  if (!res.ok) {
-    throw Error("Unable to login with provided credentials")
-  }
-
-  const json = await res.json()
-
-  const rigoJson = await getRigobotJSON(json.token)
-
-  const user = await validateUser(json.token)
-  const returns = { ...json, rigobot: { ...rigoJson }, user }
-
-  return returns
-}
-
-export const loginWithToken = async (token: string) => {
-  const rigoJson = await getRigobotJSON(token)
-
-  const user = await validateUser(token)
-
-  const returns = { rigobot: { ...rigoJson }, ...user }
-
-  return returns
-}
+import { checkParams, login4Geeks, loginWithToken } from "../utils/lib"
 
 export default function Login({ onFinish }: { onFinish: () => void }) {
   const [email, setEmail] = useState("")
   const [password, setPassword] = useState("")
   const [isLoading, setIsLoading] = useState(false)
-
   const [showForm, setShowForm] = useState(false)
 
   const { setAuth } = useStore(
-    useShallow((state) => ({
-      setAuth: state.setAuth,
-    }))
+    useShallow((state) => ({ setAuth: state.setAuth }))
   )
 
-  const login = async (e: any) => {
-    setIsLoading(true)
-
-    const tid = toast.loading("Logging in...")
+  const login = async (e: React.FormEvent) => {
     e.preventDefault()
+    setIsLoading(true)
+    const tid = toast.loading("Logging in…")
 
     if (!email || !password) {
-      //   toast.error(t("please-fill-all-fields"))
       setIsLoading(false)
+      toast.error("Please fill all fields", { id: tid })
       return
     }
 
-    const isLoggedId = await login4Geeks({
-      email: email,
-      password: password,
-    })
-
-    if (!isLoggedId) {
+    const resp = await login4Geeks({ email, password })
+    if (!resp) {
       setIsLoading(false)
-      toast.error("Unable to login with provided credentials", { id: tid })
+      toast.error("Invalid credentials", { id: tid })
       return
     }
 
     toast.success("Logged in successfully", { id: tid })
-
     setAuth({
-      bcToken: isLoggedId.token,
-      userId: isLoggedId.user.id,
-      rigoToken: isLoggedId.rigobot.key,
-      user: isLoggedId.user,
+      bcToken: resp.token,
+      userId: resp.user.id,
+      rigoToken: resp.rigobot.key,
+      user: resp.user,
     })
     setIsLoading(false)
     onFinish()
@@ -137,49 +50,46 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
   }
 
   function getCurrentUrlWithQueryParams() {
-    // let currentUrl = window.location.origin + window.location.pathname
-
     return window.location.href
   }
 
   const redirectGithub = () => {
-    let currentUrl = getCurrentUrlWithQueryParams()
-
-    window.location.href = `${BREATHECODE_HOST}/v1/auth/github/?url=${stringToBase64(
-      currentUrl
-    )}`
+    const url = stringToBase64(getCurrentUrlWithQueryParams())
+    window.location.href = `${BREATHECODE_HOST}/v1/auth/github/?url=${url}`
   }
 
   useEffect(() => {
-    verifySession()
-  }, [])
-
-  const verifySession = async () => {
-    const { token } = checkParams()
-    if (token) {
-      const user = await loginWithToken(token)
-
-      if (user) {
-        setAuth({
-          bcToken: token,
-          userId: user.id,
-          rigoToken: user.rigobot.key,
-          user: user,
-        })
-        onFinish()
+    ;(async () => {
+      const { token } = checkParams()
+      if (token) {
+        const user = await loginWithToken(token)
+        if (user) {
+          setAuth({
+            bcToken: token,
+            userId: user.id,
+            rigoToken: user.rigobot.key,
+            user,
+          })
+          onFinish()
+        }
       }
-    }
-  }
+    })()
+  }, [])
 
   return (
-    <>
-      <div className="max-w-sm mx-auto mt-10 bg-white p-8 rounded-xl shadow-md text-center">
+    <div
+      className="fixed inset-0 bg-black/50 flex items-center justify-center z-1000"
+      onClick={onFinish}
+    >
+      <div
+        className="bg-white p-8 rounded-xl shadow-md max-w-sm w-full"
+        onClick={(e) => e.stopPropagation()}
+      >
         <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"
+          className="w-full border border-gray-300 py-2 rounded-md font-semibold flex items-center justify-center gap-2 mb-4"
         >
-          {SVGS.github}
-          LOGIN WITH GITHUB
+          {SVGS.github} LOGIN WITH GITHUB
         </button>
 
         <div className="flex items-center mb-4">
@@ -205,14 +115,14 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
             <div className="flex gap-2 mt-4">
               <button
                 type="submit"
-                className="flex-1 bg-sky-500 text-white py-2 rounded-md font-semibold cursor-pointer  "
+                className="flex-1 bg-sky-500 text-white py-2 rounded-md font-semibold"
               >
                 {isLoading ? "Logging in..." : "Log in"}
               </button>
               <button
                 type="button"
                 onClick={() => setShowForm(false)}
-                className="flex-1 border border-sky-500 text-sky-600 py-2 rounded-md font-semibold cursor-pointer"
+                className="flex-1 border border-sky-500 text-sky-600 py-2 rounded-md font-semibold"
               >
                 Skip
               </button>
@@ -230,11 +140,12 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
         ) : (
           <button
             onClick={() => setShowForm(true)}
-            className="w-full bg-blue-600 text-white py-2 rounded-md font-semibold cursor-pointer"
+            className="w-full bg-blue-600 text-white py-2 rounded-md font-semibold"
           >
             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>
@@ -248,6 +159,6 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
           </div>
         </div>
       </div>
-    </>
+    </div>
   )
 }

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

@@ -3,6 +3,8 @@ import useStore, { Syllabus } from "../../utils/store"
 import { Lesson, LessonItem } from "../LessonItem"
 import { SVGS } from "../../assets/svgs"
 import { TMessage } from "../Message"
+import Loader from "../Loader"
+import { motion, AnimatePresence } from "framer-motion"
 
 const ContentIndexHeader = ({
   messages,
@@ -11,22 +13,48 @@ const ContentIndexHeader = ({
   messages: TMessage[]
   syllabus: Syllabus
 }) => {
+  const isFirst =
+    messages.filter((m) => m.type === "assistant" && m.content.length > 0)
+      .length === 2
+
+  const headerText = isFirst
+    ? "I've created a detailed structure for your course."
+    : "I've updated the structure based on your feedback."
+
+  const subText = isFirst
+    ? `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"
+
   return (
     <div className="mt-2">
-      <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>
+      <AnimatePresence mode="wait">
+        <motion.h2
+          key={headerText}
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 10 }}
+          transition={{ duration: 0.2 }}
+          className="text-lg font-semibold"
+        >
+          {headerText}
+        </motion.h2>
+      </AnimatePresence>
+
+      <AnimatePresence mode="wait">
+        <motion.p
+          key={subText}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2, delay: 0.1 }}
+          className="text-sm text-gray-600 mt-1"
+        >
+          {subText}
+        </motion.p>
+      </AnimatePresence>
+
       <h3 className="text-sm text-gray-600 mt-2 font-bold">
         {syllabus.courseInfo.title}
       </h3>
@@ -34,6 +62,8 @@ const ContentIndexHeader = ({
   )
 }
 
+export default ContentIndexHeader
+
 export const GenerateButton = ({
   handleSubmit,
 }: {
@@ -57,10 +87,12 @@ export const ContentIndex = ({
   prevLessons,
   handleSubmit,
   messages,
+  isThinking,
 }: {
   prevLessons?: Lesson[]
   handleSubmit: () => void
   messages: TMessage[]
+  isThinking: boolean
 }) => {
   const syllabus = useStore((state) => state.syllabus)
   const setSyllabus = useStore((state) => state.setSyllabus)
@@ -141,42 +173,48 @@ export const ContentIndex = ({
         ref={containerRef}
         className=" space-y-3 overflow-y-auto max-h-[80vh] pr-2 scrollbar-hide relative pb-5"
       >
-        {syllabus.lessons.map((lesson, index) => (
-          <div key={lesson.id}>
-            <LessonItem
-              key={lesson.id + index + lesson.title}
-              lesson={lesson}
-              onChange={handleChange}
-              onRemove={() => handleRemove(lesson)}
-              isNew={Boolean(
-                prevLessons &&
-                  prevLessons.length > 0 &&
-                  !prevLessons.some(
-                    (l) =>
-                      l.id === lesson.id &&
-                      l.title === lesson.title &&
-                      l.type === lesson.type
-                  )
-              )}
-            />
-            <div className="relative h-6">
-              <div className="absolute left-1/2 -translate-x-1/2 -top-3">
-                <button
-                  onClick={() => addLessonAfter(index, lesson.id)}
-                  className="w-6 h-6 flex items-center justify-center bg-blue-100 text-blue-600 rounded hover:bg-blue-200 shadow-sm text-sm font-semibold cursor-pointer"
-                >
-                  +
-                </button>
+        {isThinking ? (
+          <Loader text="Thinking..." minheight="min-h-[70vh]" />
+        ) : (
+          <>
+            {syllabus.lessons.map((lesson, index) => (
+              <div key={lesson.id}>
+                <LessonItem
+                  key={lesson.id + index + lesson.title}
+                  lesson={lesson}
+                  onChange={handleChange}
+                  onRemove={() => handleRemove(lesson)}
+                  isNew={Boolean(
+                    prevLessons &&
+                      prevLessons.length > 0 &&
+                      !prevLessons.some(
+                        (l) =>
+                          l.id === lesson.id &&
+                          l.title === lesson.title &&
+                          l.type === lesson.type
+                      )
+                  )}
+                />
+                <div className="relative h-6">
+                  <div className="absolute left-1/2 -translate-x-1/2 -top-3">
+                    <button
+                      onClick={() => addLessonAfter(index, lesson.id)}
+                      className="w-6 h-6 flex items-center justify-center bg-blue-100 text-blue-600 rounded hover:bg-blue-200 shadow-sm text-sm font-semibold cursor-pointer"
+                    >
+                      +
+                    </button>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        ))}
-        <GenerateButton handleSubmit={handleSubmit} />
+            ))}
+            <GenerateButton handleSubmit={handleSubmit} />
+          </>
+        )}
       </div>
 
-      {showScrollHint && (
+      {showScrollHint && !isThinking && (
         <div className="pointer-events-none relative">
-          <div className="absolute bottom-0 left-0 w-full h-50 bg-gradient-to-t from-white to-transparent z-10" />
+          <div className="absolute bottom-0 left-0 w-full h-60 bg-gradient-to-t from-white to-transparent z-10" />
           <div className="absolute bottom-3 left-0 w-full flex justify-center z-20">
             <button
               style={{ color: "#0084FF" }}

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

@@ -6,12 +6,15 @@ import {
   parseLesson,
   uploadFileToBucket,
   useConsumableCall,
+  validateTokens,
+  extractImagesFromMarkdown,
 } from "../../utils/lib"
 import {
   createLearnJson,
   processExercise,
   slugify,
   randomUUID,
+  processImage,
 } from "../../utils/creatorUtils"
 
 import Loader from "../Loader"
@@ -21,6 +24,8 @@ import { ConsumablesManager } from "../ConsumablesManager"
 import toast from "react-hot-toast"
 import { ContentIndex } from "./ContentIndex"
 import { Sidebar } from "./Sidebar"
+import Login from "../Login"
+import { eventBus } from "../../utils/eventBus"
 
 const SyllabusEditor: React.FC = () => {
   const [messages, setMessages] = useState<TMessage[]>([
@@ -30,14 +35,14 @@ const SyllabusEditor: React.FC = () => {
     },
     {
       type: "assistant",
-      content: "If not, use the chat to give more context.",
-    },
-    {
-      type: "user",
-      content: "OK",
+      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'",
     },
   ])
   const [isGenerating, setIsGenerating] = useState(false)
+  const [showLoginModal, setShowLoginModal] = useState(false)
+  const [isThinking, setIsThinking] = useState(false)
+
   const prevLessons = useRef<Lesson[]>([])
   const { syllabus, setSyllabus, auth } = useStore(
     useShallow((state) => ({
@@ -48,20 +53,22 @@ const SyllabusEditor: React.FC = () => {
   )
 
   const sendPrompt = async (prompt: string) => {
+    setIsThinking(true)
+
     setMessages([
       ...messages,
       { type: "user", content: prompt },
       { type: "assistant", content: "" },
     ])
     prevLessons.current = syllabus.lessons
-    const res = await interactiveCreation(auth.rigoToken, {
+    const res = await interactiveCreation({
       courseInfo: JSON.stringify(syllabus),
       prevInteractions:
         messages
           .map((message) => `${message.type}: ${message.content}`)
           .join("\n") + `\nUSER: ${prompt}`,
     })
-    console.log(res, "RES")
+
     const lessons: Lesson[] = res.parsed.listOfSteps.map((step: any) =>
       parseLesson(step)
     )
@@ -78,9 +85,19 @@ const SyllabusEditor: React.FC = () => {
       newMessages[newMessages.length - 1].content = res.parsed.aiMessage
       return newMessages
     })
+    setIsThinking(false)
   }
 
   const handleSubmit = async () => {
+    if (!auth.bcToken || !auth.rigoToken) {
+      setShowLoginModal(true)
+      return
+    }
+    const isValid = await validateTokens(auth.bcToken)
+    if (!isValid) {
+      setShowLoginModal(true)
+      return
+    }
     const success = await useConsumableCall(auth.bcToken, "ai-generation")
     if (!success) {
       toast.error("You don't have enough credits to generate a course!")
@@ -88,18 +105,35 @@ const SyllabusEditor: React.FC = () => {
     }
     setIsGenerating(true)
 
+    const tutorialDir =
+      "courses/" + slugify(syllabus.courseInfo.title || randomUUID())
     const lessonsPromises = syllabus.lessons.map((lesson) =>
       processExercise(
         auth.rigoToken,
         syllabus.lessons,
         JSON.stringify(syllabus.courseInfo),
         lesson,
-        "courses/" +
-          slugify(syllabus.courseInfo.title || randomUUID()) +
-          "/exercises"
+        tutorialDir + "/exercises"
       )
     )
-    await Promise.all(lessonsPromises)
+    const readmeContents = await Promise.all(lessonsPromises)
+
+    let imagesArray: any[] = []
+
+    for (const content of readmeContents) {
+      imagesArray = [...imagesArray, ...extractImagesFromMarkdown(content)]
+    }
+
+    eventBus.emit("course-generation", {
+      message: "📷 Generating images...",
+    })
+
+    const imagePromises = imagesArray.map(
+      async (image: { alt: string; url: string }) => {
+        return processImage(tutorialDir, image.url, image.alt, auth.rigoToken)
+      }
+    )
+    await Promise.all(imagePromises)
 
     const learnJson = createLearnJson(syllabus.courseInfo)
     await uploadFileToBucket(
@@ -118,13 +152,21 @@ const SyllabusEditor: React.FC = () => {
   return isGenerating ? (
     <Loader
       listeningTo="course-generation"
-      icon={<img src={"creator/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..."
     />
   ) : (
     <div className="flex w-full bg-white rounded-md shadow-md overflow-hidden h-screen ">
+      {showLoginModal && (
+        <Login
+          onFinish={() => {
+            setShowLoginModal(false)
+          }}
+        />
+      )}
+
       <ConsumablesManager />
 
       <Sidebar
@@ -138,6 +180,7 @@ It may take a moment..."
           prevLessons={prevLessons.current}
           handleSubmit={handleSubmit}
           messages={messages}
+          isThinking={isThinking}
         />
       </div>
     </div>

package/src/creator/src/index.css

@@ -126,3 +126,18 @@ h1 {
     }
   }
 }
+
+.border-learnpack-blue {
+  border-color: var(--learnpack-blue);
+}
+
+.red-ball {
+  width: 16px;
+  height: 16px;
+  border: 2px solid white;
+  background-color: #eb5757;
+  border-radius: 50%;
+  position: absolute;
+  top: -10px;
+  left: 10px;
+}

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

@@ -1,6 +1,11 @@
 import { Lesson } from "../components/LessonItem"
 import { eventBus } from "./eventBus"
-import { uploadFileToBucket } from "./lib"
+import {
+  generateImage,
+  getFilenameFromUrl,
+  uploadFileToBucket,
+  uploadImageToBucket,
+} from "./lib"
 import { makeReadmeReadable, readmeCreator, checkReadability } from "./rigo"
 import { FormState } from "./store"
 
@@ -80,8 +85,6 @@ export async function processExercise(
       expected_grade_level: PARAMS.expected_grade_level,
     })
 
-    // console.log("REDUCED README START", reducedReadme, "REDUCED README END")
-
     if (!reducedReadme) break
 
     readability = checkReadability(
@@ -134,3 +137,30 @@ export async function processExercise(
 export const randomUUID = () => {
   return Math.random().toString(36).substring(2, 15)
 }
+
+export const processImage = async (
+  tutorialDir: string,
+  url: string,
+  description: string,
+  rigoToken: string
+) => {
+  try {
+    const filename = getFilenameFromUrl(url)
+
+    const imagePath = tutorialDir + "/.learn" + "/assets/" + filename
+
+    eventBus.emit("course-generation", {
+      message: `🖼️ Generating image ${imagePath}`,
+    })
+
+    const res = await generateImage(rigoToken, { prompt: description })
+    await uploadImageToBucket(res.image_url, imagePath)
+
+    eventBus.emit("course-generation", {
+      message: `✅ Image ${imagePath} generated successfully!`,
+    })
+    return true
+  } catch {
+    return false
+  }
+}