@learnpack/learnpack 5.0.70 → 5.0.72

package/src/creator/src/components/Login.tsx

@@ -1,131 +1,45 @@
 import { useEffect, useState } from "react"
-import { BREATHECODE_HOST, RIGOBOT_HOST } from "../utils/constants"
+import { BREATHECODE_HOST } from "../utils/constants"
 import { SVGS } from "../assets/svgs"
 import toast from "react-hot-toast"
 import useStore from "../utils/store"
 import { useShallow } from "zustand/react/shallow"
-import { checkParams } from "../utils/lib"
-
-type LoginInfo = {
-  email: string
-  password: string
-}
-
-const getRigobotJSON = async (breathecodeToken: string) => {
-  const rigoUrl = `${RIGOBOT_HOST}/v1/auth/me/token?breathecode_token=${breathecodeToken}`
-  const rigoResp = await fetch(rigoUrl)
-  if (!rigoResp.ok) {
-    throw new Error("Unable to obtain Rigobot token")
-  }
-  const rigobotJson = await rigoResp.json()
-  return rigobotJson
-}
-const validateUser = async (breathecodeToken: string) => {
-  const config = {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Token ${breathecodeToken}`,
-    },
-  }
-
-  const res = await fetch(`${BREATHECODE_HOST}/v1/auth/user/me`, config)
-  if (!res.ok) {
-    console.log("ERROR", res)
-    return null
-  }
-  const json = await res.json()
-
-  if ("roles" in json) {
-    delete json.roles
-  }
-  if ("permissions" in json) {
-    delete json.permissions
-  }
-  if ("settings" in json) {
-    delete json.settings
-  }
-
-  return json
-}
-
-const login4Geeks = async (loginInfo: LoginInfo) => {
-  const url = `${BREATHECODE_HOST}/v1/auth/login/`
-
-  const res = await fetch(url, {
-    body: JSON.stringify(loginInfo),
-    method: "post",
-    headers: {
-      "Content-Type": "application/json",
-    },
-  })
-
-  if (!res.ok) {
-    throw Error("Unable to login with provided credentials")
-  }
-
-  const json = await res.json()
-
-  const rigoJson = await getRigobotJSON(json.token)
-
-  const user = await validateUser(json.token)
-  const returns = { ...json, rigobot: { ...rigoJson }, user }
-
-  return returns
-}
-
-export const loginWithToken = async (token: string) => {
-  const rigoJson = await getRigobotJSON(token)
-
-  const user = await validateUser(token)
-
-  const returns = { rigobot: { ...rigoJson }, ...user }
-
-  return returns
-}
+import { checkParams, login4Geeks, loginWithToken } from "../utils/lib"
 
 export default function Login({ onFinish }: { onFinish: () => void }) {
   const [email, setEmail] = useState("")
   const [password, setPassword] = useState("")
   const [isLoading, setIsLoading] = useState(false)
-
   const [showForm, setShowForm] = useState(false)
 
   const { setAuth } = useStore(
-    useShallow((state) => ({
-      setAuth: state.setAuth,
-    }))
+    useShallow((state) => ({ setAuth: state.setAuth }))
   )
 
-  const login = async (e: any) => {
-    setIsLoading(true)
-
-    const tid = toast.loading("Logging in...")
+  const login = async (e: React.FormEvent) => {
     e.preventDefault()
+    setIsLoading(true)
+    const tid = toast.loading("Logging in…")
 
     if (!email || !password) {
-      //   toast.error(t("please-fill-all-fields"))
       setIsLoading(false)
+      toast.error("Please fill all fields", { id: tid })
       return
     }
 
-    const isLoggedId = await login4Geeks({
-      email: email,
-      password: password,
-    })
-
-    if (!isLoggedId) {
+    const resp = await login4Geeks({ email, password })
+    if (!resp) {
       setIsLoading(false)
-      toast.error("Unable to login with provided credentials", { id: tid })
+      toast.error("Invalid credentials", { id: tid })
       return
     }
 
     toast.success("Logged in successfully", { id: tid })
-
     setAuth({
-      bcToken: isLoggedId.token,
-      userId: isLoggedId.user.id,
-      rigoToken: isLoggedId.rigobot.key,
+      bcToken: resp.token,
+      userId: resp.user.id,
+      rigoToken: resp.rigobot.key,
+      user: resp.user,
     })
     setIsLoading(false)
     onFinish()
@@ -136,66 +50,46 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
   }
 
   function getCurrentUrlWithQueryParams() {
-    // let currentUrl = window.location.origin + window.location.pathname
-
     return window.location.href
   }
 
   const redirectGithub = () => {
-    let currentUrl = getCurrentUrlWithQueryParams()
-
-    window.location.href = `${BREATHECODE_HOST}/v1/auth/github/?url=${stringToBase64(
-      currentUrl
-    )}`
+    const url = stringToBase64(getCurrentUrlWithQueryParams())
+    window.location.href = `${BREATHECODE_HOST}/v1/auth/github/?url=${url}`
   }
 
   useEffect(() => {
-    verifySession()
-  }, [])
-
-  const verifySession = async () => {
-    const { token } = checkParams()
-    if (token) {
-      const user = await loginWithToken(token)
-
-      if (user) {
-        setAuth({
-          bcToken: token,
-          userId: user.id,
-          rigoToken: user.rigobot.key,
-        })
-        onFinish()
+    ;(async () => {
+      const { token } = checkParams()
+      if (token) {
+        const user = await loginWithToken(token)
+        if (user) {
+          setAuth({
+            bcToken: token,
+            userId: user.id,
+            rigoToken: user.rigobot.key,
+            user,
+          })
+          onFinish()
+        }
       }
-    }
-  }
+    })()
+  }, [])
 
   return (
-    <>
-      <div className="max-w-sm mx-auto mt-10 bg-white p-8 rounded-xl shadow-md text-center">
-        <div className="flex justify-between items-center mb-4">
-          <h2 className="text-xl font-semibold">Login</h2>
-          <div className="bg-blue-50 text-sm p-2 rounded text-left">
-            <p className="text-gray-700 m-0">You don't have an account?</p>
-            <a
-              href="https://4geeks.com/pricing?plan=basic"
-              className="text-blue-600 font-medium"
-            >
-              Register here.
-            </a>
-          </div>
-        </div>
-
-        <p className="text-gray-600 mb-6">
-          Log in to 4Geeks to get performance statistics, access to our AI
-          mentor, and many other benefits
-        </p>
-
+    <div
+      className="fixed inset-0 bg-black/50 flex items-center justify-center z-1000"
+      onClick={onFinish}
+    >
+      <div
+        className="bg-white p-8 rounded-xl shadow-md max-w-sm w-full"
+        onClick={(e) => e.stopPropagation()}
+      >
         <button
           onClick={redirectGithub}
-          className="w-full border border-gray-300 py-2 rounded-md font-semibold flex items-center justify-center gap-2 mb-4 cursor-pointer"
+          className="w-full border border-gray-300 py-2 rounded-md font-semibold flex items-center justify-center gap-2 mb-4"
         >
-          {SVGS.github}
-          LOGIN WITH GITHUB
+          {SVGS.github} LOGIN WITH GITHUB
         </button>
 
         <div className="flex items-center mb-4">
@@ -221,14 +115,14 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
             <div className="flex gap-2 mt-4">
               <button
                 type="submit"
-                className="flex-1 bg-sky-500 text-white py-2 rounded-md font-semibold cursor-pointer  "
+                className="flex-1 bg-sky-500 text-white py-2 rounded-md font-semibold"
               >
                 {isLoading ? "Logging in..." : "Log in"}
               </button>
               <button
                 type="button"
                 onClick={() => setShowForm(false)}
-                className="flex-1 border border-sky-500 text-sky-600 py-2 rounded-md font-semibold cursor-pointer"
+                className="flex-1 border border-sky-500 text-sky-600 py-2 rounded-md font-semibold"
               >
                 Skip
               </button>
@@ -246,12 +140,25 @@ export default function Login({ onFinish }: { onFinish: () => void }) {
         ) : (
           <button
             onClick={() => setShowForm(true)}
-            className="w-full bg-blue-600 text-white py-2 rounded-md font-semibold cursor-pointer"
+            className="w-full bg-blue-600 text-white py-2 rounded-md font-semibold"
           >
             Login with Email
           </button>
         )}
+
+        <div className="flex justify-between items-center mt-4">
+          <div className="bg-blue-50 text-sm p-2 rounded text-left">
+            <p className="text-gray-700 m-0">You don't have an account?</p>
+            <a
+              href="https://4geeks.com/checkout?plan=4geeks-creator"
+              target="_blank"
+              className="text-blue-600 font-medium"
+            >
+              Register here.
+            </a>
+          </div>
+        </div>
       </div>
-    </>
+    </div>
   )
 }

package/src/creator/src/components/Message.tsx

@@ -1,6 +1,7 @@
 import { RigoLoader } from "./RigoLoader"
 
 import { SVGS } from "../assets/svgs"
+import useStore from "../utils/store"
 
 export type TMessage = {
   type: "user" | "assistant"
@@ -8,9 +9,12 @@ export type TMessage = {
 }
 
 export const Message: React.FC<TMessage> = ({ type, content }) => {
+  const user = useStore((state) => state.auth.user)
   const isAI = type === "assistant"
 
   const isLoading = isAI && !content
+
+  console.log("user", user)
   return isLoading ? (
     <RigoLoader text="Thinking..." svg={<img src="rigo-float.gif" />} />
   ) : (
@@ -21,7 +25,13 @@ export const Message: React.FC<TMessage> = ({ type, content }) => {
           : "bg-blue-50 border-blue-200 text-blue-900"
       }`}
     >
-      <span className="mt-1">{isAI ? SVGS.rigoSoftBlue : SVGS.user}</span>
+      {isAI ? (
+        <span className="mt-1">{SVGS.rigoSoftBlue}</span>
+      ) : user?.profile?.avatar_url ? (
+        <img src={user?.profile?.avatar_url} className="w-6 h-6 rounded-full" />
+      ) : (
+        <span className="mt-1">{SVGS.user}</span>
+      )}
       <p className="text-sm leading-relaxed">{content}</p>
     </div>
   )

package/src/creator/src/components/Redirector.tsx

@@ -0,0 +1,12 @@
+import { useEffect } from "react"
+import toast from "react-hot-toast"
+export const Redirector = ({ to }: { to: string }) => {
+  useEffect(() => {
+    window.location.href = to
+    window.location.reload()
+    toast.success("Redirecting to " + to)
+    console.log("Redirecting to " + to)
+  }, [])
+
+  return <h1>Redirecting to {to}...</h1>
+}

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

@@ -3,6 +3,8 @@ import useStore, { Syllabus } from "../../utils/store"
 import { Lesson, LessonItem } from "../LessonItem"
 import { SVGS } from "../../assets/svgs"
 import { TMessage } from "../Message"
+import Loader from "../Loader"
+import { motion, AnimatePresence } from "framer-motion"
 
 const ContentIndexHeader = ({
   messages,
@@ -11,22 +13,48 @@ const ContentIndexHeader = ({
   messages: TMessage[]
   syllabus: Syllabus
 }) => {
+  const isFirst =
+    messages.filter((m) => m.type === "assistant" && m.content.length > 0)
+      .length === 2
+
+  const headerText = isFirst
+    ? "I've created a detailed structure for your course."
+    : "I've updated the structure based on your feedback."
+
+  const subText = isFirst
+    ? `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"
+
   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>
+    <div className="mt-2">
+      <AnimatePresence mode="wait">
+        <motion.h2
+          key={headerText}
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 10 }}
+          transition={{ duration: 0.2 }}
+          className="text-lg font-semibold"
+        >
+          {headerText}
+        </motion.h2>
+      </AnimatePresence>
+
+      <AnimatePresence mode="wait">
+        <motion.p
+          key={subText}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2, delay: 0.1 }}
+          className="text-sm text-gray-600 mt-1"
+        >
+          {subText}
+        </motion.p>
+      </AnimatePresence>
+
       <h3 className="text-sm text-gray-600 mt-2 font-bold">
         {syllabus.courseInfo.title}
       </h3>
@@ -34,6 +62,8 @@ const ContentIndexHeader = ({
   )
 }
 
+export default ContentIndexHeader
+
 export const GenerateButton = ({
   handleSubmit,
 }: {
@@ -57,10 +87,12 @@ export const ContentIndex = ({
   prevLessons,
   handleSubmit,
   messages,
+  isThinking,
 }: {
   prevLessons?: Lesson[]
   handleSubmit: () => void
   messages: TMessage[]
+  isThinking: boolean
 }) => {
   const syllabus = useStore((state) => state.syllabus)
   const setSyllabus = useStore((state) => state.setSyllabus)
@@ -139,61 +171,59 @@ export const ContentIndex = ({
       <ContentIndexHeader messages={messages} syllabus={syllabus} />
       <div
         ref={containerRef}
-        className=" space-y-3 overflow-y-auto max-h-[70vh] pr-2 scrollbar-hide relative pb-5"
+        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.title}
-              lesson={lesson}
-              onChange={handleChange}
-              onRemove={() => handleRemove(lesson)}
-              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>
+        {isThinking ? (
+          <Loader text="Thinking..." minheight="min-h-[70vh]" />
+        ) : (
+          <>
+            {syllabus.lessons.map((lesson, index) => (
+              <div key={lesson.id}>
+                <LessonItem
+                  key={lesson.id + index + lesson.title}
+                  lesson={lesson}
+                  onChange={handleChange}
+                  onRemove={() => handleRemove(lesson)}
+                  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>
-            </div>
-          </div>
-        ))}
-        <GenerateButton handleSubmit={handleSubmit} />
+            ))}
+            <GenerateButton handleSubmit={handleSubmit} />
+          </>
+        )}
       </div>
 
-      {showScrollHint && (
+      {showScrollHint && !isThinking && (
         <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-60 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

@@ -24,10 +24,10 @@ export const Sidebar = ({
     <>
       {!isOpen && (
         <button
-          className="fixed  top-2 left-2 z-50 lg:hidden bg-white p-1 rounded shadow-md cursor-pointer"
+          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>
       )}
 
@@ -44,17 +44,8 @@ export const Sidebar = ({
             ✕
           </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">
+        <div className="space-y-2 pb-32 h-[85%] overflow-y-auto scrollbar-hide">
           {messages.map((message, index) => (
             <Message
               key={index}