@learnpack/learnpack 5.0.68 → 5.0.70

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

@@ -0,0 +1,202 @@
+import { useEffect, useState, useRef } from "react"
+import useStore, { Syllabus } from "../../utils/store"
+import { Lesson, LessonItem } from "../LessonItem"
+import { SVGS } from "../../assets/svgs"
+import { TMessage } from "../Message"
+
+const ContentIndexHeader = ({
+  messages,
+  syllabus,
+}: {
+  messages: TMessage[]
+  syllabus: Syllabus
+}) => {
+  return (
+    <div>
+      <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>
+      <h3 className="text-sm text-gray-600 mt-2 font-bold">
+        {syllabus.courseInfo.title}
+      </h3>
+    </div>
+  )
+}
+
+export const GenerateButton = ({
+  handleSubmit,
+}: {
+  handleSubmit: () => void
+}) => {
+  return (
+    <div className="flex justify-end mt-6">
+      <button
+        onClick={async () => {
+          handleSubmit()
+        }}
+        className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 cursor-pointer flex items-center gap-2"
+      >
+        <span>I'm ready. Create the course for me!</span>
+        {SVGS.rigoSoftBlue}
+      </button>
+    </div>
+  )
+}
+export const ContentIndex = ({
+  prevLessons,
+  handleSubmit,
+  messages,
+}: {
+  prevLessons?: Lesson[]
+  handleSubmit: () => void
+  messages: TMessage[]
+}) => {
+  const syllabus = useStore((state) => state.syllabus)
+  const setSyllabus = useStore((state) => state.setSyllabus)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [showScrollHint, setShowScrollHint] = useState(false)
+
+  const handleRemove = (lesson: Lesson) => {
+    setSyllabus({
+      ...syllabus,
+      lessons: syllabus.lessons.filter(
+        (l) => l.id !== lesson.id && l.title !== lesson.title
+      ),
+    })
+  }
+
+  const handleChange = (id: string, newTitle: string) => {
+    setSyllabus({
+      ...syllabus,
+      lessons: syllabus.lessons.map((lesson) =>
+        lesson.id === id ? { ...lesson, title: newTitle } : lesson
+      ),
+    })
+  }
+
+  const addLessonAfter = (index: number, id: string) => {
+    const newLesson: Lesson = {
+      id: (parseFloat(id) + 0.1).toFixed(1),
+      title: "Hello World",
+      type: "READ",
+      duration: 2,
+      description: "Hello World",
+    }
+    const updated = [...syllabus.lessons]
+    updated.splice(index + 1, 0, newLesson)
+
+    setSyllabus({
+      lessons: updated,
+    })
+  }
+
+  useEffect(() => {
+    const container = containerRef.current
+
+    const checkScroll = () => {
+      if (container) {
+        const nearBottom =
+          container.scrollHeight >
+          container.clientHeight + container.scrollTop + 100
+
+        setShowScrollHint(nearBottom)
+      }
+    }
+
+    checkScroll()
+    container?.addEventListener("scroll", checkScroll)
+    return () => container?.removeEventListener("scroll", checkScroll)
+  }, [syllabus.lessons])
+
+  const scrollToBottom = (target: "bottom" | "continue") => {
+    if (target === "continue") {
+      const container = containerRef.current
+      if (container) {
+        const scrollStep = container.clientHeight * 0.8
+        container.scrollBy({ top: scrollStep, behavior: "smooth" })
+      }
+    } else {
+      const container = containerRef.current
+      if (container) {
+        container.scrollTo({ top: container.scrollHeight, behavior: "smooth" })
+      }
+    }
+  }
+
+  return (
+    <div className="relative ">
+      <ContentIndexHeader messages={messages} syllabus={syllabus} />
+      <div
+        ref={containerRef}
+        className=" space-y-3 overflow-y-auto max-h-[70vh] 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>
+              </div>
+            </div>
+          </div>
+        ))}
+        <GenerateButton handleSubmit={handleSubmit} />
+      </div>
+
+      {showScrollHint && (
+        <div className="pointer-events-none relative">
+          <div className="absolute bottom-0 left-0 w-full h-20 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" }}
+              onClick={() => scrollToBottom("continue")}
+              className="px-4 py-1 bg-white  text-sm rounded shadow hover:bg-blue-50 cursor-pointer pointer-events-auto font-bold flex items-center gap-2"
+            >
+              Continue scrolling
+              {SVGS.downArrow}
+            </button>
+            <button
+              style={{ color: "#0084FF" }}
+              onClick={() => scrollToBottom("bottom")}
+              className="px-4 py-1 bg-white  text-sm rounded shadow hover:bg-blue-50 cursor-pointer pointer-events-auto font-bold flex items-center gap-2"
+            >
+              Scroll to bottom
+              {SVGS.bottom}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,123 @@
+import { useRef, useState } from "react"
+import useStore from "../../utils/store"
+import { TMessage } from "../Message"
+import FileUploader from "../FileUploader"
+import { SVGS } from "../../assets/svgs"
+import { Message } from "../Message"
+
+export const Sidebar = ({
+  messages,
+  sendPrompt,
+  handleSubmit,
+}: {
+  messages: TMessage[]
+  sendPrompt: (prompt: string) => void
+  handleSubmit: () => void
+}) => {
+  const inputRef = useRef<HTMLTextAreaElement>(null)
+  const syllabus = useStore((state) => state.syllabus)
+  const setSyllabus = useStore((state) => state.setSyllabus)
+
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <>
+      {!isOpen && (
+        <button
+          className="fixed  top-2 left-2 z-50 lg:hidden bg-white p-1 rounded shadow-md cursor-pointer"
+          onClick={() => setIsOpen(true)}
+        >
+          ☰
+        </button>
+      )}
+
+      <div
+        className={`fixed z-40 top-0 left-0 h-full w-4/5 max-w-sm bg-learnpack-blue text-sm text-gray-700 border-r overflow-y-auto scrollbar-hide p-6 transition-transform duration-300 ease-in-out lg:relative lg:transform-none lg:w-1/3 ${
+          isOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
+        }`}
+      >
+        {isOpen && (
+          <button
+            className="lg:hidden bg-white p-1 rounded shadow-md mb-4 cursor-pointer absolute top-2 left-2"
+            onClick={() => setIsOpen(false)}
+          >
+            ✕
+          </button>
+        )}
+        {/* This should have the same width as the input area */}
+        <div className="space-y-2 mb-6 ">
+          <p className="w-full bg-white p-2 rounded">
+            If you're satisfied, type "OK" in the chat.
+          </p>
+          <p className="w-full bg-white p-2 rounded">
+            If not, use the chat to give more context.
+          </p>
+        </div>
+
+        <div className="space-y-2 pb-32 h-[70%] overflow-y-auto scrollbar-hide">
+          {messages.map((message, index) => (
+            <Message
+              key={index}
+              type={message.type}
+              content={message.content}
+            />
+          ))}
+        </div>
+
+        <div className="relative w-full rounded-md bg-white text-gray-700 h-24">
+          <textarea
+            ref={inputRef}
+            style={{ resize: "none" }}
+            className="w-full h-full p-2"
+            placeholder="How can Learnpack help you?"
+            autoFocus
+            onKeyUp={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault()
+                sendPrompt(inputRef.current?.value || "")
+                inputRef.current!.value = ""
+              }
+              if (
+                e.key.toLowerCase() === "k" &&
+                inputRef.current?.value.toLowerCase().trim() === "ok"
+              ) {
+                e.preventDefault()
+                handleSubmit()
+              }
+            }}
+          />
+          <div className="absolute bottom-2 right-2 flex gap-1 items-center">
+            <div className="relative inline-block">
+              {syllabus.uploadedFiles?.length > 0 && (
+                <span
+                  className="absolute -top-1 right-0 inline-flex items-center justify-center w-3 h-3 text-[10px] text-white bg-blue-200 rounded-full hover:bg-red-300 cursor-pointer"
+                  title="Remove uploaded files"
+                  onClick={() => {
+                    setSyllabus({ ...syllabus, uploadedFiles: [] })
+                  }}
+                >
+                  {syllabus.uploadedFiles?.length}
+                </span>
+              )}
+              <FileUploader
+                onResult={(res) => {
+                  setSyllabus({
+                    ...syllabus,
+                    uploadedFiles: [...syllabus.uploadedFiles, ...res],
+                  })
+                }}
+              />
+            </div>
+
+            <button
+              className="cursor-pointer blue-on-hover flex items-center justify-center w-6 h-6"
+              onClick={() => sendPrompt(inputRef.current?.value || "")}
+            >
+              {SVGS.send}
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,134 @@
+import React, { useRef, useState } from "react"
+import { useShallow } from "zustand/react/shallow"
+import useStore from "../../utils/store"
+import { interactiveCreation } from "../../utils/rigo"
+import {
+  parseLesson,
+  uploadFileToBucket,
+  useConsumableCall,
+} from "../../utils/lib"
+import {
+  createLearnJson,
+  processExercise,
+  slugify,
+  randomUUID,
+} from "../../utils/creatorUtils"
+
+import Loader from "../Loader"
+import { TMessage } from "../Message"
+import { Lesson } from "../LessonItem"
+import { ConsumablesManager } from "../ConsumablesManager"
+import toast from "react-hot-toast"
+import { ContentIndex } from "./ContentIndex"
+import { Sidebar } from "./Sidebar"
+
+const SyllabusEditor: React.FC = () => {
+  const [messages, setMessages] = useState<TMessage[]>([])
+  const [isGenerating, setIsGenerating] = useState(false)
+  const prevLessons = useRef<Lesson[]>([])
+  const { syllabus, setSyllabus, auth } = useStore(
+    useShallow((state) => ({
+      syllabus: state.syllabus,
+      setSyllabus: state.setSyllabus,
+      auth: state.auth,
+    }))
+  )
+
+  const sendPrompt = async (prompt: string) => {
+    setMessages([
+      ...messages,
+      { type: "user", content: prompt },
+      { type: "assistant", content: "" },
+    ])
+    prevLessons.current = syllabus.lessons
+    const res = await interactiveCreation(auth.rigoToken, {
+      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)
+    )
+    setSyllabus({
+      ...syllabus,
+      lessons: lessons,
+      courseInfo: {
+        ...syllabus.courseInfo,
+        title: res.parsed.title || syllabus.courseInfo.title,
+      },
+    })
+    setMessages((prev) => {
+      const newMessages = [...prev]
+      newMessages[newMessages.length - 1].content = res.parsed.aiMessage
+      return newMessages
+    })
+  }
+
+  const handleSubmit = async () => {
+    const success = await useConsumableCall(auth.bcToken, "ai-generation")
+    if (!success) {
+      toast.error("You don't have enough credits to generate a course!")
+      return
+    }
+    setIsGenerating(true)
+
+    const lessonsPromises = syllabus.lessons.map((lesson) =>
+      processExercise(
+        auth.rigoToken,
+        syllabus.lessons,
+        JSON.stringify(syllabus.courseInfo),
+        lesson,
+        "courses/" +
+          slugify(syllabus.courseInfo.title || randomUUID()) +
+          "/exercises"
+      )
+    )
+    await Promise.all(lessonsPromises)
+
+    const learnJson = createLearnJson(syllabus.courseInfo)
+    await uploadFileToBucket(
+      JSON.stringify(learnJson),
+      "courses/" +
+        slugify(syllabus.courseInfo.title || randomUUID()) +
+        "/learn.json"
+    )
+    setIsGenerating(false)
+
+    window.location.href = `/?slug=${slugify(
+      syllabus.courseInfo.title || "exercises"
+    )}&token=${auth.bcToken}`
+  }
+
+  return isGenerating ? (
+    <Loader
+      listeningTo="course-generation"
+      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 ">
+      <ConsumablesManager />
+
+      <Sidebar
+        messages={messages}
+        sendPrompt={sendPrompt}
+        handleSubmit={handleSubmit}
+      />
+
+      <div className="w-full p-8 space-y-6">
+        <ContentIndex
+          prevLessons={prevLessons.current}
+          handleSubmit={handleSubmit}
+          messages={messages}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default SyllabusEditor

package/src/creator/src/index.css

@@ -88,15 +88,12 @@ h1 {
 .loader-icon {
   width: 40px;
   height: 40px;
-
-  border: 2px solid var(--loader-color);
-  border-top-color: transparent;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.loader-icon::after {
+/* .loader-icon::after {
   content: "";
   display: block;
   width: 100%;
@@ -106,11 +103,10 @@ h1 {
   height: 100%;
   border: 2px solid var(--gray-text);
   border-top: 2px solid var(--learnpack-blue);
-  /* background-color: red; */
 
   border-radius: 50%;
   animation: spin 2s linear infinite;
-}
+} */
 
 @keyframes glowing {
   0% {

package/src/creator/src/main.tsx

@@ -3,7 +3,7 @@ import { createRoot } from "react-dom/client"
 import { BrowserRouter, Route, Routes } from "react-router"
 import "./index.css"
 import App from "./App.tsx"
-import SyllabusEditor from "./components/SyllabusEditor.tsx"
+import SyllabusEditor from "./components/syllabus/SyllabusEditor.tsx"
 import { Toaster } from "react-hot-toast"
 
 createRoot(document.getElementById("root")!).render(

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

@@ -9,7 +9,8 @@ export type FormState = {
   hasContentIndex: boolean
   contentIndex: string
   isCompleted: boolean
-  currentStep: number
+  variables: string[]
+  currentStep: string
   title?: string
 }
 
@@ -18,7 +19,7 @@ type Auth = {
   rigoToken: string
   userId: string
 }
-type Syllabus = {
+export type Syllabus = {
   lessons: Lesson[]
   courseInfo: FormState
   uploadedFiles: {
@@ -57,7 +58,14 @@ const useStore = create<Store>()(
         hasContentIndex: false,
         contentIndex: "",
         isCompleted: false,
-        currentStep: 0,
+        currentStep: "description",
+        variables: [
+          "description",
+          "duration",
+          "login",
+          "targetAudience",
+          "hasContentIndex",
+        ],
       },
       setFormState: (formState: Partial<FormState>) =>
         set((state) => ({ formState: { ...state.formState, ...formState } })),
@@ -71,8 +79,9 @@ const useStore = create<Store>()(
           hasContentIndex: false,
           contentIndex: "",
           isCompleted: false,
-          currentStep: 0,
+          currentStep: "description",
           title: "",
+          variables: [],
         },
         uploadedFiles: [],
       },