@learnpack/learnpack 5.0.67 → 5.0.69

package/lib/creatorDist/assets/{index-t6ma_gVm.css → index-C_Rp91QE.css}

@@ -17,6 +17,15 @@
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-border-style: solid;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
       --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-shadow: 0 0 #0000;
@@ -346,6 +355,12 @@
 }
 @layer components;
 @layer utilities {
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
+  .pointer-events-none {
+    pointer-events: none;
+  }
   .absolute {
     position: absolute;
   }
@@ -364,15 +379,58 @@
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
   .bottom-2 {
     bottom: calc(var(--spacing) * 2);
   }
+  .bottom-3 {
+    bottom: calc(var(--spacing) * 3);
+  }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
   .left-1\/2 {
     left: 50%;
   }
+  .z-10 {
+    z-index: 10;
+  }
+  .z-20 {
+    z-index: 20;
+  }
+  .container {
+    width: 100%;
+  }
+  @media (min-width: 40rem) {
+    .container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .container {
+      max-width: 96rem;
+    }
+  }
   .m-0 {
     margin: calc(var(--spacing) * 0);
   }
@@ -436,6 +494,9 @@
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
+  .h-20 {
+    height: calc(var(--spacing) * 20);
+  }
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
@@ -445,8 +506,8 @@
   .h-screen {
     height: 100vh;
   }
-  .max-h-\[60vh\] {
-    max-height: 60vh;
+  .max-h-\[70vh\] {
+    max-height: 70vh;
   }
   .max-h-\[300px\] {
     max-height: 300px;
@@ -660,15 +721,34 @@
   .bg-yellow-50 {
     background-color: var(--color-yellow-50);
   }
+  .bg-gradient-to-t {
+    --tw-gradient-position: to top in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .from-white {
+    --tw-gradient-from: var(--color-white);
+    --tw-gradient-stops: var(
+      --tw-gradient-via-stops,
+      var(--tw-gradient-position),
+      var(--tw-gradient-from) var(--tw-gradient-from-position),
+      var(--tw-gradient-to) var(--tw-gradient-to-position)
+    );
+  }
+  .to-transparent {
+    --tw-gradient-to: transparent;
+    --tw-gradient-stops: var(
+      --tw-gradient-via-stops,
+      var(--tw-gradient-position),
+      var(--tw-gradient-from) var(--tw-gradient-from-position),
+      var(--tw-gradient-to) var(--tw-gradient-to-position)
+    );
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
-  .p-4 {
-    padding: calc(var(--spacing) * 4);
-  }
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
@@ -785,6 +865,12 @@
   .opacity-30 {
     opacity: 0.3;
   }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a),
+      0 1px 2px -1px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-md {
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a),
       0 2px 4px -2px var(--tw-shadow-color, #0000001a);
@@ -806,6 +892,9 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
   @media (hover: hover) {
+    .hover\:bg-blue-50:hover {
+      background-color: var(--color-blue-50);
+    }
     .hover\:bg-blue-200:hover {
       background-color: var(--color-blue-200);
     }
@@ -998,6 +1087,48 @@ h1 {
   inherits: false;
   initial-value: solid;
 }
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
 @property --tw-leading {
   syntax: "*";
   inherits: false;

package/lib/creatorDist/index.html

@@ -10,8 +10,8 @@
     />
 
     <title>Learnpack Creator: Craft tutorials in seconds!</title>
-    <script type="module" crossorigin src="/creator/assets/index-tZYXMzIW.js"></script>
-    <link rel="stylesheet" crossorigin href="/creator/assets/index-t6ma_gVm.css">
+    <script type="module" crossorigin src="/creator/assets/index-C7bLE5wU.js"></script>
+    <link rel="stylesheet" crossorigin href="/creator/assets/index-C_Rp91QE.css">
   </head>
   <body>
     <div id="root"></div>

package/lib/utils/api.js

@@ -274,11 +274,11 @@ const getConsumable = async (token, consumableSlug = "ai-generation") => {
 exports.getConsumable = getConsumable;
 const with_crud_asset_roles = new Set([
     "content_writer",
-    "growth_manager",
     "syllabus_coordinator",
     "country_manager",
-    "community_manager",
     "carrer_support_head",
+    "admin",
+    "student",
 ]);
 const listUserAcademies = async (breathecodeToken) => {
     const url = "https://breathecode.herokuapp.com/v1/auth/user/me";

package/oclif.manifest.json

@@ -1 +1 @@
-{"version":"5.0.67","commands":{"audit":{"id":"audit","description":"learnpack audit is the command in charge of creating an auditory of the repository\n...\nlearnpack audit checks for the following information in a repository:\n    1. The configuration object has slug, repository and description. (Error)\n    2. The command learnpack clean has been run. (Error)\n    3. If a markdown or test file doesn't have any content. (Error)\n    4. The links are accessing to valid servers. (Error)\n    5. The relative images are working (If they have the shortest path to the image or if the images exists in the assets). (Error)\n    6. The external images are working (If they are pointing to a valid server). (Error)\n    7. The exercises directory names are valid. (Error)\n    8. If an exercise doesn't have a README file. (Error)\n    9. The exercises array (Of the config file) has content. (Error)\n    10. The exercses have the same translations. (Warning)\n    11. The .gitignore file exists. (Warning)\n    12. If there is a file within the exercises folder but not inside of any particular exercise's folder. (Warning)\n","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{"strict":{"name":"strict","type":"boolean","char":"s","description":"strict mode","allowNo":false}},"args":[]},"breakToken":{"id":"breakToken","description":"Break the token","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{"yes":{"name":"yes","type":"boolean","char":"y","description":"Skip all prompts and initialize an empty project","allowNo":false},"grading":{"name":"grading","type":"boolean","char":"h","description":"show CLI help","allowNo":false}},"args":[]},"clean":{"id":"clean","description":"Clean the configuration object\n  ...\n  Extra documentation goes here\n  ","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{},"args":[]},"download":{"id":"download","description":"Describe the command here\n...\nExtra documentation goes here\n","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{},"args":[{"name":"package","description":"The unique string that identifies this package on learnpack","required":false,"hidden":false}]},"init":{"id":"init","description":"Create a new learning package: Book, Tutorial or Exercise","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{"yes":{"name":"yes","type":"boolean","char":"y","description":"Skip all prompts and initialize an empty project","allowNo":false},"grading":{"name":"grading","type":"boolean","char":"h","description":"show CLI help","allowNo":false}},"args":[]},"login":{"id":"login","description":"Describe the command here\n  ...\n  Extra documentation goes here\n  ","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{},"args":[{"name":"package","description":"The unique string that identifies this package on learnpack","required":false,"hidden":false}]},"logout":{"id":"logout","description":"Describe the command here\n  ...\n  Extra documentation goes here\n  ","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{},"args":[{"name":"package","description":"The unique string that identifies this package on learnpack","required":false,"hidden":false}]},"publish":{"id":"publish","description":"Builds the project by copying necessary files and directories into a zip file","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{"strict":{"name":"strict","type":"boolean","char":"s","description":"strict mode","allowNo":false},"help":{"name":"help","type":"boolean","char":"h","description":"show CLI help","allowNo":false}},"args":[]},"serve":{"id":"serve","description":"Runs a small server to build tutorials","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{"yes":{"name":"yes","type":"boolean","char":"y","description":"Skip all prompts and initialize an empty project","allowNo":false},"port":{"name":"port","type":"option","char":"p","description":"server port"},"host":{"name":"host","type":"option","char":"h","description":"server host"},"debug":{"name":"debug","type":"boolean","char":"d","description":"debugger mode for more verbage","allowNo":false}},"args":[]},"start":{"id":"start","description":"Runs a small server with all the exercise instructions","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{"yes":{"name":"yes","type":"boolean","char":"y","description":"Skip all prompts and initialize an empty project","allowNo":false},"port":{"name":"port","type":"option","char":"p","description":"server port"},"host":{"name":"host","type":"option","char":"h","description":"server host"},"disableGrading":{"name":"disableGrading","type":"boolean","char":"D","description":"disble grading functionality","allowNo":false},"watch":{"name":"watch","type":"boolean","char":"w","description":"Watch for file changes","allowNo":false},"editor":{"name":"editor","type":"option","char":"e","description":"[preview, extension]","options":["extension","preview"]},"version":{"name":"version","type":"option","char":"v","description":"E.g: 1.0.1"},"grading":{"name":"grading","type":"option","char":"g","description":"[isolated, incremental]","options":["isolated","incremental"]},"debug":{"name":"debug","type":"boolean","char":"d","description":"debugger mode for more verbage","allowNo":false}},"args":[]},"test":{"id":"test","description":"Test exercises","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{"yes":{"name":"yes","type":"boolean","char":"y","description":"Skip all prompts and initialize an empty project","allowNo":false}},"args":[{"name":"exerciseSlug","description":"The name of the exercise to test","required":false,"hidden":false}]},"translate":{"id":"translate","description":"List all the lessons, the user is able of select many of them to translate to the given languages","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{"yes":{"name":"yes","type":"boolean","char":"y","description":"Skip all prompts and initialize an empty project","allowNo":false}},"args":[]}}}
+{"version":"5.0.69","commands":{"audit":{"id":"audit","description":"learnpack audit is the command in charge of creating an auditory of the repository\n...\nlearnpack audit checks for the following information in a repository:\n    1. The configuration object has slug, repository and description. (Error)\n    2. The command learnpack clean has been run. (Error)\n    3. If a markdown or test file doesn't have any content. (Error)\n    4. The links are accessing to valid servers. (Error)\n    5. The relative images are working (If they have the shortest path to the image or if the images exists in the assets). (Error)\n    6. The external images are working (If they are pointing to a valid server). (Error)\n    7. The exercises directory names are valid. (Error)\n    8. If an exercise doesn't have a README file. (Error)\n    9. The exercises array (Of the config file) has content. (Error)\n    10. The exercses have the same translations. (Warning)\n    11. The .gitignore file exists. (Warning)\n    12. If there is a file within the exercises folder but not inside of any particular exercise's folder. (Warning)\n","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{"strict":{"name":"strict","type":"boolean","char":"s","description":"strict mode","allowNo":false}},"args":[]},"breakToken":{"id":"breakToken","description":"Break the token","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{"yes":{"name":"yes","type":"boolean","char":"y","description":"Skip all prompts and initialize an empty project","allowNo":false},"grading":{"name":"grading","type":"boolean","char":"h","description":"show CLI help","allowNo":false}},"args":[]},"clean":{"id":"clean","description":"Clean the configuration object\n  ...\n  Extra documentation goes here\n  ","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{},"args":[]},"download":{"id":"download","description":"Describe the command here\n...\nExtra documentation goes here\n","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{},"args":[{"name":"package","description":"The unique string that identifies this package on learnpack","required":false,"hidden":false}]},"init":{"id":"init","description":"Create a new learning package: Book, Tutorial or Exercise","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{"yes":{"name":"yes","type":"boolean","char":"y","description":"Skip all prompts and initialize an empty project","allowNo":false},"grading":{"name":"grading","type":"boolean","char":"h","description":"show CLI help","allowNo":false}},"args":[]},"login":{"id":"login","description":"Describe the command here\n  ...\n  Extra documentation goes here\n  ","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{},"args":[{"name":"package","description":"The unique string that identifies this package on learnpack","required":false,"hidden":false}]},"logout":{"id":"logout","description":"Describe the command here\n  ...\n  Extra documentation goes here\n  ","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{},"args":[{"name":"package","description":"The unique string that identifies this package on learnpack","required":false,"hidden":false}]},"publish":{"id":"publish","description":"Builds the project by copying necessary files and directories into a zip file","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{"strict":{"name":"strict","type":"boolean","char":"s","description":"strict mode","allowNo":false},"help":{"name":"help","type":"boolean","char":"h","description":"show CLI help","allowNo":false}},"args":[]},"serve":{"id":"serve","description":"Runs a small server to build tutorials","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{"yes":{"name":"yes","type":"boolean","char":"y","description":"Skip all prompts and initialize an empty project","allowNo":false},"port":{"name":"port","type":"option","char":"p","description":"server port"},"host":{"name":"host","type":"option","char":"h","description":"server host"},"debug":{"name":"debug","type":"boolean","char":"d","description":"debugger mode for more verbage","allowNo":false}},"args":[]},"start":{"id":"start","description":"Runs a small server with all the exercise instructions","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{"yes":{"name":"yes","type":"boolean","char":"y","description":"Skip all prompts and initialize an empty project","allowNo":false},"port":{"name":"port","type":"option","char":"p","description":"server port"},"host":{"name":"host","type":"option","char":"h","description":"server host"},"disableGrading":{"name":"disableGrading","type":"boolean","char":"D","description":"disble grading functionality","allowNo":false},"watch":{"name":"watch","type":"boolean","char":"w","description":"Watch for file changes","allowNo":false},"editor":{"name":"editor","type":"option","char":"e","description":"[preview, extension]","options":["extension","preview"]},"version":{"name":"version","type":"option","char":"v","description":"E.g: 1.0.1"},"grading":{"name":"grading","type":"option","char":"g","description":"[isolated, incremental]","options":["isolated","incremental"]},"debug":{"name":"debug","type":"boolean","char":"d","description":"debugger mode for more verbage","allowNo":false}},"args":[]},"test":{"id":"test","description":"Test exercises","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{"yes":{"name":"yes","type":"boolean","char":"y","description":"Skip all prompts and initialize an empty project","allowNo":false}},"args":[{"name":"exerciseSlug","description":"The name of the exercise to test","required":false,"hidden":false}]},"translate":{"id":"translate","description":"List all the lessons, the user is able of select many of them to translate to the given languages","pluginName":"@learnpack/learnpack","pluginType":"core","aliases":[],"flags":{"yes":{"name":"yes","type":"boolean","char":"y","description":"Skip all prompts and initialize an empty project","allowNo":false}},"args":[]}}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@learnpack/learnpack",
   "description": "Seamlessly build, sell and/or take interactive & auto-graded tutorials, start learning now or build a new tutorial to your audience.",
-  "version": "5.0.67",
+  "version": "5.0.69",
   "author": "Alejandro Sanchez @alesanchezr",
   "contributors": [
     {

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

@@ -223,4 +223,44 @@ export const SVGS = {
       />
     </svg>
   ),
+  downArrow: (
+    <svg
+      width="7"
+      height="6"
+      viewBox="0 0 7 6"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.100496 1.0705C0.22866 0.950272 0.430019 0.956708 0.550243 1.08487L3.5 4.2294L6.44976 1.08487C6.56998 0.956708 6.77134 0.950272 6.8995 1.0705C7.02767 1.19072 7.0341 1.39208 6.91388 1.52024L3.73206 4.91216C3.67191 4.97628 3.58792 5.01266 3.5 5.01266C3.41208 5.01266 3.32809 4.97628 3.26794 4.91216L0.086122 1.52024C-0.0341029 1.39208 -0.0276674 1.19072 0.100496 1.0705Z"
+        fill="#0084FF"
+      />
+    </svg>
+  ),
+  bottom: (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.9297 2V22"
+        stroke="#0084FF"
+        strokeWidth="1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19 16L14 21.1599C13.7437 21.4336 13.434 21.6519 13.0899 21.801C12.7459 21.9502 12.375 22.0271 12 22.0271C11.625 22.0271 11.2541 21.9502 10.9101 21.801C10.566 21.6519 10.2563 21.4336 10 21.1599L5 16"
+        stroke="#0084FF"
+        strokeWidth="1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  ),
 }

package/src/creator/src/components/ConsumablesManager.tsx

@@ -0,0 +1,21 @@
+import { useEffect } from "react"
+import { getConsumables, parseConsumables } from "../utils/lib"
+import useStore from "../utils/store"
+
+export const ConsumablesManager = () => {
+  const auth = useStore((state) => state.auth)
+  const setConsumables = useStore((state) => state.setConsumables)
+
+  useEffect(() => {
+    if (auth.bcToken) {
+      fetchConsumables()
+    }
+  }, [auth])
+
+  const fetchConsumables = async () => {
+    const consumables = await getConsumables(auth.bcToken)
+    setConsumables(parseConsumables(consumables.voids))
+  }
+
+  return <></>
+}

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

@@ -0,0 +1,167 @@
+import { useEffect, useState, useRef } from "react"
+import useStore from "../../utils/store"
+import { Lesson, LessonItem } from "../LessonItem"
+import { SVGS } from "../../assets/svgs"
+
+export const GenerateButton = ({
+  handleSubmit,
+}: {
+  handleSubmit: () => void
+}) => {
+  return (
+    <div className="flex justify-end mt-6">
+      <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"
+      >
+        <span>I'm ready. Create the course for me!</span>
+        {SVGS.rigoSoftBlue}
+      </button>
+    </div>
+  )
+}
+export const ContentIndex = ({
+  prevLessons,
+  handleSubmit,
+}: {
+  prevLessons?: Lesson[]
+  handleSubmit: () => void
+}) => {
+  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) => {
+    setSyllabus({
+      ...syllabus,
+      lessons: syllabus.lessons.filter((lesson) => lesson.id !== id),
+    })
+  }
+
+  const handleChange = (id: string, newTitle: string) => {
+    setSyllabus({
+      ...syllabus,
+      lessons: syllabus.lessons.map((lesson) =>
+        lesson.id === id ? { ...lesson, title: newTitle } : lesson
+      ),
+    })
+  }
+
+  const addLessonAfter = (index: number, id: string) => {
+    const newLesson: Lesson = {
+      id: (parseFloat(id) + 0.1).toString(),
+      title: "Hello World",
+      type: "READ",
+      duration: 2,
+      description: "Hello World",
+    }
+    const updated = [...syllabus.lessons]
+    updated.splice(index + 1, 0, newLesson)
+
+    setSyllabus({
+      lessons: updated,
+    })
+  }
+
+  useEffect(() => {
+    const container = containerRef.current
+
+    const checkScroll = () => {
+      if (container) {
+        const nearBottom =
+          container.scrollHeight >
+          container.clientHeight + container.scrollTop + 100
+
+        setShowScrollHint(nearBottom)
+      }
+    }
+
+    checkScroll()
+    container?.addEventListener("scroll", checkScroll)
+    return () => container?.removeEventListener("scroll", checkScroll)
+  }, [syllabus.lessons])
+
+  const scrollToBottom = (target: "bottom" | "continue") => {
+    if (target === "continue") {
+      const container = containerRef.current
+      if (container) {
+        const scrollStep = container.clientHeight * 0.8
+        container.scrollBy({ top: scrollStep, behavior: "smooth" })
+      }
+    } else {
+      const container = containerRef.current
+      if (container) {
+        container.scrollTo({ top: container.scrollHeight, behavior: "smooth" })
+      }
+    }
+  }
+
+  return (
+    <div className="relative">
+      <div
+        ref={containerRef}
+        className=" space-y-3 overflow-y-auto max-h-[70vh] pr-2 scrollbar-hide relative"
+      >
+        {syllabus.lessons.map((lesson, index) => (
+          <div key={lesson.id}>
+            <LessonItem
+              key={lesson.id}
+              index={lesson.id}
+              lesson={lesson}
+              onChange={handleChange}
+              onRemove={handleRemove}
+              isNew={Boolean(
+                prevLessons &&
+                  prevLessons.length > 0 &&
+                  !prevLessons.some(
+                    (l) =>
+                      l.id === lesson.id &&
+                      l.title === lesson.title &&
+                      l.type === lesson.type
+                  )
+              )}
+            />
+            <div className="relative h-6">
+              <div className="absolute left-1/2 -translate-x-1/2 -top-3">
+                <button
+                  onClick={() => addLessonAfter(index, lesson.id)}
+                  className="w-6 h-6 flex items-center justify-center bg-blue-100 text-blue-600 rounded hover:bg-blue-200 shadow-sm text-sm font-semibold cursor-pointer"
+                >
+                  +
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+        <GenerateButton handleSubmit={handleSubmit} />
+      </div>
+
+      {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-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"
+            >
+              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>
+      )}
+    </div>
+  )
+}