@learnpack/learnpack 5.0.65 → 5.0.67

package/src/creator/src/assets/svgs.tsx

@@ -85,4 +85,142 @@ export const SVGS = {
       </g>
     </svg>
   ),
+  rigoSoftBlue: (
+    <svg
+      width="25"
+      height="15"
+      viewBox="0 0 18 11"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17.1812 3.46636H16.7418V3.32743C16.7418 2.09446 15.7417 1.09375 14.51 1.09375H13.3627L13.7718 1.85133C14.2502 1.94685 14.642 2.28548 14.8195 2.73699H2.64959C2.86173 2.20299 3.37477 1.82529 3.97439 1.82529H11.54L11.934 1.09592H2.96131C1.72743 1.09375 0.727339 2.09228 0.727339 3.32743V3.46636H0.287905C0.127717 3.46636 0 3.59443 0 3.75289V7.56252C0 7.72098 0.129882 7.84905 0.287905 7.84905H1.82051V7.99015C1.82051 8.13125 1.8703 8.26366 1.95256 8.36569C1.96338 8.38088 1.97637 8.39391 1.98936 8.40693C2.01533 8.43298 2.04348 8.45686 2.07378 8.47857C2.11924 8.51113 2.17119 8.535 2.22531 8.55237C2.27943 8.56974 2.33787 8.57842 2.39632 8.57842H2.54785H7.58078L8.27997 6.38815L8.59386 5.40047C8.63931 5.25721 8.83197 5.25721 8.87743 5.40047L9.19131 6.38815L9.89051 8.57842H14.9234H15.075C15.1637 8.57842 15.2481 8.55671 15.3239 8.51981C15.365 8.4981 15.404 8.47422 15.4408 8.44383C15.4689 8.41996 15.4949 8.39391 15.5187 8.36352C15.536 8.34181 15.5534 8.31793 15.5664 8.29405C15.6183 8.20505 15.6508 8.10086 15.6508 7.98798V7.84688H17.1812C17.3414 7.84688 17.4691 7.71881 17.4691 7.56035V3.75072C17.4691 3.59226 17.3392 3.46418 17.1812 3.46418V3.46636ZM15.2958 7.82301C15.2958 8.04008 15.1204 8.21374 14.9061 8.21374H10.0723L9.61992 6.96991L8.85578 4.87082C8.81466 4.75577 8.6523 4.75577 8.60901 4.87082L7.84487 6.96991L7.39245 8.21374H2.563C2.34653 8.21374 2.17336 8.03791 2.17336 7.82301V3.46853C2.17336 3.25145 2.3487 3.07779 2.563 3.07779H14.9061C15.1226 3.07779 15.2958 3.25362 15.2958 3.46853V7.82084V7.82301Z"
+        fill="url(#paint0_linear_1485_1767)"
+      />
+      <path
+        d="M2.6496 2.73592C2.86174 2.20193 3.37477 1.82422 3.97439 1.82422H11.54H3.97656C3.37694 1.82422 2.8639 2.20193 2.65176 2.73592H2.6496Z"
+        fill="#080B16"
+      />
+      <path
+        d="M14.8196 2.73722C14.6421 2.28788 14.2502 1.94707 13.7719 1.85156C14.2502 1.94707 14.6421 2.28571 14.8196 2.73722Z"
+        fill="#080B16"
+      />
+      <path
+        d="M13.0033 8.57837H9.89045L9.19125 6.3881L8.87737 5.40042C8.83191 5.25715 8.63925 5.25715 8.5938 5.40042L8.27991 6.3881L7.58072 8.57837H2.54779V9.49441C2.54779 10.2976 3.18638 10.951 3.97649 10.951H8.11973C13.7934 10.8403 13.0119 8.59573 13.0055 8.57837H13.0033Z"
+        fill="#B0EFFF"
+      />
+      <path
+        d="M8.11768 10.9507H13.4948C14.2827 10.9507 14.9235 10.2995 14.9235 9.49417V8.57812H13.0034C13.0099 8.59549 13.7914 10.84 8.11768 10.9507Z"
+        fill="url(#paint1_linear_1485_1767)"
+      />
+      <path
+        d="M13.0445 2.7362H14.8195C14.642 2.28469 14.2502 1.94606 13.7718 1.85055L13.3627 1.09296L12.8259 0.100939C12.7523 -0.0336463 12.5444 -0.0336463 12.473 0.100939L12.1028 0.784718L12.6224 1.8614C13.2718 2.26298 13.0488 2.72752 13.0445 2.7362Z"
+        fill="url(#paint2_linear_1485_1767)"
+      />
+      <path
+        d="M2.65176 2.73664H13.0445C13.0445 2.73664 13.2696 2.26342 12.6224 1.86184C12.6029 1.84881 12.5812 1.83579 12.5596 1.82493L12.1028 0.785156L11.9362 1.09557L11.5422 1.82493H3.97439C3.37477 1.82493 2.86174 2.20264 2.6496 2.73664H2.65176Z"
+        fill="#B0EFFF"
+      />
+      <path
+        d="M12.6202 1.86184L12.1007 0.785156L12.5575 1.82493C12.5791 1.83796 12.6008 1.84881 12.6202 1.86184Z"
+        fill="#C7F3FD"
+      />
+      <path
+        d="M14.9062 3.07812H2.56305C2.34658 3.07812 2.1734 3.25395 2.1734 3.46886V7.82117C2.1734 8.03824 2.34874 8.2119 2.56305 8.2119H7.39465L7.84708 6.96807L8.61122 4.86898C8.65234 4.75393 8.8147 4.75393 8.85799 4.86898L9.62213 6.96807L10.0746 8.2119H14.9083C15.1248 8.2119 15.298 8.03607 15.298 7.82117V3.46886C15.298 3.25178 15.1226 3.07812 14.9083 3.07812H14.9062ZM5.27758 3.82268V6.38414V7.30453C5.27758 7.50207 5.11523 7.6627 4.91391 7.6627C4.71259 7.6627 4.55024 7.50207 4.55024 7.30453V3.82268C4.55024 3.62515 4.71259 3.46451 4.91391 3.46451C5.11523 3.46451 5.27758 3.62515 5.27758 3.82268ZM12.9233 3.82268V6.38414V7.30453C12.9233 7.50207 12.7609 7.6627 12.5596 7.6627C12.3583 7.6627 12.196 7.50207 12.196 7.30453V3.82268C12.196 3.62515 12.3583 3.46451 12.5596 3.46451C12.7609 3.46451 12.9233 3.62515 12.9233 3.82268Z"
+        fill="#080B16"
+      />
+      <path
+        d="M4.91384 3.46484C4.71252 3.46484 4.55017 3.62548 4.55017 3.82301V7.30486C4.55017 7.5024 4.71252 7.66303 4.91384 7.66303C5.11516 7.66303 5.27751 7.5024 5.27751 7.30486V6.38664V3.82301C5.27751 3.62548 5.11516 3.46484 4.91384 3.46484Z"
+        fill="#E95B17"
+      />
+      <path
+        d="M12.5574 3.46484C12.3561 3.46484 12.1937 3.62548 12.1937 3.82301V7.30486C12.1937 7.5024 12.3561 7.66303 12.5574 7.66303C12.7587 7.66303 12.9211 7.5024 12.9211 7.30486V6.38664V3.82301C12.9211 3.62548 12.7587 3.46484 12.5574 3.46484Z"
+        fill="#0084FF"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_1485_1767"
+          x1="10.5789"
+          y1="0.294922"
+          x2="7.57889"
+          y2="8.97052"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#080B16" />
+          <stop offset="1" stopColor="#161F2C" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_1485_1767"
+          x1="8.11768"
+          y1="9.76334"
+          x2="14.9235"
+          y2="9.76334"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#B0EFFF" />
+          <stop offset="0.44" stopColor="#ADECFE" />
+          <stop offset="0.67" stopColor="#A5E4FE" />
+          <stop offset="0.85" stopColor="#98D7FD" />
+          <stop offset="1" stopColor="#86C5FD" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_1485_1767"
+          x1="11.2543"
+          y1="1.91784"
+          x2="13.5278"
+          y2="1.41473"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#B0EFFF" />
+          <stop offset="0.44" stopColor="#ADECFE" />
+          <stop offset="0.67" stopColor="#A5E4FE" />
+          <stop offset="0.85" stopColor="#98D7FD" />
+          <stop offset="1" stopColor="#86C5FD" />
+        </linearGradient>
+      </defs>
+    </svg>
+  ),
+  send: (
+    <svg
+      width="12"
+      height="15"
+      viewBox="0 0 12 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.12812 3.64814L0.384343 0.0378137C0.213539 -0.0696296 0 0.0647108 0 0.279307V5.34833C0 5.47075 0.0733163 5.57892 0.18082 5.61498L2.90314 6.52715L5.01075 7.23331C5.25193 7.31415 5.25193 7.68577 5.01075 7.76646L2.90314 8.47262L0.18082 9.38509C0.0733163 9.42114 0 9.52931 0 9.65173V14.7206C0 14.9354 0.213539 15.0695 0.384343 14.9622L6.12812 11.3519L11.8719 7.7416C12.0427 7.6343 12.0427 7.36576 11.8719 7.25847L6.12812 3.64814Z"
+        fill="#C7F3FD"
+      />
+    </svg>
+  ),
+  clip: (
+    <svg
+      fill="#C7F3FD"
+      width="20"
+      height="20"
+      viewBox="0 0 32 32"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>clip</title>
+      <path d="M5.469 16.688l8.75-8.75c0.094-0.094 0.844-0.844 2.031-1.25 1.656-0.531 3.344-0.094 4.688 1.25 1.375 1.344 1.781 3 1.25 4.656-0.375 1.188-1.156 2-1.25 2.094l-9.406 9.406c-1.625 1.625-5.688 3.719-9.438 0-3.719-3.719-1.594-7.813 0-9.406l10.094-10.125c0.375-0.375 0.969-0.375 1.344 0s0.375 0.969 0 1.344l-10.063 10.125c-0.156 0.125-3.313 3.406 0 6.719 3.219 3.219 6.375 0.344 6.719 0l9.406-9.438s0.531-0.531 0.781-1.281c0.313-1 0.094-1.875-0.781-2.75-1.875-1.875-3.688-0.313-4.031 0l-8.75 8.719c-0.313 0.313-0.531 0.844 0 1.375s1.031 0.281 1.344 0l6.063-6.063c0.375-0.344 1-0.344 1.344 0 0.375 0.375 0.375 1 0 1.375l-6.063 6.031c-0.844 0.813-2.563 1.469-4.031 0-1.5-1.469-0.844-3.219 0-4.031z"></path>
+    </svg>
+  ),
+  user: (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="6" r="4" stroke="#1C398E" strokeWidth="1.5" />
+      <path
+        d="M20 17.5C20 19.9853 20 22 12 22C4 22 4 19.9853 4 17.5C4 15.0147 7.58172 13 12 13C16.4183 13 20 15.0147 20 17.5Z"
+        stroke="#1C398E"
+        strokeWidth="1.5"
+      />
+    </svg>
+  ),
 }

package/src/creator/src/components/FileUploader.tsx

@@ -0,0 +1,91 @@
+import React, { useRef } from "react"
+import * as pdfjsLib from "pdfjs-dist"
+import mammoth from "mammoth"
+import { SVGS } from "../assets/svgs"
+import pdfWorker from "pdfjs-dist/build/pdf.worker?worker"
+
+pdfjsLib.GlobalWorkerOptions.workerPort = new pdfWorker()
+
+const allowedTypes = [
+  "application/pdf",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "text/plain",
+  "text/markdown",
+]
+
+export interface ParsedFile {
+  name: string
+  text: string
+}
+
+interface FileUploaderProps {
+  onResult: (files: ParsedFile[]) => void
+}
+
+const FileUploader: React.FC<FileUploaderProps> = ({ onResult }) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const extractText = async (file: File): Promise<ParsedFile> => {
+    const { type, name } = file
+
+    if (type === "application/pdf") {
+      const arrayBuffer = await file.arrayBuffer()
+      const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise
+      let text = ""
+
+      for (let i = 0; i < pdf.numPages; i++) {
+        const page = await pdf.getPage(i + 1)
+        const content = await page.getTextContent()
+        text += content.items.map((item: any) => item.str).join(" ") + "\n"
+      }
+
+      return { name, text }
+    }
+
+    if (
+      type ===
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+    ) {
+      const arrayBuffer = await file.arrayBuffer()
+      const { value } = await mammoth.extractRawText({ arrayBuffer })
+      return { name, text: value }
+    }
+
+    const text = await file.text()
+    return { name, text }
+  }
+
+  const handleFiles = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const inputFiles = e.target.files
+    if (!inputFiles) return
+
+    const files = Array.from(inputFiles).filter((file) =>
+      allowedTypes.includes(file.type)
+    )
+    const parsed = await Promise.all(files.map(extractText))
+    onResult(parsed)
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        className="cursor-pointer blue-on-hover flex items-center justify-center w-6 h-6"
+        onClick={() => inputRef.current?.click()}
+      >
+        {SVGS.clip}
+      </button>
+
+      <input
+        ref={inputRef}
+        type="file"
+        multiple
+        accept=".pdf,.docx,.txt,.md"
+        onChange={handleFiles}
+        style={{ display: "none" }}
+      />
+    </>
+  )
+}
+
+export default FileUploader

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

@@ -0,0 +1,70 @@
+import { useState } from "react"
+import { SVGS } from "../assets/svgs"
+
+export interface Lesson {
+  id: string
+  title: string
+  type: "READ" | "CODE" | "QUIZ"
+  description: string
+  duration?: number
+}
+
+interface LessonItemProps {
+  lesson: Lesson
+  index: string
+  isNew: boolean
+  onChange: (id: string, newTitle: string) => void
+  onRemove: (id: string) => void
+}
+
+export const LessonItem: React.FC<LessonItemProps> = ({
+  lesson,
+  index,
+  onChange,
+  onRemove,
+  isNew,
+}) => {
+  const [isEditing, setIsEditing] = useState(false)
+
+  return (
+    <div
+      className={`flex items-center space-x-2 border border-gray-200 rounded-md p-3 ${
+        isNew ? "bg-yellow-50" : ""
+      }`}
+    >
+      <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 cursor-pointer "
+      >
+        {SVGS.pen}
+      </button>
+      <button
+        onClick={() => onRemove(lesson.id)}
+        className="text-red-500 hover:text-red-700 cursor-pointer"
+      >
+        {SVGS.trash}
+      </button>
+    </div>
+  )
+}

package/src/creator/src/components/Loader.tsx

@@ -1,28 +1,73 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from "react"
+import { eventBus } from "../utils/eventBus"
 
 interface LoaderProps {
-  text: string;
-  icon?: React.ReactNode;
+  text: string
+  icon?: React.ReactNode
+  listeningTo?: string
+  initialBuffer?: string
 }
 
-const Loader: React.FC<LoaderProps> = ({ text, icon }) => {
+const Loader: React.FC<LoaderProps> = ({
+  text,
+  icon,
+  listeningTo,
+  initialBuffer,
+}) => {
+  const [buffer, setBuffer] = useState(initialBuffer || "")
+  const preRef = useRef<HTMLPreElement>(null)
+
+  useEffect(() => {
+    if (listeningTo) {
+      eventBus.on(listeningTo, (e: any) => {
+        setBuffer((prev) => prev + "\n" + e.message)
+      })
+    }
+    return () => {
+      if (listeningTo) {
+        eventBus.off(listeningTo)
+      }
+    }
+  }, [listeningTo])
+
+  useEffect(() => {
+    if (preRef.current) {
+      preRef.current.scrollTo({
+        top: preRef.current.scrollHeight,
+        behavior: "smooth",
+      })
+    }
+  }, [buffer])
+
   return (
     <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 text-center space-y-6">
-      <div className="text-blue-500 text-4xl animate-pulse">
-        {icon}
-      </div>
+      <div className="text-blue-500 text-4xl animate-pulse">{icon}</div>
       <p className="text-gray-800 text-lg whitespace-pre-line">{text}</p>
-      <div className="flex space-x-2 mt-2">
-        {[0, 1, 2, 3].map((i) => (
-          <span
-            key={i}
-            className="w-2 h-2 rounded-full bg-blue-400 opacity-30 animate-ping"
-            style={{ animationDelay: `${i * 0.2}s`, animationDuration: '1.2s' }}
-          />
-        ))}
-      </div>
+      {!buffer && (
+        <div className="flex space-x-2 mt-2">
+          {[0, 1, 2, 3].map((i) => (
+            <span
+              key={i}
+              className="w-2 h-2 rounded-full bg-blue-400 opacity-30 animate-ping"
+              style={{
+                animationDelay: `${i * 0.2}s`,
+                animationDuration: "1.2s",
+              }}
+            />
+          ))}
+        </div>
+      )}
+      {buffer && (
+        <pre
+          ref={preRef}
+          className="text-gray-800 text-sm  border border-blue-200  rounded-md p-3 font-sans max-h-[300px] overflow-y-auto w-full max-w-[700px] text-left"
+          style={{ scrollbarWidth: "none" }}
+        >
+          {buffer.trim()}
+        </pre>
+      )}
     </div>
-  );
-};
+  )
+}
 
-export default Loader;
+export default Loader

package/src/creator/src/components/Login.tsx

@@ -4,19 +4,13 @@ import { SVGS } from "../assets/svgs"
 import toast from "react-hot-toast"
 import useStore from "../utils/store"
 import { useShallow } from "zustand/react/shallow"
+import { checkParams } from "../utils/lib"
 
 type LoginInfo = {
   email: string
   password: string
 }
 
-const checkParams = () => {
-  const urlParams = new URLSearchParams(window.location.search)
-  const token = urlParams.get("token")
-
-  return { token }
-}
-
 const getRigobotJSON = async (breathecodeToken: string) => {
   const rigoUrl = `${RIGOBOT_HOST}/v1/auth/me/token?breathecode_token=${breathecodeToken}`
   const rigoResp = await fetch(rigoUrl)
@@ -80,7 +74,7 @@ const login4Geeks = async (loginInfo: LoginInfo) => {
   return returns
 }
 
-const loginWithToken = async (token: string) => {
+export const loginWithToken = async (token: string) => {
   const rigoJson = await getRigobotJSON(token)
 
   const user = await validateUser(token)
@@ -198,7 +192,7 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
 
         <button
           onClick={redirectGithub}
-          className="w-full border border-gray-300 py-2 rounded-md font-semibold flex items-center justify-center gap-2 mb-4"
+          className="w-full border border-gray-300 py-2 rounded-md font-semibold flex items-center justify-center gap-2 mb-4 cursor-pointer"
         >
           {SVGS.github}
           LOGIN WITH GITHUB
@@ -227,14 +221,14 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
             <div className="flex gap-2 mt-4">
               <button
                 type="submit"
-                className="flex-1 bg-sky-500 text-white py-2 rounded-md font-semibold"
+                className="flex-1 bg-sky-500 text-white py-2 rounded-md font-semibold cursor-pointer  "
               >
                 {isLoading ? "Logging in..." : "Log in"}
               </button>
               <button
                 type="button"
                 onClick={() => setShowForm(false)}
-                className="flex-1 border border-sky-500 text-sky-600 py-2 rounded-md font-semibold"
+                className="flex-1 border border-sky-500 text-sky-600 py-2 rounded-md font-semibold cursor-pointer"
               >
                 Skip
               </button>
@@ -252,7 +246,7 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
         ) : (
           <button
             onClick={() => setShowForm(true)}
-            className="w-full bg-blue-600 text-white py-2 rounded-md font-semibold"
+            className="w-full bg-blue-600 text-white py-2 rounded-md font-semibold cursor-pointer"
           >
             Login with Email
           </button>

package/src/creator/src/components/Message.tsx

@@ -0,0 +1,28 @@
+import { RigoLoader } from "./RigoLoader"
+
+import { SVGS } from "../assets/svgs"
+
+export type TMessage = {
+  type: "user" | "assistant"
+  content: string
+}
+
+export const Message: React.FC<TMessage> = ({ type, content }) => {
+  const isAI = type === "assistant"
+
+  const isLoading = isAI && !content
+  return isLoading ? (
+    <RigoLoader text="Thinking..." svg={SVGS.rigoSoftBlue} />
+  ) : (
+    <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="mt-1">{isAI ? SVGS.rigoSoftBlue : SVGS.user}</span>
+      <p className="text-sm leading-relaxed">{content}</p>
+    </div>
+  )
+}

package/src/creator/src/components/RigoLoader.tsx

@@ -0,0 +1,14 @@
+export const RigoLoader = ({
+  text,
+  svg,
+}: {
+  text: string
+  svg: React.ReactNode
+}) => {
+  return (
+    <div className="loader">
+      <div className="loader-icon">{svg}</div>
+      <div className="loader-text">{text}</div>
+    </div>
+  )
+}

package/src/creator/src/components/StepWizard.tsx

@@ -4,6 +4,7 @@ export type Step = {
   title: string
   subtitle?: string
   content: React.ReactNode
+  slug: string
 }
 
 type Props = {