@learnpack/learnpack 5.0.68 → 5.0.69

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

@@ -0,0 +1,252 @@
+import React, { useRef, useState } from "react"
+import { SVGS } from "../../assets/svgs"
+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 { Message, TMessage } from "../Message"
+import { Lesson } from "../LessonItem"
+import FileUploader from "../FileUploader"
+import { ConsumablesManager } from "../ConsumablesManager"
+import toast from "react-hot-toast"
+import { ContentIndex } from "./ContentIndex"
+import { Syllabus } from "../../utils/store"
+
+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>
+  )
+}
+
+
+
+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)
+  return (
+    <div className="w-1/3 p-6 text-sm text-gray-700 border-r bg-learnpack-blue h-screen overflow-y-auto scrollbar-hide relative">
+      <p className="mt-2">If you're satisfied, type "OK" in the chat.</p>
+      <p className="mt-2">If not, use the chat to give more context.</p>
+
+      <div className="mt-10 space-y-2 pb-16">
+        {messages.map((message, index) => (
+          <Message key={index} type={message.type} content={message.content} />
+        ))}
+      </div>
+
+      <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 w-[90%] border rounded-md bg-white text-gray-400 resize-none 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 the pressed key is K or k
+            if (e.key === "K" || e.key === "k") {
+              e.preventDefault()
+
+              if (inputRef.current?.value.toLowerCase().trim() === "ok") {
+                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>
+  )
+}
+
+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={SVGS.rigoSoftBlue}
+      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 */}
+      <Sidebar
+        messages={messages}
+        sendPrompt={sendPrompt}
+        handleSubmit={handleSubmit}
+      />
+
+      <div className="w-2/3 p-8 space-y-6">
+        <ContentIndexHeader messages={messages} syllabus={syllabus} />
+        <ContentIndex
+          prevLessons={prevLessons.current}
+          handleSubmit={handleSubmit}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default SyllabusEditor

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

@@ -18,7 +18,7 @@ type Auth = {
   rigoToken: string
   userId: string
 }
-type Syllabus = {
+export type Syllabus = {
   lessons: Lesson[]
   courseInfo: FormState
   uploadedFiles: {