@learnpack/learnpack 5.0.67 → 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/lib.ts

@@ -1,4 +1,5 @@
 import axios from "axios"
+import { BREATHECODE_HOST } from "./constants"
 
 type ParsedLesson = {
   id: string
@@ -40,3 +41,82 @@ export const checkParams = () => {
   const token = urlParams.get("token")
   return { token }
 }
+
+export async function getConsumables(token: string): Promise<any> {
+  const url = `${BREATHECODE_HOST}/v1/payments/me/service/consumable?virtual=true`
+
+  const headers = {
+    Authorization: `Token ${token}`,
+  }
+
+  try {
+    const response = await axios.get(url, { headers })
+    return response.data
+  } catch (error) {
+    console.error("Error fetching consumables:", error)
+    throw error
+  }
+}
+
+type ConsumableSlug =
+  | "ai-conversation-message"
+  | "ai-compilation"
+  | "ai-generation"
+  | "ai-course-generation"
+
+export async function useConsumableCall(
+  breathecodeToken: string,
+  consumableSlug: ConsumableSlug = "ai-conversation-message"
+): Promise<boolean> {
+  const url = `${BREATHECODE_HOST}/v1/payments/me/service/${consumableSlug}/consumptionsession`
+
+  const headers = {
+    Authorization: `Token ${breathecodeToken}`,
+  }
+
+  try {
+    const response = await axios.put(url, {}, { headers })
+
+    if (response.status >= 200 && response.status < 300) {
+      console.log(response.data)
+      console.log(`Successfully consumed ${consumableSlug}`)
+      return true
+    } else {
+      console.error(`Request failed with status code: ${response.status}`)
+      console.error(`Response: ${response.data}`)
+      return false
+    }
+  } catch (error) {
+    console.error(`Error consuming ${consumableSlug}:`, error)
+    return false
+  }
+}
+
+type ConsumableItem = {
+  id: number
+  how_many: number
+  unit_type: string
+  valid_until: string | null
+}
+
+type VoidEntry = {
+  id: number
+  slug: string
+  balance: { unit: number }
+  items: ConsumableItem[]
+}
+
+export const parseConsumables = (
+  voids: VoidEntry[]
+): Record<string, number> => {
+  const result: Record<string, number> = {}
+
+  voids.forEach((entry) => {
+    const maxHowMany = entry.items.length
+      ? Math.max(...entry.items.map((item) => item.how_many))
+      : 0
+    result[entry.slug] = maxHowMany
+  })
+
+  return result
+}

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: {
@@ -27,6 +27,10 @@ type Syllabus = {
   }[]
 }
 
+type Consumables = {
+  [key: string]: number
+}
+
 type Store = {
   auth: Auth
   formState: FormState
@@ -34,6 +38,8 @@ type Store = {
   syllabus: Syllabus
   setSyllabus: (syllabus: Partial<Syllabus>) => void
   setFormState: (formState: Partial<FormState>) => void
+  consumables: Consumables
+  setConsumables: (consumables: Partial<Consumables>) => void
 }
 
 const useStore = create<Store>()(
@@ -70,6 +76,19 @@ const useStore = create<Store>()(
         },
         uploadedFiles: [],
       },
+      consumables: {},
+      setConsumables: (consumables: Partial<Consumables>) =>
+        set((state) => {
+          const sanitized: Consumables = Object.fromEntries(
+            Object.entries(consumables).map(([k, v]) => [k, v ?? 0])
+          )
+          return {
+            consumables: {
+              ...state.consumables,
+              ...sanitized,
+            },
+          }
+        }),
       setSyllabus: (syllabus: Partial<Syllabus>) =>
         set((state) => ({ syllabus: { ...state.syllabus, ...syllabus } })),
       setAuth: (auth: Auth) => set({ auth }),