@learnpack/learnpack 5.0.68 → 5.0.70

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

@@ -1,300 +0,0 @@
-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"
-import {
-  parseLesson,
-  uploadFileToBucket,
-  useConsumableCall,
-} from "../utils/lib"
-import {
-  createLearnJson,
-  processExercise,
-  slugify,
-  randomUUID,
-} from "../utils/creatorUtils"
-
-import Loader from "./Loader"
-import { Message, TMessage } from "./Message"
-import { LessonItem, Lesson } from "./LessonItem"
-import FileUploader from "./FileUploader"
-import { ConsumablesManager } from "./ConsumablesManager"
-import toast from "react-hot-toast"
-
-const GenerateButton = ({ handleSubmit }: { handleSubmit: () => void }) => {
-  const auth = useStore((state) => state.auth)
-  return (
-    <div className="flex justify-end  mt-6">
-      <button
-        onClick={async () => {
-          const success = await useConsumableCall(auth.bcToken, "ai-generation")
-          if (success) {
-            handleSubmit()
-          } else {
-            toast.error("You don't have enough credits to generate a course.")
-          }
-        }}
-        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>
-  )
-}
-
-const SyllabusEditor: React.FC = () => {
-  const inputRef = useRef<HTMLTextAreaElement>(null)
-  //   const navigate = useNavigate()
-  const [messages, setMessages] = useState<TMessage[]>([])
-  const [isGenerating, setIsGenerating] = useState(false)
-  const prevLessons = useRef<Lesson[]>([])
-  const { syllabus, setSyllabus, auth } = useStore(
-    useShallow((state) => ({
-      syllabus: state.syllabus,
-      setSyllabus: state.setSyllabus,
-      auth: state.auth,
-    }))
-  )
-
-  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,
-    })
-  }
-
-  const sendPrompt = async (prompt: string) => {
-    setMessages([
-      ...messages,
-      { type: "user", content: prompt },
-      { type: "assistant", content: "" },
-    ])
-    prevLessons.current = syllabus.lessons
-    const res = await interactiveCreation(auth.rigoToken, {
-      courseInfo: JSON.stringify(syllabus),
-      prevInteractions:
-        messages
-          .map((message) => `${message.type}: ${message.content}`)
-          .join("\n") + `\nUSER: ${prompt}`,
-    })
-    console.log(res, "RES")
-    const lessons: Lesson[] = res.parsed.listOfSteps.map((step: any) =>
-      parseLesson(step)
-    )
-    setSyllabus({
-      ...syllabus,
-      lessons: lessons,
-      courseInfo: {
-        ...syllabus.courseInfo,
-        title: res.parsed.title || syllabus.courseInfo.title,
-      },
-    })
-    setMessages((prev) => {
-      const newMessages = [...prev]
-      newMessages[newMessages.length - 1].content = res.parsed.aiMessage
-      return newMessages
-    })
-  }
-
-  const handleSubmit = async () => {
-    setIsGenerating(true)
-
-    const lessonsPromises = syllabus.lessons.map((lesson) =>
-      processExercise(
-        auth.rigoToken,
-        syllabus.lessons,
-        JSON.stringify(syllabus.courseInfo),
-        lesson,
-        "courses/" +
-          slugify(syllabus.courseInfo.title || randomUUID()) +
-          "/exercises"
-      )
-    )
-    await Promise.all(lessonsPromises)
-
-    const learnJson = createLearnJson(syllabus.courseInfo)
-    await uploadFileToBucket(
-      JSON.stringify(learnJson),
-      "courses/" +
-        slugify(syllabus.courseInfo.title || randomUUID()) +
-        "/learn.json"
-    )
-    setIsGenerating(false)
-
-    window.location.href = `/?slug=${slugify(
-      syllabus.courseInfo.title || "exercises"
-    )}&token=${auth.bcToken}`
-  }
-
-  return isGenerating ? (
-    <Loader
-      listeningTo="course-generation"
-      icon={SVGS.rigoSoftBlue}
-      initialBuffer="🚀 Starting course generation..."
-      text="Learnpack is setting up your tutorial.
-It may take a moment..."
-    />
-  ) : (
-    <div className="flex w-full bg-white rounded-md shadow-md overflow-hidden h-screen ">
-      <ConsumablesManager />
-      {/* Sidebar */}
-      <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">
-        <div className="p-4 rounded-md bg-white shadow-sm">
-          <p>We generated this syllabus based on your answers.</p>
-          <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>
-
-        <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 = ""
-              }
-            }}
-          />
-          <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>
-
-      {/* Editor */}
-      <div className="w-2/3 p-8 space-y-6">
-        <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>
-
-        {/* Lessons */}
-        <div className="space-y-3 overflow-y-auto max-h-[60vh] pr-2 scrollbar-hide">
-          {syllabus.lessons.map((lesson, index) => (
-            <div key={lesson.id}>
-              <LessonItem
-                key={lesson.id}
-                index={lesson.id}
-                lesson={lesson}
-                onChange={handleChange}
-                onRemove={handleRemove}
-                isNew={
-                  prevLessons.current.length > 0 &&
-                  !prevLessons.current.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>
-          ))}
-        </div>
-
-        <GenerateButton handleSubmit={handleSubmit} />
-      </div>
-    </div>
-  )
-}
-
-export default SyllabusEditor