@learnpack/learnpack 5.0.69 → 5.0.71

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

@@ -1,7 +1,38 @@
 import { useEffect, useState, useRef } from "react"
-import useStore from "../../utils/store"
+import useStore, { Syllabus } from "../../utils/store"
 import { Lesson, LessonItem } from "../LessonItem"
 import { SVGS } from "../../assets/svgs"
+import { TMessage } from "../Message"
+
+const ContentIndexHeader = ({
+  messages,
+  syllabus,
+}: {
+  messages: TMessage[]
+  syllabus: Syllabus
+}) => {
+  return (
+    <div className="mt-2">
+      <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>
+  )
+}
 
 export const GenerateButton = ({
   handleSubmit,
@@ -25,19 +56,23 @@ export const GenerateButton = ({
 export const ContentIndex = ({
   prevLessons,
   handleSubmit,
+  messages,
 }: {
   prevLessons?: Lesson[]
   handleSubmit: () => void
+  messages: TMessage[]
 }) => {
   const syllabus = useStore((state) => state.syllabus)
   const setSyllabus = useStore((state) => state.setSyllabus)
   const containerRef = useRef<HTMLDivElement>(null)
   const [showScrollHint, setShowScrollHint] = useState(false)
 
-  const handleRemove = (id: string) => {
+  const handleRemove = (lesson: Lesson) => {
     setSyllabus({
       ...syllabus,
-      lessons: syllabus.lessons.filter((lesson) => lesson.id !== id),
+      lessons: syllabus.lessons.filter(
+        (l) => l.id !== lesson.id && l.title !== lesson.title
+      ),
     })
   }
 
@@ -52,7 +87,7 @@ export const ContentIndex = ({
 
   const addLessonAfter = (index: number, id: string) => {
     const newLesson: Lesson = {
-      id: (parseFloat(id) + 0.1).toString(),
+      id: (parseFloat(id) + 0.1).toFixed(1),
       title: "Hello World",
       type: "READ",
       duration: 2,
@@ -100,19 +135,19 @@ export const ContentIndex = ({
   }
 
   return (
-    <div className="relative">
+    <div className="relative ">
+      <ContentIndexHeader messages={messages} syllabus={syllabus} />
       <div
         ref={containerRef}
-        className=" space-y-3 overflow-y-auto max-h-[70vh] pr-2 scrollbar-hide relative"
+        className=" space-y-3 overflow-y-auto max-h-[80vh] pr-2 scrollbar-hide relative pb-5"
       >
         {syllabus.lessons.map((lesson, index) => (
           <div key={lesson.id}>
             <LessonItem
-              key={lesson.id}
-              index={lesson.id}
+              key={lesson.id + index + lesson.title}
               lesson={lesson}
               onChange={handleChange}
-              onRemove={handleRemove}
+              onRemove={() => handleRemove(lesson)}
               isNew={Boolean(
                 prevLessons &&
                   prevLessons.length > 0 &&
@@ -141,24 +176,16 @@ export const ContentIndex = ({
 
       {showScrollHint && (
         <div className="pointer-events-none relative">
-          <div className="absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t from-white to-transparent z-10" />
+          <div className="absolute bottom-0 left-0 w-full h-50 bg-gradient-to-t from-white to-transparent z-10" />
           <div className="absolute bottom-3 left-0 w-full flex justify-center z-20">
             <button
               style={{ color: "#0084FF" }}
-              onClick={() => scrollToBottom("continue")}
-              className="px-4 py-1 bg-white  text-sm rounded shadow hover:bg-blue-50 cursor-pointer pointer-events-auto font-bold flex items-center gap-2"
+              onClick={() => scrollToBottom("bottom")}
+              className="px-4 py-1 bg-white  text-sm rounded  hover:bg-blue-50 cursor-pointer pointer-events-auto font-bold flex items-center gap-2"
             >
               Continue scrolling
               {SVGS.downArrow}
             </button>
-            <button
-              style={{ color: "#0084FF" }}
-              onClick={() => scrollToBottom("bottom")}
-              className="px-4 py-1 bg-white  text-sm rounded shadow hover:bg-blue-50 cursor-pointer pointer-events-auto font-bold flex items-center gap-2"
-            >
-              Scroll to bottom
-              {SVGS.bottom}
-            </button>
           </div>
         </div>
       )}

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

@@ -0,0 +1,114 @@
+import { useRef, useState } from "react"
+import useStore from "../../utils/store"
+import { TMessage } from "../Message"
+import FileUploader from "../FileUploader"
+import { SVGS } from "../../assets/svgs"
+import { Message } from "../Message"
+
+export const Sidebar = ({
+  messages,
+  sendPrompt,
+  handleSubmit,
+}: {
+  messages: TMessage[]
+  sendPrompt: (prompt: string) => void
+  handleSubmit: () => void
+}) => {
+  const inputRef = useRef<HTMLTextAreaElement>(null)
+  const syllabus = useStore((state) => state.syllabus)
+  const setSyllabus = useStore((state) => state.setSyllabus)
+
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <>
+      {!isOpen && (
+        <button
+          className="fixed  top-2 left-2 z-50 lg:hidden bg-white p-1 rounded shadow-md cursor-pointer p-2"
+          onClick={() => setIsOpen(true)}
+        >
+          {SVGS.rigoSoftBlue}
+        </button>
+      )}
+
+      <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 ${
+          isOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
+        }`}
+      >
+        {isOpen && (
+          <button
+            className="lg:hidden bg-white p-1 rounded shadow-md mb-4 cursor-pointer absolute top-2 left-2"
+            onClick={() => setIsOpen(false)}
+          >
+            ✕
+          </button>
+        )}
+
+        <div className="space-y-2 pb-32 h-[85%] overflow-y-auto scrollbar-hide">
+          {messages.map((message, index) => (
+            <Message
+              key={index}
+              type={message.type}
+              content={message.content}
+            />
+          ))}
+        </div>
+
+        <div className="relative w-full rounded-md bg-white text-gray-700 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 = ""
+              }
+              if (
+                e.key.toLowerCase() === "k" &&
+                inputRef.current?.value.toLowerCase().trim() === "ok"
+              ) {
+                e.preventDefault()
+                handleSubmit()
+              }
+            }}
+          />
+          <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>
+    </>
+  )
+}

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

@@ -1,5 +1,4 @@
 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"
@@ -16,132 +15,28 @@ import {
 } from "../../utils/creatorUtils"
 
 import Loader from "../Loader"
-import { Message, TMessage } from "../Message"
+import { TMessage } from "../Message"
 import { Lesson } from "../LessonItem"
-import FileUploader from "../FileUploader"
 import { ConsumablesManager } from "../ConsumablesManager"
 import toast from "react-hot-toast"
 import { ContentIndex } from "./ContentIndex"
-import { Syllabus } from "../../utils/store"
-
-const ContentIndexHeader = ({
-  messages,
-  syllabus,
-}: {
-  messages: TMessage[]
-  syllabus: Syllabus
-}) => {
-  return (
-    <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>
-  )
-}
-
-
-
-const Sidebar = ({
-  messages,
-  sendPrompt,
-  handleSubmit,
-}: {
-  messages: TMessage[]
-  sendPrompt: (prompt: string) => void
-  handleSubmit: () => void
-}) => {
-  const inputRef = useRef<HTMLTextAreaElement>(null)
-  const syllabus = useStore((state) => state.syllabus)
-  const setSyllabus = useStore((state) => state.setSyllabus)
-  return (
-    <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">
-      <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 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 = ""
-            }
-            // if the pressed key is K or k
-            if (e.key === "K" || e.key === "k") {
-              e.preventDefault()
-
-              if (inputRef.current?.value.toLowerCase().trim() === "ok") {
-                handleSubmit()
-              }
-            }
-          }}
-        />
-        <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>
-  )
-}
+import { Sidebar } from "./Sidebar"
 
 const SyllabusEditor: React.FC = () => {
-  const [messages, setMessages] = useState<TMessage[]>([])
+  const [messages, setMessages] = useState<TMessage[]>([
+    {
+      type: "assistant",
+      content: "If you're satisfied, type 'OK' in the chat.",
+    },
+    {
+      type: "assistant",
+      content: "If not, use the chat to give more context.",
+    },
+    {
+      type: "user",
+      content: "OK",
+    },
+  ])
   const [isGenerating, setIsGenerating] = useState(false)
   const prevLessons = useRef<Lesson[]>([])
   const { syllabus, setSyllabus, auth } = useStore(
@@ -223,7 +118,7 @@ const SyllabusEditor: React.FC = () => {
   return isGenerating ? (
     <Loader
       listeningTo="course-generation"
-      icon={SVGS.rigoSoftBlue}
+      icon={<img src={"creator/rigo-float.gif"} alt="rigo" className="w-20 h-20" />}
       initialBuffer="🚀 Starting course generation..."
       text="Learnpack is setting up your tutorial.
 It may take a moment..."
@@ -231,18 +126,18 @@ It may take a moment..."
   ) : (
     <div className="flex w-full bg-white rounded-md shadow-md overflow-hidden h-screen ">
       <ConsumablesManager />
-      {/* Sidebar */}
+
       <Sidebar
         messages={messages}
         sendPrompt={sendPrompt}
         handleSubmit={handleSubmit}
       />
 
-      <div className="w-2/3 p-8 space-y-6">
-        <ContentIndexHeader messages={messages} syllabus={syllabus} />
+      <div className="w-full p-8 space-y-6">
         <ContentIndex
           prevLessons={prevLessons.current}
           handleSubmit={handleSubmit}
+          messages={messages}
         />
       </div>
     </div>

package/src/creator/src/index.css

@@ -88,15 +88,12 @@ h1 {
 .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 {
+/* .loader-icon::after {
   content: "";
   display: block;
   width: 100%;
@@ -106,11 +103,10 @@ h1 {
   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% {

package/src/creator/src/main.tsx

@@ -5,7 +5,6 @@ import "./index.css"
 import App from "./App.tsx"
 import SyllabusEditor from "./components/syllabus/SyllabusEditor.tsx"
 import { Toaster } from "react-hot-toast"
-
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <Toaster />

package/src/creator/src/utils/store.ts

@@ -9,7 +9,8 @@ export type FormState = {
   hasContentIndex: boolean
   contentIndex: string
   isCompleted: boolean
-  currentStep: number
+  variables: string[]
+  currentStep: string
   title?: string
 }
 
@@ -17,6 +18,7 @@ type Auth = {
   bcToken: string
   rigoToken: string
   userId: string
+  user: any
 }
 export type Syllabus = {
   lessons: Lesson[]
@@ -49,6 +51,7 @@ const useStore = create<Store>()(
         bcToken: "",
         rigoToken: "",
         userId: "",
+        user: null,
       },
       formState: {
         description: "",
@@ -57,7 +60,14 @@ const useStore = create<Store>()(
         hasContentIndex: false,
         contentIndex: "",
         isCompleted: false,
-        currentStep: 0,
+        currentStep: "description",
+        variables: [
+          "description",
+          "duration",
+          "login",
+          "targetAudience",
+          "hasContentIndex",
+        ],
       },
       setFormState: (formState: Partial<FormState>) =>
         set((state) => ({ formState: { ...state.formState, ...formState } })),
@@ -71,8 +81,9 @@ const useStore = create<Store>()(
           hasContentIndex: false,
           contentIndex: "",
           isCompleted: false,
-          currentStep: 0,
+          currentStep: "description",
           title: "",
+          variables: [],
         },
         uploadedFiles: [],
       },