@learnpack/learnpack 5.0.234 → 5.0.240

package/src/creator/src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react"
+import { useEffect, useState } from "react"
 import StepWizard from "./components/StepWizard"
 import SelectableCard from "./components/SelectableCard"
 import Loader from "./components/Loader"
@@ -25,6 +25,7 @@ import TurnstileChallenge from "./components/TurnstileChallenge"
 import ResumeCourseModal from "./components/ResumeCourseModal"
 import { possiblePurposes, PurposeSelector } from "./components/PurposeSelector"
 import { useTranslation } from "react-i18next"
+import NotificationListener from "./components/NotificationListener"
 
 function App() {
   const navigate = useNavigate()
@@ -64,6 +65,8 @@ function App() {
     }))
   )
 
+  const [notificationId, setNotificationId] = useState<string>("")
+
   useEffect(() => {
     if (formState.isCompleted) {
       handleCreateTutorial()
@@ -111,7 +114,6 @@ function App() {
       cleanAll()
     }
 
-    
     if (description) {
       console.log("description", description)
       setFormState({
@@ -187,51 +189,9 @@ function App() {
         formState.purpose || "learnpack-lesson-writer",
         auth.rigoToken && isAuthenticated ? false : true
       )
-      const lessons = res.parsed.listOfSteps.map((lesson: any) => {
-        return parseLesson(lesson, [])
-      })
-
-      push({
-        lessons,
-        courseInfo: {
-          ...formState,
-          title: fixTitleLength(res.parsed.title),
-          description: res.parsed.description,
-          language: res.parsed.languageCode || formState.language || "en",
-          technologies:
-            res.parsed.technologies.length > 0
-              ? res.parsed.technologies
-              : ["education", "quizzes"],
-        },
-      })
+      console.log("RES", res)
 
-      if (res.parsed.languageCode) {
-        i18n.changeLanguage(res.parsed.languageCode)
-      }
-
-      navigate("/creator/syllabus")
-      setFormState({
-        isCompleted: false,
-        currentStep: "description",
-      })
-      setMessages([
-        {
-          type: "user",
-          content: formState.description,
-        },
-        {
-          type: "assistant",
-          content: res.parsed.aiMessage,
-        },
-        {
-          type: "assistant",
-          content: t("contentIndex.okMessage"),
-        },
-        {
-          type: "assistant",
-          content: t("contentIndex.instructionsMessage"),
-        },
-      ])
+      setNotificationId(res.notificationId)
     } catch (error) {
       console.error(error, "ERROR CREATING TUTORIAL")
       toast.error("Something went wrong. Please try again.")
@@ -432,24 +392,69 @@ function App() {
     <>
       <ParamsChecker />
       {formState.isCompleted && history.length === 0 ? (
-        <Loader
-          text={t("loader.text")}
-          icon={<img src={RIGO_FLOAT_GIF} alt="rigo" className="w-20 h-20" />}
-        />
+        <>
+          <Loader
+            text={t("loader.text")}
+            icon={<img src={RIGO_FLOAT_GIF} alt="rigo" className="w-20 h-20" />}
+          />
+          {notificationId && (
+            <NotificationListener
+              onNotification={(res) => {
+                console.log("Async response", res)
+                toast.success("Initial course created successfully")
+                const lessons = res.parsed.listOfSteps.map((lesson: any) => {
+                  return parseLesson(lesson, [])
+                })
+
+                push({
+                  lessons,
+                  courseInfo: {
+                    ...formState,
+                    title: fixTitleLength(res.parsed.title),
+                    description: res.parsed.description,
+                    language:
+                      res.parsed.languageCode || formState.language || "en",
+                    technologies:
+                      res.parsed.technologies.length > 0
+                        ? res.parsed.technologies
+                        : ["education", "quizzes"],
+                  },
+                })
+
+                if (res.parsed.languageCode) {
+                  i18n.changeLanguage(res.parsed.languageCode)
+                }
+
+                setMessages([
+                  {
+                    type: "user",
+                    content: formState.description,
+                  },
+                  {
+                    type: "assistant",
+                    content: res.parsed.aiMessage,
+                  },
+                  {
+                    type: "assistant",
+                    content: t("contentIndex.okMessage"),
+                  },
+                  {
+                    type: "assistant",
+                    content: t("contentIndex.instructionsMessage"),
+                  },
+                ])
+                navigate("/creator/syllabus")
+                setFormState({
+                  isCompleted: false,
+                  currentStep: "description",
+                })
+              }}
+              notificationId={notificationId}
+            />
+          )}
+        </>
       ) : (
         <>
-          {/* {formState.language && (
-            <div className="flex flex-col items-center justify-center">
-              <p>
-                <span className="font-bold">Language:</span>{" "}
-                {formState.language}
-              </p>
-              <p>
-                <span className="font-bold">Technologies:</span>{" "}
-                {formState.technologies?.join(", ")}
-              </p>
-            </div>
-          )} */}
           {history.length > 0 && (
             <ResumeCourseModal
               onContinue={() => {

package/src/creator/src/components/LessonItem.tsx

@@ -15,6 +15,12 @@ export interface Lesson {
   duration?: number
 }
 
+const typeToEmoji: Record<string, string> = {
+  read: "📖",
+  code: "💻",
+  quiz: "🧠",
+}
+
 interface LessonItemProps {
   lesson: Lesson
   isNew: boolean
@@ -58,12 +64,12 @@ export const LessonItem: React.FC<LessonItemProps> = ({
       {mode === "teacher" && (
         <>
           <span className="index-circle">{cleanFloatString(lesson.id)}</span>
-          <span className="text-gray-500 text-sm">
-            {lesson.type[0] + lesson.type.slice(1).toLowerCase()} ●
-          </span>
         </>
       )}
 
+      <span className="text-gray-500 text-sm">
+        {typeToEmoji[lesson.type.toLowerCase()]}
+      </span>
       {isEditing ? (
         <input
           defaultValue={lesson.title}

package/src/creator/src/components/NotificationListener.tsx

@@ -0,0 +1,32 @@
+import { useEffect } from "react"
+import CreatorSocket from "../utils/socket"
+
+interface NotificationListenerProps {
+  notificationId: string
+  onNotification: (data: any) => void
+}
+
+const socketClient = new CreatorSocket("")
+
+const NotificationListener: React.FC<NotificationListenerProps> = ({
+  notificationId,
+  onNotification,
+}) => {
+  useEffect(() => {
+    console.log("NOTIFICATION ID listening", notificationId)
+    if (!notificationId) return
+
+    socketClient.connect()
+    socketClient.on(notificationId, onNotification)
+    socketClient.emit("registerNotification", { notificationId })
+
+    return () => {
+      socketClient.off(notificationId, onNotification)
+      socketClient.disconnect()
+    }
+  }, [notificationId, onNotification])
+
+  return null
+}
+
+export default NotificationListener

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

@@ -29,6 +29,7 @@ import { ParamsChecker } from "../ParamsChecker"
 import { randomUUID, slugify } from "../../utils/creatorUtils"
 import { RIGO_FLOAT_GIF } from "../../utils/constants"
 import { useTranslation } from "react-i18next"
+import NotificationListener from "../NotificationListener"
 
 const SyllabusEditor: React.FC = () => {
   const navigate = useNavigate()
@@ -60,6 +61,7 @@ const SyllabusEditor: React.FC = () => {
   const [isGenerating, setIsGenerating] = useState(false)
   const [showLoginModal, setShowLoginModal] = useState(false)
   const [isThinking, setIsThinking] = useState(false)
+  const [notificationId, setNotificationId] = useState<string>("")
 
   const syllabus = history[history.length - 1]
 
@@ -89,8 +91,6 @@ const SyllabusEditor: React.FC = () => {
   }, [])
 
   const checkSlug = async () => {
-    console.log("Checking slug")
-
     if (!syllabus.courseInfo.title) {
       toast.error("Please provide a title for the course")
       return
@@ -109,7 +109,6 @@ const SyllabusEditor: React.FC = () => {
       slug = slugify(newTitle)
       isAvailable = await isSlugAvailable(slug)
     }
-    console.log("Slug is available", slug)
 
     push({
       ...syllabus,
@@ -162,44 +161,9 @@ const SyllabusEditor: React.FC = () => {
         auth.rigoToken && isAuthenticated ? false : true
       )
 
-      const lessons: Lesson[] = res.parsed.listOfSteps.map((step: any) =>
-        parseLesson(step, syllabus.lessons)
-      )
-      push({
-        ...syllabus,
-        lessons: lessons,
-        courseInfo: {
-          ...syllabus.courseInfo,
-          title: fixTitleLength(res.parsed.title) || syllabus.courseInfo.title,
-          description:
-            res.parsed.description || syllabus.courseInfo.description,
-          language:
-            res.parsed.languageCode || syllabus.courseInfo.language || "en",
-          technologies:
-            res.parsed.technologies || syllabus.courseInfo.technologies || [],
-        },
-      })
-
-      if (res.parsed.languageCode) {
-        i18n.changeLanguage(res.parsed.languageCode)
-      }
-
-      const newMessages: TMessage[] = [
-        ...messages,
-        {
-          type: "user",
-          content: prompt,
-        },
-        {
-          type: "assistant",
-          content: res.parsed.aiMessage,
-        },
-      ]
-      setMessages(newMessages)
-      setIsThinking(false)
+      setNotificationId(res.notificationId)
     } catch (error) {
       console.error(error)
-      // Remove the last message
       const newMessages = [...messages]
       newMessages.pop()
       setMessages(newMessages as TMessage[])
@@ -248,7 +212,6 @@ const SyllabusEditor: React.FC = () => {
     }
 
     setIsGenerating(true)
-    console.log("Timeout set")
 
     const timeout = setTimeout(() => {
       cleanAll()
@@ -257,10 +220,8 @@ const SyllabusEditor: React.FC = () => {
       )}?token=${auth.bcToken}&language=${syllabus.courseInfo.language}`
     }, 8000)
     try {
-      console.log("Creating course")
       await createCourse(syllabus, tokenToUse, auth.bcToken)
     } catch (error) {
-      console.log("Failed to create course, clearing timeout")
       console.error("Failed to create course:", error)
       clearTimeout(timeout)
       setIsGenerating(false)
@@ -269,8 +230,6 @@ const SyllabusEditor: React.FC = () => {
 
   if (!syllabus) return null
 
-  console.log(syllabus, "SYLLABUS")
-
   return isGenerating ? (
     <>
       <Loader
@@ -284,6 +243,45 @@ It may take a moment..."
   ) : (
     <div className="flex w-full bg-white rounded-md shadow-md overflow-hidden h-screen ">
       <ParamsChecker />
+      <NotificationListener
+        onNotification={(res) => {
+          const lessons: Lesson[] = res.parsed.listOfSteps.map((step: any) =>
+            parseLesson(step, syllabus.lessons)
+          )
+          push({
+            ...syllabus,
+            lessons: lessons,
+            courseInfo: {
+              ...syllabus.courseInfo,
+              title:
+                fixTitleLength(res.parsed.title) || syllabus.courseInfo.title,
+              description:
+                res.parsed.description || syllabus.courseInfo.description,
+              language:
+                res.parsed.languageCode || syllabus.courseInfo.language || "en",
+              technologies:
+                res.parsed.technologies.length > 0
+                  ? res.parsed.technologies
+                  : syllabus.courseInfo.technologies || [],
+            },
+          })
+
+          if (res.parsed.languageCode) {
+            i18n.changeLanguage(res.parsed.languageCode)
+          }
+
+          setMessages((prev) => [
+            ...prev.filter((m) => Boolean(m.content)),
+            {
+              type: "assistant",
+              content: res.parsed.aiMessage,
+            },
+          ])
+          setIsThinking(false)
+          setNotificationId("")
+        }}
+        notificationId={notificationId}
+      />
       {showLoginModal && (
         <Login
           onFinish={() => {

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

@@ -14,8 +14,8 @@ export const slugify = (text: string) => {
     .replace(/^-+|-+$/g, "") // Trim hyphens from start/end
 }
 
-export const randomUUID = () => {
-  return Math.random().toString(36).substring(2, 15)
+export const randomUUID = (length = 15) => {
+  return Math.random().toString(36).substring(2, length)
 }
 
 export const processImage = async (

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

@@ -1,6 +1,7 @@
 import toast from "react-hot-toast"
 import { RIGOBOT_HOST, DEV_MODE } from "./constants"
 import axios, { AxiosError } from "axios"
+import { randomUUID } from "./creatorUtils"
 
 type TInteractiveCreationInputs = {
   courseInfo: string
@@ -14,6 +15,14 @@ export const publicInteractiveCreation = async (
   publicRequest: boolean = true
 ): Promise<any | null> => {
   try {
+    const randomUID = randomUUID(15)
+    const webhookUrl = `${
+      DEV_MODE
+        ? "https://9cw5zmww-3000.use2.devtunnels.ms"
+        : window.location.origin
+      // "https://9cw5zmww-3000.use2.devtunnels.ms"
+    }/notifications/${randomUID}`
+
     const response = await axios.post(
       `${RIGOBOT_HOST}/v1/prompting${
         publicRequest ? "/public" : ""
@@ -21,8 +30,8 @@ export const publicInteractiveCreation = async (
       {
         inputs: inputs,
         include_purpose_objective: true,
-        execute_async: false,
         purpose_slug: purposeSlug,
+        webhook_url: webhookUrl,
       },
       {
         headers: {
@@ -32,10 +41,10 @@ export const publicInteractiveCreation = async (
       }
     )
 
-    return response.data
+    return { res: response.data, notificationId: randomUID }
   } catch (error: unknown) {
     const err = error as AxiosError
-    console.log("error", err)
+    console.log("error trying to create course", err)
 
     if (err.response?.status === 403) {
       toast.error("You've reached the limit. Please log in to continue.")

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

@@ -53,7 +53,9 @@ type Store = {
   uploadedFiles: ParsedFile[]
   setUploadedFiles: (uploadedFiles: ParsedFile[]) => void
   messages: TMessage[]
-  setMessages: (messages: TMessage[]) => void
+  setMessages: (
+    messages: TMessage[] | ((prev: TMessage[]) => TMessage[])
+  ) => void
   cleanHistory: () => void
   history: Syllabus[]
   technologies: TTechnology[]
@@ -102,7 +104,16 @@ const useStore = create<Store>()(
       messages: [],
       technologies: [],
       setTechnologies: (technologies: TTechnology[]) => set({ technologies }),
-      setMessages: (messages: TMessage[]) => set({ messages }),
+      setMessages: (
+        messages: TMessage[] | ((prev: TMessage[]) => TMessage[])
+      ) => {
+        set((state) => ({
+          messages:
+            typeof messages === "function"
+              ? messages(state.messages)
+              : messages,
+        }))
+      },
       setFormState: (formState: Partial<FormState>) =>
         set((state) => ({ formState: { ...state.formState, ...formState } })),
       resetFormState: () =>