@learnpack/learnpack 5.0.98 → 5.0.106

package/src/creator/src/components/LinkUploader.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from "react"
+
+export interface ParsedLink {
+  url: string
+  title?: string
+  text?: string
+  transcript?: string
+  description?: string
+  author?: string
+  duration?: number
+  thumbnail?: string
+}
+
+interface LinkUploaderProps {
+  onResult: (links: ParsedLink[]) => void
+  apiBase?: string
+}
+
+const toBase64Url = (str: string) =>
+  btoa(str).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "")
+
+const LinkUploader: React.FC<LinkUploaderProps> = ({
+  onResult,
+  apiBase = "http://localhost:3000",
+}) => {
+  const [url, setUrl] = useState("")
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleAdd = async () => {
+    const raw = url.trim()
+    if (!raw) return setError("Please enter a URL.")
+    setError(null)
+    setLoading(true)
+
+    try {
+      const key = toBase64Url(raw)
+      const resp = await fetch(`${apiBase}/actions/fetch/${key}`)
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+      const data = (await resp.json()) as ParsedLink
+
+      onResult([data])        // emit the parsed link immediately
+      setUrl("")              // clear input
+    } catch (err: any) {
+      console.error(err)
+      setError(err.message || "Failed to fetch link.")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="max-w-md mx-auto p-6 bg-white rounded-xl shadow-lg">
+      <div className="flex space-x-2">
+        <input
+          type="url"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && handleAdd()}
+          disabled={loading}
+          placeholder="Paste your link here…"
+          className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-200 transition disabled:bg-gray-100"
+        />
+        <button
+          onClick={handleAdd}
+          disabled={loading}
+          className={`w-12 h-12 flex items-center justify-center rounded-lg text-white transition ${
+            loading
+              ? "bg-gray-400 cursor-not-allowed"
+              : "bg-learnpack hover:bg-opacity-90"
+          }`}
+        >
+          {loading ? (
+            <svg
+              className="animate-spin h-5 w-5 text-white"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8v4l3.5-3.5L12 0v4a8 8 0 100 16v-4l-3.5 3.5L4 12z"
+              />
+            </svg>
+          ) : (
+            <span className="text-2xl leading-none">+</span>
+          )}
+        </button>
+      </div>
+
+      {error && (
+        <p className="mt-3 text-sm text-red-600 bg-red-50 p-2 rounded">
+          {error}
+        </p>
+      )}
+    </div>
+  )
+}
+
+export default LinkUploader

package/src/creator/src/components/PreviewGenerator.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect } from "react"
+import html2canvas from "html2canvas"
+
+import useStore from "../utils/store"
+import { uploadImageToBucket } from "../utils/lib"
+import { slugify } from "../utils/creatorUtils"
+import { eventBus } from "../utils/eventBus"
+// import { SVGS } from "../assets/svgs"
+
+function proxify(link: string) {
+  // Validar que el enlace no sea vacío
+  if (!link) {
+    throw new Error("El enlace es requerido")
+  }
+
+  const encodedUrl = btoa(link)
+
+  return `http://localhost:3000/proxy?url=${encodedUrl}`
+}
+
+const PreviewGenerator: React.FC = () => {
+  const history = useStore((state) => state.history)
+  const auth = useStore((state) => state.auth)
+
+  const syllabus = history[history.length - 1]
+
+  useEffect(() => {
+    const handleDownload = () => {
+      eventBus.emit("course-generation", {
+        message: "📷 Generating preview image...",
+      })
+      const previewElement = document.getElementById("preview")
+      if (previewElement) {
+        html2canvas(previewElement, {
+          useCORS: true,
+        }).then(async (canvas) => {
+        //   const anchor = document.createElement("a")
+        //   anchor.href = canvas.toDataURL("image/png")
+        //   anchor.download = "preview.png"
+        //   anchor.click()
+
+          const imageUrl = canvas.toDataURL("image/png")
+
+          await uploadImageToBucket(
+            imageUrl,
+            `courses/${slugify(syllabus.courseInfo?.title || "")}/preview.png`
+          )
+          eventBus.emit("course-generation", {
+            message: "✅ Preview image generated and uploaded to course.",
+          })
+        })
+      }
+    }
+    handleDownload()
+  }, [])
+
+  return (
+    <div className="fixed">
+      <div
+        id="preview"
+        style={{
+          width: "1000px",
+          height: "630px",
+          background: "white",
+        }}
+      >
+        <div className="bg-learnpack-blue p-4 rounded-md" />
+        <div className="px-4 -mt-5">
+          <h1 className="text-2xl font-bold">{syllabus.courseInfo?.title}</h1>
+          <p className="mt-5 text-sm">{syllabus.courseInfo?.description}</p>
+          <div className="flex items-center gap-2 mt-5">
+            <img
+              src={proxify(auth.user?.profile?.avatar_url || "")}
+              alt="Profile"
+              className="w-10 h-10 rounded-full mt-3"
+            />
+            <div>
+              <p className=" text-sm font-bold">
+                Author: {auth.user?.first_name} {auth.user?.last_name}
+              </p>
+              <small className=" text-sm">
+                Published on: {new Date().toLocaleDateString()}
+              </small>
+            </div>
+            <div className="ml-auto">
+              <img src="logo.png" className="w-10 h-10" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PreviewGenerator

package/src/creator/src/components/Source.tsx

@@ -0,0 +1,68 @@
+import React from "react"
+import { ParsedLink } from "./LinkUploader"
+import useStore from "../utils/store"
+import { SVGS } from "../assets/svgs"
+
+interface SourceProps {
+  source: ParsedLink
+}
+
+// const formatDuration = (sec: number) => {
+//   const m = Math.floor(sec / 60)
+//   const s = sec % 60
+//   return `${m}:${s.toString().padStart(2, "0")}`
+// }
+
+const Source: React.FC<SourceProps> = ({ source }) => {
+  const setFormState = useStore((state) => state.setFormState)
+  const formState = useStore((state) => state.formState)
+
+  const {
+    url,
+    title,
+    // author,
+    thumbnail,
+    // duration,
+    // description,
+    // transcript,
+    // text,
+  } = source
+
+
+
+  return (
+    <div className="relative max-w-xs bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
+      <div className="p-4 flex flex-col space-y-2">
+        <button
+          className="absolute top-2 right-2"
+          onClick={() => {
+            setFormState({
+              sources: formState.sources.filter((s) => s !== source),
+            })
+          }}
+        >
+          {SVGS.redClose}
+        </button>
+        <div className="flex items-center gap-2 justify-start">
+          {thumbnail && (
+            <img
+              src={thumbnail}
+              alt={title || url}
+              className="w-10 h-10 object-cover"
+            />
+          )}
+          {title && (
+            <span
+              className="text-sm font-semibold text-left text-gray-800 "
+              title={title}
+            >
+              {title}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Source

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

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import useStore from "../../utils/store"
 import { TMessage } from "../Message"
 import FileUploader from "../FileUploader"
@@ -15,12 +15,26 @@ export const Sidebar = ({
   sendPrompt: (prompt: string) => void
   handleSubmit: () => void
 }) => {
+  const sidebarRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLTextAreaElement>(null)
   const uploadedFiles = useStore((state) => state.uploadedFiles)
   const setUploadedFiles = useStore((state) => state.setUploadedFiles)
 
   const [isOpen, setIsOpen] = useState(false)
 
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        isOpen &&
+        sidebarRef.current &&
+        !sidebarRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false)
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => document.removeEventListener("mousedown", handleClickOutside)
+  }, [isOpen])
   return (
     <>
       {!isOpen && (
@@ -33,6 +47,7 @@ export const Sidebar = ({
       )}
 
       <div
+        ref={sidebarRef}
         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"
         }`}
@@ -81,16 +96,16 @@ export const Sidebar = ({
             onKeyUp={(e) => {
               if (e.key === "Enter" && !e.shiftKey) {
                 e.preventDefault()
-                sendPrompt(inputRef.current?.value || "")
+                const val = inputRef.current?.value.trim() || ""
+
+                if (val.toLowerCase() === "ok") {
+                  handleSubmit()
+                } else {
+                  sendPrompt(val)
+                }
+
                 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">
@@ -104,7 +119,17 @@ export const Sidebar = ({
 
             <button
               className="cursor-pointer blue-on-hover flex items-center justify-center w-6 h-6"
-              onClick={() => sendPrompt(inputRef.current?.value || "")}
+              onClick={() => {
+                if (inputRef.current?.value) {
+                  const val = inputRef.current?.value.trim() || ""
+                  if (val.toLowerCase() === "ok") {
+                    handleSubmit()
+                  } else {
+                    sendPrompt(val)
+                  }
+                  inputRef.current!.value = ""
+                }
+              }}
             >
               {SVGS.send}
             </button>

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

@@ -28,6 +28,7 @@ import { Sidebar } from "./Sidebar"
 import Login from "../Login"
 import { eventBus } from "../../utils/eventBus"
 import { useNavigate } from "react-router"
+import PreviewGenerator from "../PreviewGenerator"
 
 const SyllabusEditor: React.FC = () => {
   const navigate = useNavigate()
@@ -115,6 +116,7 @@ const SyllabusEditor: React.FC = () => {
       courseInfo: {
         ...syllabus.courseInfo,
         title: res.parsed.title || syllabus.courseInfo.title,
+        description: res.parsed.description || syllabus.courseInfo.description,
       },
     })
     setMessages((prev) => {
@@ -135,6 +137,7 @@ const SyllabusEditor: React.FC = () => {
       toast.error("Please provide a title for the course")
       return
     }
+    setIsGenerating(true)
 
     let tokenToUse = auth.rigoToken
     const onValidRigoToken = (rigotoken: string) => {
@@ -201,14 +204,19 @@ const SyllabusEditor: React.FC = () => {
 
   if (!syllabus) return null
 
+  console.log(auth.user)
+
   return isGenerating ? (
-    <Loader
-      listeningTo="course-generation"
-      icon={<img src={"rigo-float.gif"} alt="rigo" className="w-20 h-20" />}
-      initialBuffer="🚀 Starting course generation..."
-      text="Learnpack is setting up your tutorial.
+    <>
+      <Loader
+        listeningTo="course-generation"
+        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..."
-    />
+      />
+      <PreviewGenerator />
+    </>
   ) : (
     <div className="flex w-full bg-white rounded-md shadow-md overflow-hidden h-screen ">
       {showLoginModal && (
@@ -226,7 +234,9 @@ It may take a moment..."
         sendPrompt={sendPrompt}
         handleSubmit={handleSubmit}
       />
-
+      <button onClick={() => setShowLoginModal(true)}>
+        Mostrar modal de Login
+      </button>
       <ContentIndex
         handleSubmit={handleSubmit}
         messages={messages}

package/src/creator/src/index.css

@@ -44,6 +44,10 @@ h1 {
   background-color: var(--soft-blue);
 }
 
+.bg-learnpack {
+  background-color: var(--learnpack-blue);
+}
+
 .bg-gray-blue {
   background-color: #e7f1ff;
 }

package/src/creator/src/main.tsx

@@ -5,6 +5,7 @@ import "./index.css"
 import App from "./App.tsx"
 import SyllabusEditor from "./components/syllabus/SyllabusEditor.tsx"
 import { Toaster } from "react-hot-toast"
+import PreviewGenerator from "./components/PreviewGenerator.tsx"
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <Toaster />
@@ -12,6 +13,7 @@ createRoot(document.getElementById("root")!).render(
       <Routes>
         <Route path="/creator" element={<App />} />
         <Route path="/creator/syllabus" element={<SyllabusEditor />} />
+        <Route path="/creator/image" element={<PreviewGenerator />} />
       </Routes>
     </BrowserRouter>
   </StrictMode>

package/src/creator/src/utils/creatorUtils.ts

@@ -30,6 +30,7 @@ export const createLearnJson = (courseInfo: FormState) => {
     telemetry: {
       batch: "https://breathecode.herokuapp.com/v1/assignment/me/telemetry",
     },
+    preview: "preview.png",
   }
   return learnJson
 }

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

@@ -1,6 +1,7 @@
 import { create } from "zustand"
 import { persist } from "zustand/middleware"
 import { Lesson } from "../components/LessonItem"
+import { ParsedLink } from "../components/LinkUploader"
 
 export type FormState = {
   description: string
@@ -8,6 +9,7 @@ export type FormState = {
   targetAudience: string
   hasContentIndex: boolean
   contentIndex: string
+  sources: ParsedLink[]
   isCompleted: boolean
   variables: string[]
   currentStep: string
@@ -66,12 +68,13 @@ const useStore = create<Store>()(
         targetAudience: "",
         hasContentIndex: false,
         contentIndex: "",
+        sources: [],
         isCompleted: false,
         currentStep: "description",
         variables: [
           "description",
           "duration",
-          "targetAudience",
+          // "targetAudience",
           "hasContentIndex",
         ],
       },