@learnpack/learnpack 5.0.68 → 5.0.69

package/{lib/creatorDist/assets/index-t6ma_gVm.css → src/creatorDist/assets/index-C_Rp91QE.css}

@@ -17,6 +17,15 @@
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-border-style: solid;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
       --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-shadow: 0 0 #0000;
@@ -346,6 +355,12 @@
 }
 @layer components;
 @layer utilities {
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
+  .pointer-events-none {
+    pointer-events: none;
+  }
   .absolute {
     position: absolute;
   }
@@ -364,15 +379,58 @@
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
   .bottom-2 {
     bottom: calc(var(--spacing) * 2);
   }
+  .bottom-3 {
+    bottom: calc(var(--spacing) * 3);
+  }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
   .left-1\/2 {
     left: 50%;
   }
+  .z-10 {
+    z-index: 10;
+  }
+  .z-20 {
+    z-index: 20;
+  }
+  .container {
+    width: 100%;
+  }
+  @media (min-width: 40rem) {
+    .container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .container {
+      max-width: 96rem;
+    }
+  }
   .m-0 {
     margin: calc(var(--spacing) * 0);
   }
@@ -436,6 +494,9 @@
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
+  .h-20 {
+    height: calc(var(--spacing) * 20);
+  }
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
@@ -445,8 +506,8 @@
   .h-screen {
     height: 100vh;
   }
-  .max-h-\[60vh\] {
-    max-height: 60vh;
+  .max-h-\[70vh\] {
+    max-height: 70vh;
   }
   .max-h-\[300px\] {
     max-height: 300px;
@@ -660,15 +721,34 @@
   .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));
+  }
+  .from-white {
+    --tw-gradient-from: var(--color-white);
+    --tw-gradient-stops: var(
+      --tw-gradient-via-stops,
+      var(--tw-gradient-position),
+      var(--tw-gradient-from) var(--tw-gradient-from-position),
+      var(--tw-gradient-to) var(--tw-gradient-to-position)
+    );
+  }
+  .to-transparent {
+    --tw-gradient-to: transparent;
+    --tw-gradient-stops: var(
+      --tw-gradient-via-stops,
+      var(--tw-gradient-position),
+      var(--tw-gradient-from) var(--tw-gradient-from-position),
+      var(--tw-gradient-to) var(--tw-gradient-to-position)
+    );
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
-  .p-4 {
-    padding: calc(var(--spacing) * 4);
-  }
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
@@ -785,6 +865,12 @@
   .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);
@@ -806,6 +892,9 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
   @media (hover: hover) {
+    .hover\:bg-blue-50:hover {
+      background-color: var(--color-blue-50);
+    }
     .hover\:bg-blue-200:hover {
       background-color: var(--color-blue-200);
     }
@@ -998,6 +1087,48 @@ h1 {
   inherits: false;
   initial-value: solid;
 }
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
 @property --tw-leading {
   syntax: "*";
   inherits: false;

package/src/creatorDist/index.html

@@ -10,8 +10,8 @@
     />
 
     <title>Learnpack Creator: Craft tutorials in seconds!</title>
-    <script type="module" crossorigin src="/creator/assets/index-B01XTAAq.js"></script>
-    <link rel="stylesheet" crossorigin href="/creator/assets/index-t6ma_gVm.css">
+    <script type="module" crossorigin src="/creator/assets/index-C7bLE5wU.js"></script>
+    <link rel="stylesheet" crossorigin href="/creator/assets/index-C_Rp91QE.css">
   </head>
   <body>
     <div id="root"></div>

package/src/utils/api.ts

@@ -351,11 +351,11 @@ export interface TAcademy {
 
 const with_crud_asset_roles = new Set([
   "content_writer",
-  "growth_manager",
   "syllabus_coordinator",
   "country_manager",
-  "community_manager",
   "carrer_support_head",
+  "admin",
+  "student",
 ])
 
 export const listUserAcademies = async (

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

@@ -1,300 +0,0 @@
-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 { LessonItem, Lesson } from "./LessonItem"
-import FileUploader from "./FileUploader"
-import { ConsumablesManager } from "./ConsumablesManager"
-import toast from "react-hot-toast"
-
-const GenerateButton = ({ handleSubmit }: { handleSubmit: () => void }) => {
-  const auth = useStore((state) => state.auth)
-  return (
-    <div className="flex justify-end  mt-6">
-      <button
-        onClick={async () => {
-          const success = await useConsumableCall(auth.bcToken, "ai-generation")
-          if (success) {
-            handleSubmit()
-          } else {
-            toast.error("You don't have enough credits to generate a course.")
-          }
-        }}
-        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>
-  )
-}
-
-const SyllabusEditor: React.FC = () => {
-  const inputRef = useRef<HTMLTextAreaElement>(null)
-  //   const navigate = useNavigate()
-  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 handleRemove = (id: string) => {
-    setSyllabus({
-      ...syllabus,
-      lessons: syllabus.lessons.filter((lesson) => lesson.id !== id),
-    })
-  }
-
-  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).toString(),
-      title: "Hello World",
-      type: "READ",
-      duration: 2,
-      description: "Hello World",
-    }
-    const updated = [...syllabus.lessons]
-    updated.splice(index + 1, 0, newLesson)
-
-    setSyllabus({
-      lessons: updated,
-    })
-  }
-
-  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 () => {
-    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 */}
-      <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">
-        <div className="p-4 rounded-md bg-white shadow-sm">
-          <p>We generated this syllabus based on your answers.</p>
-          <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>
-
-        <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 = ""
-              }
-            }}
-          />
-          <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>
-
-      {/* Editor */}
-      <div className="w-2/3 p-8 space-y-6">
-        <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>
-
-        {/* Lessons */}
-        <div className="space-y-3 overflow-y-auto max-h-[60vh] pr-2 scrollbar-hide">
-          {syllabus.lessons.map((lesson, index) => (
-            <div key={lesson.id}>
-              <LessonItem
-                key={lesson.id}
-                index={lesson.id}
-                lesson={lesson}
-                onChange={handleChange}
-                onRemove={handleRemove}
-                isNew={
-                  prevLessons.current.length > 0 &&
-                  !prevLessons.current.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>
-          ))}
-        </div>
-
-        <GenerateButton handleSubmit={handleSubmit} />
-      </div>
-    </div>
-  )
-}
-
-export default SyllabusEditor