@learnpack/learnpack 5.0.66 → 5.0.68

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

@@ -1,159 +1,55 @@
 import React, { useRef, useState } from "react"
 import { SVGS } from "../assets/svgs"
 import { useShallow } from "zustand/react/shallow"
-import useStore, { FormState } from "../utils/store"
+import useStore from "../utils/store"
+import { interactiveCreation } from "../utils/rigo"
 import {
-  checkReadability,
-  interactiveCreation,
-  makeReadmeReadable,
-  readmeCreator,
-} from "../utils/rigo"
-import { parseLesson, uploadFileToBucket } from "../utils/lib"
+  parseLesson,
+  uploadFileToBucket,
+  useConsumableCall,
+} from "../utils/lib"
+import {
+  createLearnJson,
+  processExercise,
+  slugify,
+  randomUUID,
+} from "../utils/creatorUtils"
 
 import Loader from "./Loader"
-
-const slugify = (text: string) => {
-  return text
-    .toLowerCase()
-    .replace(/ /g, "-")
-    .replace(/[^\w.-]+/g, "")
-}
-
-const createLearnJson = (courseInfo: FormState) => {
-  const learnJson = {
-    slug: slugify(courseInfo.title || randomUUID()),
-    title: {
-      us: courseInfo.title,
-    },
-    description: {
-      us: courseInfo.description,
-    },
-    grading: "isolated",
-  }
-  return learnJson
-}
-
-const PARAMS = {
-  expected_grade_level: "6",
-  max_fkgl: 8,
-  max_words: 200,
-  max_rewrite_attempts: 3,
-  max_title_length: 50,
-}
-async function processExercise(
-  rigoToken: string,
-  steps: Lesson[],
-  packageContext: string,
-  exercise: Lesson,
-  exercisesDir: string
-): Promise<string> {
-  //   const tid = toast.loading("Generating lesson...")
-  const readme = await readmeCreator(rigoToken, {
-    title: `${exercise.id} - ${exercise.title}`,
-    output_lang: "en",
-    list_of_exercises: JSON.stringify(steps),
-    tutorial_description: packageContext,
-    lesson_description: exercise.description,
-    kind: exercise.type.toLowerCase(),
-  })
-
-  console.log(exercise.id, "ID")
-
-  const duration = exercise.duration
-  let attempts = 0
-  let readability = checkReadability(readme.parsed.content, 200, duration || 1)
-
-  while (
-    readability.fkglResult.fkgl > PARAMS.max_fkgl &&
-    attempts < PARAMS.max_rewrite_attempts
-  ) {
-    // Console.warning(
-    //   `The lesson ${exTitle} has as readability score of  ${
-    //     readability.fkglResult.fkgl
-    //   } . It exceeds the maximum of words per minute. Rewriting it... (Attempt ${
-    //     attempts + 1
-    //   })`
-    // )
-
-    // eslint-disable-next-line
-    const reducedReadme = await makeReadmeReadable(rigoToken, {
-      lesson: readability.body,
-      number_of_words: readability.minutes.toString(),
-      expected_number_words: PARAMS.max_words.toString(),
-      fkgl_results: JSON.stringify(readability.fkglResult),
-      expected_grade_level: PARAMS.expected_grade_level,
-    })
-
-    // console.log("REDUCED README START", reducedReadme, "REDUCED README END")
-
-    if (!reducedReadme) break
-
-    readability = checkReadability(
-      reducedReadme.parsed.content,
-      PARAMS.max_words,
-      duration || 1
-    )
-
-    attempts++
-  }
-
-  //   Console.success(
-  //     `After ${attempts} attempts, the lesson ${exTitle} has a readability score of ${
-  //       readability.fkglResult.fkgl
-  //     } using FKGL. And it has ${readability.minutes.toFixed(
-  //       2
-  //     )} minutes of reading time.`
-  //   )
-
-  const readmeFilename = "README.md"
-  await uploadFileToBucket(
-    readability.newMarkdown,
-    `${exercisesDir}/${slugify(
-      exercise.id + "-" + exercise.title
-    )}/${readmeFilename}`
+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>
   )
-
-  if (exercise.type.toLowerCase() === "code") {
-    // const codeFile = await createCodeFile(rigoToken, {
-    //   readme: readability.newMarkdown,
-    //   tutorial_info: packageContext,
-    // })
-    // fs.writeFileSync(
-    //   path.join(
-    //     exerciseDir,
-    //     `app.${codeFile.parsed.extension.replace(".", "")}`
-    //   ),
-    //   codeFile.parsed.content
-    // )
-  }
-
-  //   toast.success("Lesson generated successfully", { id: tid })
-  return readability.newMarkdown
-}
-
-const randomUUID = () => {
-  return Math.random().toString(36).substring(2, 15)
-}
-
-// types.ts
-export interface Lesson {
-  id: string
-  title: string
-  type: "READ" | "CODE" | "QUIZ"
-  description: string
-  duration?: number
-}
-
-type TMessage = {
-  type: "user" | "assistant"
-  content: string
 }
 
 const SyllabusEditor: React.FC = () => {
-  const inputRef = useRef<HTMLInputElement>(null)
+  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,
@@ -195,7 +91,12 @@ const SyllabusEditor: React.FC = () => {
   }
 
   const sendPrompt = async (prompt: string) => {
-    setMessages([...messages, { type: "user", content: prompt }])
+    setMessages([
+      ...messages,
+      { type: "user", content: prompt },
+      { type: "assistant", content: "" },
+    ])
+    prevLessons.current = syllabus.lessons
     const res = await interactiveCreation(auth.rigoToken, {
       courseInfo: JSON.stringify(syllabus),
       prevInteractions:
@@ -204,7 +105,9 @@ const SyllabusEditor: React.FC = () => {
           .join("\n") + `\nUSER: ${prompt}`,
     })
     console.log(res, "RES")
-    const lessons = res.parsed.listOfSteps.map((step: any) => parseLesson(step))
+    const lessons: Lesson[] = res.parsed.listOfSteps.map((step: any) =>
+      parseLesson(step)
+    )
     setSyllabus({
       ...syllabus,
       lessons: lessons,
@@ -213,14 +116,16 @@ const SyllabusEditor: React.FC = () => {
         title: res.parsed.title || syllabus.courseInfo.title,
       },
     })
-    setMessages((prev) => [
-      ...prev,
-      { type: "assistant", content: res.parsed.aiMessage },
-    ])
+    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,
@@ -250,29 +155,24 @@ const SyllabusEditor: React.FC = () => {
 
   return isGenerating ? (
     <Loader
-      icon={SVGS.aiStars}
+      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">
-        <div className="p-4 border rounded-md bg-white shadow-sm">
+      <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>
-          <p className="mt-2 text-gray-500">We recommend:</p>
-          <ul className="mt-2 space-y-1 text-blue-500">
-            <li>
-              <a href="#">Make it have more readings</a>
-            </li>
-            <li>
-              <a href="#">Make it shorter</a>
-            </li>
-          </ul>
         </div>
-        <div className="mt-10 space-y-2">
+
+        <div className="mt-10 space-y-2 pb-16">
           {messages.map((message, index) => (
             <Message
               key={index}
@@ -281,29 +181,76 @@ It may take a moment..."
             />
           ))}
         </div>
-        <input
-          ref={inputRef}
-          className="mt-10 w-full p-2 border rounded-md text-gray-400 bg-white"
-          placeholder="How can Learnpack help you?"
-          onKeyUp={(e) => {
-            if (e.key === "Enter") {
-              sendPrompt(inputRef.current?.value || "")
-              inputRef.current!.value = ""
-            }
-          }}
-        />
+
+        <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">
-            I've created a detailed structure for your course.
+            {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">
-            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.
+            {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}
@@ -320,12 +267,21 @@ It may take a moment..."
                 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"
+                    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>
@@ -335,97 +291,10 @@ It may take a moment..."
           ))}
         </div>
 
-        <div className="flex justify-between mt-6">
-          <button className="text-blue-600 hover:underline text-sm">
-            Skip
-          </button>
-          <button
-            onClick={handleSubmit}
-            className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700"
-          >
-            Next
-          </button>
-        </div>
+        <GenerateButton handleSubmit={handleSubmit} />
       </div>
     </div>
   )
 }
 
 export default SyllabusEditor
-
-interface LessonItemProps {
-  lesson: Lesson
-  index: string
-  onChange: (id: string, newTitle: string) => void
-  onRemove: (id: string) => void
-}
-
-const LessonItem: React.FC<LessonItemProps> = ({
-  lesson,
-  index,
-  onChange,
-  onRemove,
-}) => {
-  const [isEditing, setIsEditing] = useState(false)
-
-  return (
-    <div className="flex items-center space-x-2 border border-gray-200 rounded-md p-3">
-      <span className="index-circle">{index}</span>
-      <span className="text-gray-500 text-sm">
-        {lesson.type[0] + lesson.type.slice(1).toLowerCase()} ●
-      </span>
-
-      {isEditing ? (
-        <input
-          value={lesson.title}
-          onChange={(e) => onChange(lesson.id, e.target.value)}
-          onBlur={() => setIsEditing(false)}
-          autoFocus
-          className="flex-1 bg-white border border-gray-300 rounded-md px-2 py-1 text-sm"
-        />
-      ) : (
-        <span className="flex-1 text-sm text-gray-800">{lesson.title}</span>
-      )}
-
-      <span className="text-sm text-gray-600 bg-blue-100 px-2 py-1 rounded-full">
-        {lesson.duration} min
-      </span>
-
-      <button
-        onClick={() => setIsEditing(!isEditing)}
-        className="text-gray-500 hover:text-blue-500"
-      >
-        {SVGS.pen}
-      </button>
-      <button
-        onClick={() => onRemove(lesson.id)}
-        className="text-red-500 hover:text-red-700"
-      >
-        {SVGS.trash}
-      </button>
-    </div>
-  )
-}
-
-const Message: React.FC<TMessage> = ({ type, content }) => {
-  const isAI = type === "assistant"
-
-  return (
-    <div
-      className={`flex items-start space-x-2 p-3 rounded-md border ${
-        isAI
-          ? "bg-gray-50 border-gray-300 text-gray-800"
-          : "bg-blue-50 border-blue-200 text-blue-900"
-      }`}
-    >
-      <span
-        className={`text-xs font-bold px-2 py-1 rounded ${
-          isAI ? "bg-gray-200 text-gray-800" : "bg-blue-200 text-blue-900"
-        }`}
-      >
-        {isAI ? "AI" : "YOU"}
-      </span>
-      <p className="text-sm leading-relaxed">{content}</p>
-    </div>
-  )
-}

package/src/creator/src/index.css

@@ -17,6 +17,7 @@
   --soft-blue: #f3fafd;
   --gray-text: #6883b4;
   --learnpack-blue: #02a9ea;
+  --learnpack-light-blue: #c7f3fd;
 }
 
 a {
@@ -66,3 +67,66 @@ h1 {
 .scrollbar-hide {
   scrollbar-width: none !important;
 }
+
+.loader {
+  display: flex;
+  /* flex-direction: column; */
+  align-items: center;
+  gap: 10px;
+  justify-content: center;
+  animation: glowing 1000ms linear infinite;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.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 {
+  content: "";
+  display: block;
+  width: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
+  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% {
+    opacity: 0.6;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.blue-on-hover:hover {
+  svg {
+    fill: var(--learnpack-blue);
+
+    path {
+      fill: var(--learnpack-blue);
+    }
+  }
+}