@learnpack/learnpack 5.0.69 → 5.0.70

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

@@ -0,0 +1,123 @@
+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"
+          onClick={() => setIsOpen(true)}
+        >
+          ☰
+        </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>
+        )}
+        {/* This should have the same width as the input area */}
+        <div className="space-y-2 mb-6 ">
+          <p className="w-full bg-white p-2 rounded">
+            If you're satisfied, type "OK" in the chat.
+          </p>
+          <p className="w-full bg-white p-2 rounded">
+            If not, use the chat to give more context.
+          </p>
+        </div>
+
+        <div className="space-y-2 pb-32 h-[70%] 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,129 +15,12 @@ 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[]>([])
@@ -223,7 +105,7 @@ const SyllabusEditor: React.FC = () => {
   return isGenerating ? (
     <Loader
       listeningTo="course-generation"
-      icon={SVGS.rigoSoftBlue}
+      icon={<img src={"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 +113,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/utils/store.ts

@@ -9,7 +9,8 @@ export type FormState = {
   hasContentIndex: boolean
   contentIndex: string
   isCompleted: boolean
-  currentStep: number
+  variables: string[]
+  currentStep: string
   title?: string
 }
 
@@ -57,7 +58,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 +79,9 @@ const useStore = create<Store>()(
           hasContentIndex: false,
           contentIndex: "",
           isCompleted: false,
-          currentStep: 0,
+          currentStep: "description",
           title: "",
+          variables: [],
         },
         uploadedFiles: [],
       },