@learnpack/learnpack 5.0.83 → 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,
@@ -266,7 +266,13 @@ function App() {
       {formState.isCompleted ? (
         <Loader
           text="Learnpack is setting up your tutorial. It may take a moment..."
-          icon={<img src={"creator/rigo-float.gif"} alt="rigo" className="w-20 h-20" />}
+          icon={
+            <img
+              src={"creator/rigo-float.gif"}
+              alt="rigo"
+              className="w-20 h-20"
+            />
+          }
         />
       ) : (
         <StepWizard

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"
@@ -91,7 +73,7 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
         </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>
@@ -119,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>
@@ -144,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,
@@ -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,7 +51,7 @@ const ContentIndexHeader = ({
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
           transition={{ duration: 0.2, delay: 0.1 }}
-          className="text-sm text-gray-600 mt-1 mb-5"
+          className="text-xs sm:text-sm text-gray-600 mt-1 mb-5"
         >
           {subText}
         </motion.p>
@@ -58,33 +60,30 @@ const ContentIndexHeader = ({
   )
 }
 
-export default ContentIndexHeader
-
 export const GenerateButton = ({
   handleSubmit,
-  handleUndo,
-  hasChanges,
 }: {
   handleSubmit: () => void
-  handleUndo: () => void
-  hasChanges: boolean
 }) => {
+  const history = useStore((state) => state.history)
+  const undo = useStore((state) => state.undo)
   return (
-    <div className="flex justify-end mt-6">
-      {hasChanges && (
+    <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
-          className="text-gray-500  mr-4 cursor-pointer bg-gray-200 rounded px-4 py-2 hover:bg-gray-300 flex items-center gap-2"
-          onClick={() => handleUndo()}
+          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}
@@ -93,52 +92,36 @@ export const GenerateButton = ({
   )
 }
 
-function hasChanges(current: Lesson[], previous: Lesson[]): boolean {
-  return current.some(
-    (c) =>
-      !previous.some(
-        (p) =>
-          p.id === c.id &&
-          p.title === c.title &&
-          p.type === c.type &&
-          p.duration === c.duration &&
-          p.description === c.description
-      )
-  )
-}
-
 export const ContentIndex = ({
-  prevLessons,
   handleSubmit,
   messages,
   isThinking,
-  handleUndo,
 }: {
-  prevLessons?: Lesson[]
   handleSubmit: () => void
   messages: TMessage[]
   isThinking: boolean
-  handleUndo: () => void
 }) => {
-  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
       ),
     })
   }
@@ -147,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,
     })
   }
@@ -193,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-[75vh] 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
                       )
                   )}
                 />
@@ -233,11 +216,9 @@ export const ContentIndex = ({
                 </div>
               </div>
             ))}
-            <GenerateButton
-              handleSubmit={handleSubmit}
-              handleUndo={handleUndo}
-              hasChanges={hasChanges(syllabus.lessons, prevLessons || [])}
-            />
+            {syllabus.lessons.length > 0 && (
+              <GenerateButton handleSubmit={handleSubmit} />
+            )}
           </>
         )}
       </div>
@@ -245,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)
 
@@ -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>