@learnpack/learnpack 5.0.81 → 5.0.85

package/src/creator/package.json

@@ -22,6 +22,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hot-toast": "^2.5.2",
+    "react-markdown": "^10.1.0",
     "react-router": "^7.5.0",
     "syllable": "^5.0.1",
     "zustand": "^5.0.3"

package/src/creator/src/App.tsx

@@ -17,13 +17,12 @@ import FileUploader from "./components/FileUploader"
 function App() {
   const navigate = useNavigate()
 
-  const { formState, setFormState, setSyllabus, setAuth } = useStore(
+  const { formState, setFormState, setAuth, push } = useStore(
     useShallow((state) => ({
-      // auth: state.auth,
       formState: state.formState,
       setFormState: state.setFormState,
-      setSyllabus: state.setSyllabus,
       setAuth: state.setAuth,
+      push: state.push,
     }))
   )
 
@@ -74,9 +73,10 @@ function App() {
       prevInteractions: "",
     })
     const lessons = res.parsed.listOfSteps.map((lesson: any) => {
-      return parseLesson(lesson)
+      return parseLesson(lesson, [])
     })
-    setSyllabus({
+
+    push({
       lessons,
       courseInfo: {
         ...formState,
@@ -268,7 +268,7 @@ function App() {
           text="Learnpack is setting up your tutorial. It may take a moment..."
           icon={
             <img
-              src={"rigo-float.gif"}
+              src={"creator/rigo-float.gif"}
               alt="rigo"
               className="w-20 h-20"
             />

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

@@ -263,4 +263,22 @@ export const SVGS = {
       />
     </svg>
   ),
+  undo: (
+    <svg
+      width="20px"
+      height="20px"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 20.75C10.078 20.7474 8.23546 19.9827 6.8764 18.6236C5.51733 17.2645 4.75265 15.422 4.75 13.5C4.75 13.3011 4.82902 13.1103 4.96967 12.9697C5.11032 12.829 5.30109 12.75 5.5 12.75C5.69891 12.75 5.88968 12.829 6.03033 12.9697C6.17098 13.1103 6.25 13.3011 6.25 13.5C6.25 14.6372 6.58723 15.7489 7.21905 16.6945C7.85087 17.6401 8.74889 18.3771 9.79957 18.8123C10.8502 19.2475 12.0064 19.3614 13.1218 19.1395C14.2372 18.9177 15.2617 18.37 16.0659 17.5659C16.87 16.7617 17.4177 15.7372 17.6395 14.6218C17.8614 13.5064 17.7475 12.3502 17.3123 11.2996C16.8771 10.2489 16.1401 9.35087 15.1945 8.71905C14.2489 8.08723 13.1372 7.75 12 7.75H9.5C9.30109 7.75 9.11032 7.67098 8.96967 7.53033C8.82902 7.38968 8.75 7.19891 8.75 7C8.75 6.80109 8.82902 6.61032 8.96967 6.46967C9.11032 6.32902 9.30109 6.25 9.5 6.25H12C13.9228 6.25 15.7669 7.01384 17.1265 8.37348C18.4862 9.73311 19.25 11.5772 19.25 13.5C19.25 15.4228 18.4862 17.2669 17.1265 18.6265C15.7669 19.9862 13.9228 20.75 12 20.75Z"
+        fill="#000000"
+      />
+      <path
+        d="M12 10.75C11.9015 10.7505 11.8038 10.7313 11.7128 10.6935C11.6218 10.6557 11.5393 10.6001 11.47 10.53L8.47001 7.53003C8.32956 7.38941 8.25067 7.19878 8.25067 7.00003C8.25067 6.80128 8.32956 6.61066 8.47001 6.47003L11.47 3.47003C11.5387 3.39634 11.6215 3.33724 11.7135 3.29625C11.8055 3.25526 11.9048 3.23322 12.0055 3.23144C12.1062 3.22966 12.2062 3.24819 12.2996 3.28591C12.393 3.32363 12.4778 3.37977 12.549 3.45099C12.6203 3.52221 12.6764 3.60705 12.7141 3.70043C12.7519 3.79382 12.7704 3.89385 12.7686 3.99455C12.7668 4.09526 12.7448 4.19457 12.7038 4.28657C12.6628 4.37857 12.6037 4.46137 12.53 4.53003L10.06 7.00003L12.53 9.47003C12.6705 9.61066 12.7494 9.80128 12.7494 10C12.7494 10.1988 12.6705 10.3894 12.53 10.53C12.4608 10.6001 12.3782 10.6557 12.2872 10.6935C12.1962 10.7313 12.0986 10.7505 12 10.75Z"
+        fill="#000000"
+      />
+    </svg>
+  ),
 }

package/src/creator/src/components/FileCard.tsx

@@ -0,0 +1,22 @@
+import { SVGS } from "../assets/svgs"
+import { UploadedFile } from "../utils/store"
+
+export const FileCard = ({
+  file,
+  handleRemove,
+}: {
+  file: UploadedFile
+  handleRemove: () => void
+}) => (
+  <div className="flex items-center justify-between bg-white shadow-sm p-2 rounded-lg w-[100px]">
+    <span title={file.name} className="text-xs text-gray-800 truncate">
+      {file.name}
+    </span>
+    <button
+      onClick={handleRemove}
+      className="p-1 text-red-500 hover:text-red-700 transition-colors cursor-pointer "
+    >
+      {SVGS.trash}
+    </button>
+  </div>
+)

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

@@ -1,8 +1,9 @@
-import { useState } from "react"
+import { useState, useRef } from "react"
 import { SVGS } from "../assets/svgs"
 
 export interface Lesson {
   id: string
+  uid: string
   title: string
   type: "READ" | "CODE" | "QUIZ"
   description: string
@@ -12,8 +13,8 @@ export interface Lesson {
 interface LessonItemProps {
   lesson: Lesson
   isNew: boolean
-  onChange: (id: string, newTitle: string) => void
-  onRemove: (id: string) => void
+  onChange: (uid: string, newTitle: string) => void
+  onRemove: () => void
 }
 
 function cleanFloatString(input: string): string {
@@ -31,12 +32,13 @@ export const LessonItem: React.FC<LessonItemProps> = ({
   onRemove,
   isNew,
 }) => {
+  const inputRef = useRef<HTMLInputElement>(null)
   const [isEditing, setIsEditing] = useState(false)
 
   return (
     <div
       className={`flex items-center space-x-2 relative rounded-md p-3 ${
-        isNew ? "border border-learnpack-blue" : "border border-gray-200"
+        isNew ? "border border-learnpack-blue appear" : "border border-gray-200"
       }`}
     >
       {isNew && <span className="red-ball"></span>}
@@ -47,9 +49,13 @@ export const LessonItem: React.FC<LessonItemProps> = ({
 
       {isEditing ? (
         <input
-          value={lesson.title}
-          onChange={(e) => onChange(lesson.id, e.target.value)}
-          onBlur={() => setIsEditing(false)}
+          defaultValue={lesson.title}
+          ref={inputRef}
+          onBlur={() => {
+            if (inputRef.current) {
+              onChange(lesson.uid, inputRef.current.value)
+            }
+          }}
           autoFocus
           className="flex-1 bg-white border border-gray-300 rounded-md px-2 py-1 text-sm"
         />
@@ -62,13 +68,18 @@ export const LessonItem: React.FC<LessonItemProps> = ({
       </span>
 
       <button
-        onClick={() => setIsEditing(!isEditing)}
+        onClick={() => {
+          setIsEditing(!isEditing)
+          if (inputRef.current) {
+            onChange(lesson.uid, inputRef.current.value)
+          }
+        }}
         className="text-gray-500 hover:text-blue-500 cursor-pointer "
       >
         {SVGS.pen}
       </button>
       <button
-        onClick={() => onRemove(lesson.id)}
+        onClick={() => onRemove()}
         className="text-red-500 hover:text-red-700 cursor-pointer"
       >
         {SVGS.trash}

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

@@ -1,10 +1,10 @@
-import { useEffect, useState } from "react"
+import { useState } from "react"
 import { BREATHECODE_HOST } from "../utils/constants"
 import { SVGS } from "../assets/svgs"
 import toast from "react-hot-toast"
 import useStore from "../utils/store"
 import { useShallow } from "zustand/react/shallow"
-import { checkParams, login4Geeks, loginWithToken } from "../utils/lib"
+import { login4Geeks } from "../utils/lib"
 
 export default function Login({ onFinish }: { onFinish: () => void }) {
   const [email, setEmail] = useState("")
@@ -58,24 +58,6 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
     window.location.href = `${BREATHECODE_HOST}/v1/auth/github/?url=${url}`
   }
 
-  useEffect(() => {
-    ;(async () => {
-      const { token } = checkParams()
-      if (token) {
-        const user = await loginWithToken(token)
-        if (user) {
-          setAuth({
-            bcToken: token,
-            userId: user.id,
-            rigoToken: user.rigobot.key,
-            user,
-          })
-          onFinish()
-        }
-      }
-    })()
-  }, [])
-
   return (
     <div
       className="fixed inset-0 bg-black/50 flex items-center justify-center z-1000"
@@ -85,9 +67,13 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
         className="bg-white p-8 rounded-xl shadow-md max-w-sm w-full"
         onClick={(e) => e.stopPropagation()}
       >
+        <p className="mb-4 text-center text-gray-700">
+          You need to have a 4Geeks account with a creator plan to create a
+          tutorial.
+        </p>
         <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
         </button>
@@ -115,14 +101,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>
@@ -140,7 +126,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/MarkdownRenderer.tsx

@@ -0,0 +1,11 @@
+import Markdown from "react-markdown"
+
+export const MarkdownRenderer: React.FC<{
+  content: string
+}> = ({ content }) => {
+  return (
+    <div className="markdown-renderer">
+      <Markdown>{content}</Markdown>
+    </div>
+  )
+}

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

@@ -2,6 +2,7 @@ import { RigoLoader } from "./RigoLoader"
 
 import { SVGS } from "../assets/svgs"
 import useStore from "../utils/store"
+import { MarkdownRenderer } from "./MarkdownRenderer"
 
 export type TMessage = {
   type: "user" | "assistant"
@@ -14,7 +15,6 @@ export const Message: React.FC<TMessage> = ({ type, content }) => {
 
   const isLoading = isAI && !content
 
-  console.log("user", user)
   return isLoading ? (
     <RigoLoader text="Thinking..." svg={<img src="rigo-float.gif" />} />
   ) : (
@@ -32,7 +32,9 @@ export const Message: React.FC<TMessage> = ({ type, content }) => {
       ) : (
         <span className="mt-1">{SVGS.user}</span>
       )}
-      <p className="text-sm leading-relaxed">{content}</p>
+      <div className="w-full  break-words overflow-x-auto ">
+        <MarkdownRenderer content={content} />
+      </div>
     </div>
   )
 }

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

@@ -5,6 +5,8 @@ import { SVGS } from "../../assets/svgs"
 import { TMessage } from "../Message"
 import Loader from "../Loader"
 import { motion, AnimatePresence } from "framer-motion"
+import { randomUUID } from "../../utils/creatorUtils"
+import toast from "react-hot-toast"
 
 const ContentIndexHeader = ({
   messages,
@@ -18,7 +20,7 @@ const ContentIndexHeader = ({
       .length === 2
 
   const headerText = isFirst
-    ? "I've created a detailed structure for your course."
+    ? `I've created a detailed structure for your course: ${syllabus.courseInfo.title}`
     : "I've updated the structure based on your feedback."
 
   const subText = isFirst
@@ -28,7 +30,7 @@ const ContentIndexHeader = ({
     : "Based on your input, here is the new syllabus, updates are highlighted in yellow"
 
   return (
-    <div className="mt-2">
+    <div className="mt-2 ">
       <AnimatePresence mode="wait">
         <motion.h2
           key={headerText}
@@ -36,7 +38,7 @@ const ContentIndexHeader = ({
           animate={{ opacity: 1, y: 0 }}
           exit={{ opacity: 0, y: 10 }}
           transition={{ duration: 0.2 }}
-          className="text-lg font-semibold"
+          className="text-xs font-semibold sm:text-base md:text-lg"
         >
           {headerText}
         </motion.h2>
@@ -49,33 +51,39 @@ const ContentIndexHeader = ({
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
           transition={{ duration: 0.2, delay: 0.1 }}
-          className="text-sm text-gray-600 mt-1"
+          className="text-xs sm:text-sm text-gray-600 mt-1 mb-5"
         >
           {subText}
         </motion.p>
       </AnimatePresence>
-
-      <h3 className="text-sm text-gray-600 mt-2 font-bold">
-        {syllabus.courseInfo.title}
-      </h3>
     </div>
   )
 }
 
-export default ContentIndexHeader
-
 export const GenerateButton = ({
   handleSubmit,
 }: {
   handleSubmit: () => void
 }) => {
+  const history = useStore((state) => state.history)
+  const undo = useStore((state) => state.undo)
   return (
-    <div className="flex justify-end mt-6">
+    <div className="flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-4 justify-end mt-6">
+      {history.length > 1 && (
+        <button
+          onClick={() => {
+            undo()
+            toast.success("Changes reverted!")
+          }}
+          className="w-full sm:w-auto text-gray-500 bg-gray-200 rounded px-4 py-2 hover:bg-gray-300 flex items-center justify-center gap-2 cursor-pointer"
+        >
+          {SVGS.undo}
+          Revert changes
+        </button>
+      )}
       <button
-        onClick={async () => {
-          handleSubmit()
-        }}
-        className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 cursor-pointer flex items-center gap-2"
+        onClick={handleSubmit}
+        className="w-full sm:w-auto bg-blue-600 text-white rounded px-4 py-2 hover:bg-blue-700 flex items-center justify-center gap-2 cursor-pointer"
       >
         <span>I'm ready. Create the course for me!</span>
         {SVGS.rigoSoftBlue}
@@ -83,36 +91,37 @@ export const GenerateButton = ({
     </div>
   )
 }
+
 export const ContentIndex = ({
-  prevLessons,
   handleSubmit,
   messages,
   isThinking,
 }: {
-  prevLessons?: Lesson[]
   handleSubmit: () => void
   messages: TMessage[]
   isThinking: boolean
 }) => {
-  const syllabus = useStore((state) => state.syllabus)
-  const setSyllabus = useStore((state) => state.setSyllabus)
+  const history = useStore((state) => state.history)
+  const push = useStore((state) => state.push)
   const containerRef = useRef<HTMLDivElement>(null)
   const [showScrollHint, setShowScrollHint] = useState(false)
 
+  const syllabus = history[history.length - 1]
+
+  const previousSyllabus = history[history.length - 2] || null
+
   const handleRemove = (lesson: Lesson) => {
-    setSyllabus({
+    push({
       ...syllabus,
-      lessons: syllabus.lessons.filter(
-        (l) => l.id !== lesson.id && l.title !== lesson.title
-      ),
+      lessons: syllabus.lessons.filter((l) => l.uid !== lesson.uid),
     })
   }
 
-  const handleChange = (id: string, newTitle: string) => {
-    setSyllabus({
+  const handleChange = (uid: string, newTitle: string) => {
+    push({
       ...syllabus,
       lessons: syllabus.lessons.map((lesson) =>
-        lesson.id === id ? { ...lesson, title: newTitle } : lesson
+        lesson.uid === uid ? { ...lesson, title: newTitle } : lesson
       ),
     })
   }
@@ -121,14 +130,15 @@ export const ContentIndex = ({
     const newLesson: Lesson = {
       id: (parseFloat(id) + 0.1).toFixed(1),
       title: "Hello World",
+      uid: randomUUID(),
       type: "READ",
       duration: 2,
       description: "Hello World",
     }
     const updated = [...syllabus.lessons]
     updated.splice(index + 1, 0, newLesson)
-
-    setSyllabus({
+    push({
+      ...syllabus,
       lessons: updated,
     })
   }
@@ -167,31 +177,30 @@ export const ContentIndex = ({
   }
 
   return (
-    <div className="relative ">
+    <div className="relative w-full p-2 sm:p-4 md:p-6 lg:p-8 space-y-6">
       <ContentIndexHeader messages={messages} syllabus={syllabus} />
       <div
         ref={containerRef}
-        className=" space-y-3 overflow-y-auto max-h-[80vh] pr-2 scrollbar-hide relative pb-5"
+        className="space-y-3 overflow-y-auto max-h-[78vh] pr-2 scrollbar-hide relative pb-20"
       >
         {isThinking ? (
-          <Loader text="Thinking..." minheight="min-h-[70vh]" />
+          <Loader text="Thinking..." minheight="min-h-[69vh]" />
         ) : (
           <>
             {syllabus.lessons.map((lesson, index) => (
-              <div key={lesson.id}>
+              <div key={lesson.uid + index}>
                 <LessonItem
-                  key={lesson.id + index + lesson.title}
+                  key={lesson.uid}
                   lesson={lesson}
                   onChange={handleChange}
                   onRemove={() => handleRemove(lesson)}
                   isNew={Boolean(
-                    prevLessons &&
-                      prevLessons.length > 0 &&
-                      !prevLessons.some(
-                        (l) =>
-                          l.id === lesson.id &&
-                          l.title === lesson.title &&
-                          l.type === lesson.type
+                    previousSyllabus &&
+                      previousSyllabus &&
+                      previousSyllabus.lessons &&
+                      previousSyllabus.lessons.length > 0 &&
+                      !previousSyllabus.lessons.some(
+                        (l) => l.uid === lesson.uid
                       )
                   )}
                 />
@@ -207,7 +216,9 @@ export const ContentIndex = ({
                 </div>
               </div>
             ))}
-            <GenerateButton handleSubmit={handleSubmit} />
+            {syllabus.lessons.length > 0 && (
+              <GenerateButton handleSubmit={handleSubmit} />
+            )}
           </>
         )}
       </div>
@@ -215,7 +226,7 @@ export const ContentIndex = ({
       {showScrollHint && !isThinking && (
         <div className="pointer-events-none relative">
           <div className="absolute bottom-0 left-0 w-full h-60 bg-gradient-to-t from-white to-transparent z-10" />
-          <div className="absolute bottom-3 left-0 w-full flex justify-center z-20">
+          <div className="absolute bottom-10 left-0 w-full flex justify-center z-20">
             <button
               style={{ color: "#0084FF" }}
               onClick={() => scrollToBottom("bottom")}

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

@@ -4,6 +4,7 @@ import { TMessage } from "../Message"
 import FileUploader from "../FileUploader"
 import { SVGS } from "../../assets/svgs"
 import { Message } from "../Message"
+import { FileCard } from "../FileCard"
 
 export const Sidebar = ({
   messages,
@@ -15,8 +16,8 @@ export const Sidebar = ({
   handleSubmit: () => void
 }) => {
   const inputRef = useRef<HTMLTextAreaElement>(null)
-  const syllabus = useStore((state) => state.syllabus)
-  const setSyllabus = useStore((state) => state.setSyllabus)
+  const uploadedFiles = useStore((state) => state.uploadedFiles)
+  const setUploadedFiles = useStore((state) => state.setUploadedFiles)
 
   const [isOpen, setIsOpen] = useState(false)
 
@@ -24,7 +25,7 @@ export const Sidebar = ({
     <>
       {!isOpen && (
         <button
-          className="fixed  top-2 left-2 z-50 lg:hidden bg-white p-1 rounded shadow-md cursor-pointer p-2"
+          className="fixed  bottom-5 left-2 z-50 lg:hidden  p-1 shadow-md cursor-pointer p-2 w-15 h-15 flex items-center justify-center bg-blue-600 rounded-[50%] fluid-svg"
           onClick={() => setIsOpen(true)}
         >
           {SVGS.rigoSoftBlue}
@@ -32,7 +33,7 @@ export const Sidebar = ({
       )}
 
       <div
-        className={`fixed z-40 top-0 left-0 h-full w-4/5 max-w-sm bg-learnpack-blue text-sm text-gray-700 border-r overflow-y-auto scrollbar-hide p-6 transition-transform duration-300 ease-in-out lg:relative lg:transform-none lg:w-1/3 ${
+        className={`fixed z-40 top-0 left-0 h-full w-4/5 max-w-sm bg-learnpack-blue text-sm text-gray-700 border-r border-C8DBFC overflow-y-auto scrollbar-hide p-6 transition-transform duration-300 ease-in-out lg:relative lg:transform-none lg:w-1/3 ${
           isOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
         }`}
       >
@@ -56,10 +57,25 @@ export const Sidebar = ({
         </div>
 
         <div className="relative w-full rounded-md bg-white text-gray-700 h-24">
+          {uploadedFiles?.length > 0 && (
+            <div className="absolute bottom-[100%] flex gap-2 w-full pb-1  rounded-md overflow-x-auto scrollbar-hide">
+              {uploadedFiles.map((file, index) => (
+                <FileCard
+                  key={index}
+                  file={file}
+                  handleRemove={() => {
+                    const newFiles = [...uploadedFiles]
+                    newFiles.splice(index, 1)
+                    setUploadedFiles(newFiles)
+                  }}
+                />
+              ))}
+            </div>
+          )}
           <textarea
             ref={inputRef}
             style={{ resize: "none" }}
-            className="w-full h-full p-2"
+            className="w-full h-full p-2 outline-blue rounded"
             placeholder="How can Learnpack help you?"
             autoFocus
             onKeyUp={(e) => {
@@ -79,23 +95,9 @@ export const Sidebar = ({
           />
           <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],
-                  })
+                  setUploadedFiles([...(uploadedFiles || []), ...res])
                 }}
               />
             </div>