@learnpack/learnpack 5.0.71 → 5.0.72

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
+  }
+}

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

@@ -1,5 +1,5 @@
 import axios from "axios"
-import { BREATHECODE_HOST } from "./constants"
+import { BREATHECODE_HOST, RIGOBOT_HOST } from "./constants"
 
 type ParsedLesson = {
   id: string
@@ -26,7 +26,7 @@ export function parseLesson(input: string): ParsedLesson | null {
   }
 }
 
-// export const CREATOR_API_URL = "http://localhost:3000"
+export const CREATOR_API_URL = "http://localhost:3000"
 
 export const uploadFileToBucket = async (content: string, path: string) => {
   const response = await axios.post(`/upload`, {
@@ -35,6 +35,13 @@ export const uploadFileToBucket = async (content: string, path: string) => {
   })
   return response.data
 }
+export const uploadImageToBucket = async (imageUrl: string, path: string) => {
+  const response = await axios.post(`/upload-image`, {
+    image_url: imageUrl,
+    destination: path,
+  })
+  return response.data
+}
 
 export const checkParams = () => {
   const urlParams = new URLSearchParams(window.location.search)
@@ -120,3 +127,150 @@ export const parseConsumables = (
 
   return result
 }
+
+type LoginInfo = {
+  email: string
+  password: string
+}
+
+export 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
+}
+export 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
+}
+
+export 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
+}
+
+export const validateTokens = async (breathecodeToken: string) => {
+  const user = await validateUser(breathecodeToken)
+  console.log("USER", user)
+  if (!user) {
+    return false
+  }
+
+  const rigobotJson = await getRigobotJSON(breathecodeToken)
+  console.log("RIGOBOT", rigobotJson)
+
+  return true
+}
+
+export function extractImagesFromMarkdown(markdown: string) {
+  const imageRegex = /!\[([^\]]*)]\(([^)]+)\)/g
+  const images = []
+  let match
+
+  while ((match = imageRegex.exec(markdown)) !== null) {
+    const altText = match[1]
+    const url = match[2]
+    images.push({ alt: altText, url: url })
+  }
+
+  return images
+}
+
+export function getFilenameFromUrl(url: string): string {
+  try {
+    // 1) Use the URL constructor to strip off protocol/host/search/hash
+    const pathname = new URL(url, location.href).pathname
+    // 2) Grab everything after the last “/”
+    return pathname.substring(pathname.lastIndexOf("/") + 1)
+  } catch {
+    // Fallback for non-absolute URLs or invalid inputs
+    const clean = url.split("?")[0].split("#")[0]
+    return clean.substring(clean.lastIndexOf("/") + 1)
+  }
+}
+
+type TGenerateImageParams = {
+  prompt: string
+}
+
+export const generateImage = async (
+  token: string,
+  { prompt }: TGenerateImageParams
+) => {
+  try {
+    const response = await axios.post(
+      `${RIGOBOT_HOST}/v1/learnpack/tools/images`,
+      {
+        prompt,
+      },
+      {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: "Token " + token,
+        },
+      }
+    )
+
+    return response.data
+  } catch (error) {
+    console.error("Error generating image:", error)
+    return null
+  }
+}

package/src/creator/src/utils/rigo.ts

@@ -10,11 +10,11 @@ type TInteractiveCreationInputs = {
   prevInteractions: string
 }
 export const interactiveCreation = async (
-  token: string,
+  // token: string,
   inputs: TInteractiveCreationInputs
 ) => {
   const response = await axios.post(
-    `${RIGOBOT_HOST}/v1/prompting/completion/390/`,
+    `${RIGOBOT_HOST}/v1/prompting/public/completion/390/`,
     {
       inputs: inputs,
       include_purpose_objective: false,
@@ -23,7 +23,7 @@ export const interactiveCreation = async (
     {
       headers: {
         "Content-Type": "application/json",
-        Authorization: "Token " + token,
+        // Authorization: "Token " + token,
       },
     }
   )

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

@@ -64,7 +64,6 @@ const useStore = create<Store>()(
         variables: [
           "description",
           "duration",
-          "login",
           "targetAudience",
           "hasContentIndex",
         ],