@learnpack/learnpack 5.0.70 → 5.0.72

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,10 +24,25 @@ 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[]>([])
+  const [messages, setMessages] = useState<TMessage[]>([
+    {
+      type: "assistant",
+      content: "If you're satisfied, type 'OK' in the chat.",
+    },
+    {
+      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'",
+    },
+  ])
   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) => ({
@@ -35,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)
     )
@@ -65,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!")
@@ -75,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(
@@ -112,6 +159,14 @@ 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
@@ -125,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/main.tsx

@@ -5,7 +5,6 @@ import "./index.css"
 import App from "./App.tsx"
 import SyllabusEditor from "./components/syllabus/SyllabusEditor.tsx"
 import { Toaster } from "react-hot-toast"
-
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <Toaster />

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

@@ -18,6 +18,7 @@ type Auth = {
   bcToken: string
   rigoToken: string
   userId: string
+  user: any
 }
 export type Syllabus = {
   lessons: Lesson[]
@@ -50,6 +51,7 @@ const useStore = create<Store>()(
         bcToken: "",
         rigoToken: "",
         userId: "",
+        user: null,
       },
       formState: {
         description: "",
@@ -62,7 +64,6 @@ const useStore = create<Store>()(
         variables: [
           "description",
           "duration",
-          "login",
           "targetAudience",
           "hasContentIndex",
         ],

package/src/creatorDist/assets/{index-Dqo9u2iR.css → index-BJ2JJzVC.css}

@@ -57,7 +57,6 @@
     --color-red-300: oklch(80.8% 0.114 19.571);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-700: oklch(50.5% 0.213 27.518);
-    --color-yellow-50: oklch(98.7% 0.026 102.212);
     --color-sky-500: oklch(68.5% 0.169 237.323);
     --color-sky-600: oklch(58.8% 0.158 241.966);
     --color-blue-50: oklch(97% 0.014 254.604);
@@ -78,6 +77,7 @@
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-800: oklch(27.8% 0.033 256.848);
     --color-gray-900: oklch(21% 0.034 264.665);
+    --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-sm: 24rem;
@@ -86,8 +86,6 @@
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
-    --text-xl: 1.25rem;
-    --text-xl--line-height: calc(1.75 / 1.25);
     --text-4xl: 2.25rem;
     --text-4xl--line-height: calc(2.5 / 2.25);
     --font-weight-medium: 500;
@@ -373,6 +371,9 @@
   .relative {
     position: relative;
   }
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
   .-top-1 {
     top: calc(var(--spacing) * -1);
   }
@@ -421,6 +422,9 @@
   .z-50 {
     z-index: 50;
   }
+  .z-1000 {
+    z-index: 1000;
+  }
   .container {
     width: 100%;
   }
@@ -455,9 +459,6 @@
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
-  .mx-auto {
-    margin-inline: auto;
-  }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -470,9 +471,6 @@
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
-  .mt-10 {
-    margin-top: calc(var(--spacing) * 10);
-  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
@@ -521,8 +519,11 @@
   .h-40 {
     height: calc(var(--spacing) * 40);
   }
-  .h-\[70\%\] {
-    height: 70%;
+  .h-60 {
+    height: calc(var(--spacing) * 60);
+  }
+  .h-\[85\%\] {
+    height: 85%;
   }
   .h-full {
     height: 100%;
@@ -530,12 +531,15 @@
   .h-screen {
     height: 100vh;
   }
-  .max-h-\[70vh\] {
-    max-height: 70vh;
+  .max-h-\[80vh\] {
+    max-height: 80vh;
   }
   .max-h-\[300px\] {
     max-height: 300px;
   }
+  .min-h-\[70vh\] {
+    min-height: 70vh;
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -717,6 +721,18 @@
   .border-transparent {
     border-color: #0000;
   }
+  .bg-black\/50 {
+    background-color: #00000080;
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/50 {
+      background-color: color-mix(
+        in oklab,
+        var(--color-black) 50%,
+        transparent
+      );
+    }
+  }
   .bg-blue-50 {
     background-color: var(--color-blue-50);
   }
@@ -744,9 +760,6 @@
   .bg-white {
     background-color: var(--color-white);
   }
-  .bg-yellow-50 {
-    background-color: var(--color-yellow-50);
-  }
   .bg-gradient-to-t {
     --tw-gradient-position: to top in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -829,10 +842,6 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
-  .text-xl {
-    font-size: var(--text-xl);
-    line-height: var(--tw-leading, var(--text-xl--line-height));
-  }
   .text-\[10px\] {
     font-size: 10px;
   }
@@ -897,12 +906,6 @@
   .opacity-30 {
     opacity: 0.3;
   }
-  .shadow {
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a),
-      0 1px 2px -1px var(--tw-shadow-color, #0000001a);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
-      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-md {
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a),
       0 2px 4px -2px var(--tw-shadow-color, #0000001a);
@@ -915,6 +918,17 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
       var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color,
+      text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via,
+      --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate,
+      filter, -webkit-backdrop-filter, backdrop-filter;
+    transition-timing-function: var(
+      --tw-ease,
+      var(--default-transition-timing-function)
+    );
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(
@@ -1091,6 +1105,19 @@ h1 {
 .blue-on-hover:hover svg path {
   fill: var(--learnpack-blue);
 }
+.border-learnpack-blue {
+  border-color: var(--learnpack-blue);
+}
+.red-ball {
+  background-color: #eb5757;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: -10px;
+  left: 10px;
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;