@learnpack/learnpack 5.0.316 → 5.0.318

package/src/creator/src/components/FileUploader.tsx

@@ -7,6 +7,11 @@ import CreatorSocket from "../utils/socket"
 import { DEV_MODE, RIGOBOT_HOST } from "../utils/constants"
 import axios from "axios"
 import { useTranslation } from "react-i18next"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 
 const socketClient = new CreatorSocket("")
 
@@ -80,17 +85,18 @@ const UploadedFileCard = ({ idx, file }: { idx: number; file: ParsedFile }) => {
   }, [])
 
   return (
-    <div
-      className={
-        "p-3 rounded-md shadow-sm text-sm text-gray-800 text-left flex items-center gap-2" +
-        (file.status === "PROCESSING"
-          ? " bg-gray-100"
-          : file.status === "ERROR"
-          ? " bg-red-100"
-          : " bg-white")
-      }
-      title={file.name}
-    >
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div
+          className={
+            "p-3 rounded-md shadow-sm text-sm text-gray-800 text-left flex items-center gap-2" +
+            (file.status === "PROCESSING"
+              ? " bg-gray-100"
+              : file.status === "ERROR"
+              ? " bg-red-100"
+              : " bg-white")
+          }
+        >
       {file.status === "PROCESSING" && (
         <div className="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
       )}
@@ -113,7 +119,12 @@ const UploadedFileCard = ({ idx, file }: { idx: number; file: ParsedFile }) => {
       >
         {SVGS.trash}
       </button>
-    </div>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{file.name}</p>
+      </TooltipContent>
+    </Tooltip>
   )
 }
 
@@ -256,17 +267,24 @@ const FileUploader: React.FC<FileUploaderProps> = ({
 
       {styledAs === "button" && (
         <div className="flex items-center justify-end gap-2 w-100">
-          <button
-            type="button"
-            className="cursor-pointer blue-on-hover flex items-center justify-center w-6 h-6"
-            onClick={() => inputRef.current?.click()}
-          >
-            {isLoading ? (
-              <div className="loader w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
-            ) : (
-              SVGS.clip
-            )}
-          </button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                className="cursor-pointer blue-on-hover flex items-center justify-center w-6 h-6"
+                onClick={() => inputRef.current?.click()}
+              >
+                {isLoading ? (
+                  <div className="loader w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
+                ) : (
+                  SVGS.clip
+                )}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{t("tooltips.attachFiles")}</p>
+            </TooltipContent>
+          </Tooltip>
         </div>
       )}
 

package/src/creator/src/components/LanguageDetectionModal.tsx

@@ -37,7 +37,7 @@ export default function LanguageDetectionModal({
             onClick={onStay}
             className="flex-1 bg-gray-200 text-gray-800 py-2 px-4 rounded-md font-semibold hover:bg-gray-300 transition-colors"
           >
-            {t(`languageDetection.stayIn${i18n.language.toLowerCase()}`)}
+            {t(`languageDetection.stayIn${i18n.language.toLowerCase().split("-")[0]}`)}
           </button>
         </div>
       </div>

package/src/creator/src/components/LessonItem.tsx

@@ -6,6 +6,12 @@ import { useRef } from "react"
 import { SVGS } from "../assets/svgs"
 import useStore from "../utils/store"
 import { Icon } from "./Icon"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { useTranslation } from "react-i18next"
 
 export interface Lesson {
   id: string
@@ -56,6 +62,7 @@ export const LessonItem: React.FC<LessonItemProps> = ({
   const mode = useStore((state) => state.mode)
   const inputRef = useRef<HTMLInputElement>(null)
   const [isEditing, setIsEditing] = useState(false)
+  const { t } = useTranslation()
 
   return (
     <div
@@ -96,55 +103,79 @@ export const LessonItem: React.FC<LessonItemProps> = ({
 
       {mode === "teacher" && (
         <>
-          <button
-            onClick={() => onToggleLock?.(lesson.uid)}
-            className={`cursor-pointer ${
-              lesson.locked 
-                ? "text-yellow-600 hover:text-yellow-700" 
-                : "text-gray-400 hover:text-yellow-600"
-            }`}
-            title={lesson.locked ? "Unlock lesson" : "Lock lesson"}
-          >
-            <Icon 
-              name={lesson.locked ? "Lock" : "Unlock"} 
-              size={16} 
-            />
-          </button>
-          <button
-            onClick={() => {
-              if (!lesson.locked) {
-                setIsEditing(!isEditing)
-                if (inputRef.current) {
-                  onChange(lesson.uid, inputRef.current.value)
-                }
-              }
-            }}
-            className={`${
-              lesson.locked 
-                ? "text-gray-300 cursor-not-allowed" 
-                : "text-gray-500 hover:text-blue-500 cursor-pointer"
-            }`}
-            disabled={lesson.locked}
-            title={lesson.locked ? "Cannot edit locked lesson" : "Edit lesson"}
-          >
-            <Icon name="Edit" size={16} />
-          </button>
-          <button
-            onClick={() => {
-              if (!lesson.locked) {
-                onRemove()
-              }
-            }}
-            className={`${
-              lesson.locked 
-                ? "text-gray-300 cursor-not-allowed" 
-                : "text-red-500 hover:text-red-700 cursor-pointer"
-            }`}
-            disabled={lesson.locked}
-            title={lesson.locked ? "Cannot delete locked lesson" : "Delete lesson"}
-          >
-            {SVGS.trash}
-          </button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="inline-flex">
+                <button
+                  onClick={() => onToggleLock?.(lesson.uid)}
+                  className={`cursor-pointer ${
+                    lesson.locked 
+                      ? "text-yellow-600 hover:text-yellow-700" 
+                      : "text-gray-400 hover:text-yellow-600"
+                  }`}
+                >
+                  <Icon 
+                    name={lesson.locked ? "Lock" : "Unlock"} 
+                    size={16} 
+                  />
+                </button>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{lesson.locked ? t("tooltips.unlockLesson") : t("tooltips.lockLesson")}</p>
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="inline-flex">
+                <button
+                  onClick={() => {
+                    if (!lesson.locked) {
+                      setIsEditing(!isEditing)
+                      if (inputRef.current) {
+                        onChange(lesson.uid, inputRef.current.value)
+                      }
+                    }
+                  }}
+                  className={`${
+                    lesson.locked 
+                      ? "text-gray-300 cursor-not-allowed" 
+                      : "text-gray-500 hover:text-blue-500 cursor-pointer"
+                  }`}
+                  disabled={lesson.locked}
+                >
+                  <Icon name="Edit" size={16} />
+                </button>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{lesson.locked ? t("tooltips.cannotEditLocked") : t("tooltips.editLesson")}</p>
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="inline-flex">
+                <button
+                  onClick={() => {
+                    if (!lesson.locked) {
+                      onRemove()
+                    }
+                  }}
+                  className={`${
+                    lesson.locked 
+                      ? "text-gray-300 cursor-not-allowed" 
+                      : "text-red-500 hover:text-red-700 cursor-pointer"
+                  }`}
+                  disabled={lesson.locked}
+                >
+                  {SVGS.trash}
+                </button>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{lesson.locked ? t("tooltips.cannotDeleteLocked") : t("tooltips.deleteLesson")}</p>
+            </TooltipContent>
+          </Tooltip>
         </>
       )}
     </div>

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

@@ -24,24 +24,59 @@ const LinkUploader: React.FC<LinkUploaderProps> = ({ onResult }) => {
   const [url, setUrl] = useState("")
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const [show404Help, setShow404Help] = useState(false)
 
   const handleAdd = async () => {
     const raw = url.trim()
-    if (!raw) return setError("Please enter a URL.")
+    if (!raw) {
+      return setError(t("uploader.youtube.enterUrl"))
+    }
+
+    // Validate YouTube URL format
+    const ytRegex =
+      /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)[A-Za-z0-9_-]{11}/
+    if (!ytRegex.test(raw)) {
+      return setError(t("uploader.youtube.invalidUrl"))
+    }
+
     setError(null)
     setLoading(true)
 
     try {
       const key = toBase64Url(raw)
-      const resp = await fetch(`/actions/fetch/${key}`)
-      if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+      const endpoint = `/actions/fetch/${key}`
+      const resp = await fetch(endpoint)
+
+      if (!resp.ok) {
+        // Handle specific error cases
+        if (resp.status === 404) {
+          setShow404Help(true)
+          throw new Error(t("uploader.youtube.notAvailable"))
+        }
+        if (resp.status === 429) {
+          const retryData = await resp.json()
+          throw new Error(
+            retryData.error || t("uploader.youtube.tooManyRequests")
+          )
+        }
+        if (resp.status === 500) {
+          const errorData = await resp.json()
+          throw new Error(
+            errorData.error || t("uploader.youtube.serviceUnavailable")
+          )
+        }
+        throw new Error(t("uploader.youtube.fetchError"))
+      }
+
       const data = (await resp.json()) as ParsedLink
 
       onResult(data) // emit the parsed link immediately
       setUrl("") // clear input
-    } catch (err: any) {
+      setShow404Help(false)
+    } catch (err: unknown) {
       console.error(err)
-      setError(err.message || "Failed to fetch link.")
+      const message = err instanceof Error ? err.message : t("uploader.youtube.fetchError")
+      setError(message)
     } finally {
       setLoading(false)
     }
@@ -57,6 +92,8 @@ const LinkUploader: React.FC<LinkUploaderProps> = ({ onResult }) => {
           onKeyDown={(e) => e.key === "Enter" && handleAdd()}
           disabled={loading}
           placeholder={t("uploader.youtube.placeholder")}
+          pattern="(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)[A-Za-z0-9_-]{11}"
+          title="Please enter a valid YouTube URL (youtube.com/watch?v=... or youtu.be/...)"
           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
@@ -96,9 +133,19 @@ const LinkUploader: React.FC<LinkUploaderProps> = ({ onResult }) => {
       </div>
 
       {error && (
-        <p className="mt-3 text-sm text-red-600 bg-red-50 p-2 rounded">
-          {error}
-        </p>
+        <div className="mt-3 text-sm bg-red-50 p-2 rounded">
+          <p className="text-red-600">{error}</p>
+          {show404Help && (
+            <div className="mt-2 text-gray-700">
+              <p>{t("uploader.youtube.notAvailableReasons.title")}</p>
+              <ul className="list-disc pl-5 mt-1">
+                <li>{t("uploader.youtube.notAvailableReasons.captions")}</li>
+                <li>{t("uploader.youtube.notAvailableReasons.privacy")}</li>
+                <li>{t("uploader.youtube.notAvailableReasons.region")}</li>
+              </ul>
+            </div>
+          )}
+        </div>
       )}
     </div>
   )

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

@@ -2,6 +2,11 @@ import React from "react"
 import { ParsedLink } from "./LinkUploader"
 // import useStore from "../utils/store"
 import { SVGS } from "../assets/svgs"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 
 interface SourceProps {
   source: ParsedLink
@@ -50,12 +55,16 @@ const Source: React.FC<SourceProps> = ({ source }) => {
             />
           )}
           {title && (
-            <span
-              className="text-sm font-semibold text-left text-gray-800 "
-              title={title}
-            >
-              {title}
-            </span>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="text-sm font-semibold text-left text-gray-800 ">
+                  {title}
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{title}</p>
+              </TooltipContent>
+            </Tooltip>
           )}
         </div>
       </div>

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

@@ -9,7 +9,11 @@ import { motion, AnimatePresence } from "framer-motion"
 import toast from "react-hot-toast"
 import { randomUUID } from "../../utils/creatorUtils"
 import { useTranslation } from "react-i18next"
-import { t } from "i18next"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 
 const ContentIndexHeader = ({
   messages,
@@ -163,6 +167,7 @@ export const ContentIndex = ({
   const mode = useStore((state) => state.mode)
   const containerRef = useRef<HTMLDivElement>(null)
   const [showScrollHint, setShowScrollHint] = useState(false)
+  const { t } = useTranslation()
 
   const syllabus = history[history.length - 1]
 
@@ -282,12 +287,19 @@ export const ContentIndex = ({
                 {mode === "teacher" && (
                   <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>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <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>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p>{t("tooltips.addLessonHere")}</p>
+                        </TooltipContent>
+                      </Tooltip>
                     </div>
                   </div>
                 )}

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

@@ -1,10 +1,11 @@
-import { useEffect, useRef, useState } from "react"
-import useStore from "../../utils/store"
-import FileUploader from "../FileUploader"
-import { SVGS } from "../../assets/svgs"
-import { Message } from "../Message"
-import { FileCard } from "../FileCard"
-import { useTranslation } from "react-i18next"
+import { useEffect, useRef, useState } from "react";
+import useStore from "../../utils/store";
+import FileUploader from "../FileUploader";
+import { SVGS } from "../../assets/svgs";
+import { Message } from "../Message";
+import { FileCard } from "../FileCard";
+import { useTranslation } from "react-i18next";
+import { Tooltip, TooltipTrigger, TooltipContent } from "../ui/tooltip";
 
 export const Sidebar = ({
   // messages,
@@ -12,19 +13,19 @@ export const Sidebar = ({
   handleSubmit,
 }: {
   // messages: TMessage[]
-  sendPrompt: (prompt: string) => void
-  handleSubmit: () => void
+  sendPrompt: (prompt: string) => void;
+  handleSubmit: () => void;
 }) => {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
 
-  const sidebarRef = useRef<HTMLDivElement>(null)
-  const inputRef = useRef<HTMLTextAreaElement>(null)
-  const uploadedFiles = useStore((state) => state.uploadedFiles)
-  const setUploadedFiles = useStore((state) => state.setUploadedFiles)
-  const messages = useStore((state) => state.messages)
-  const [showBubble, setShowBubble] = useState(true)
+  const sidebarRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const uploadedFiles = useStore((state) => state.uploadedFiles);
+  const setUploadedFiles = useStore((state) => state.setUploadedFiles);
+  const messages = useStore((state) => state.messages);
+  const [showBubble, setShowBubble] = useState(true);
 
-  const [isOpen, setIsOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {
@@ -33,12 +34,12 @@ export const Sidebar = ({
         sidebarRef.current &&
         !sidebarRef.current.contains(e.target as Node)
       ) {
-        setIsOpen(false)
+        setIsOpen(false);
       }
-    }
-    document.addEventListener("mousedown", handleClickOutside)
-    return () => document.removeEventListener("mousedown", handleClickOutside)
-  }, [isOpen])
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
   return (
     <>
       {!isOpen && (
@@ -98,9 +99,9 @@ export const Sidebar = ({
                   key={index}
                   file={file}
                   handleRemove={() => {
-                    const newFiles = [...uploadedFiles]
-                    newFiles.splice(index, 1)
-                    setUploadedFiles(newFiles)
+                    const newFiles = [...uploadedFiles];
+                    newFiles.splice(index, 1);
+                    setUploadedFiles(newFiles);
                   }}
                 />
               ))}
@@ -113,40 +114,47 @@ export const Sidebar = ({
             placeholder={t("sidebar.howCanLearnPackHelpYou")}
             onKeyUp={(e) => {
               if (e.key === "Enter" && !e.shiftKey) {
-                e.preventDefault()
-                const val = inputRef.current?.value.trim() || ""
+                e.preventDefault();
+                const val = inputRef.current?.value.trim() || "";
 
                 if (val.toLowerCase() === "ok") {
-                  handleSubmit()
+                  handleSubmit();
                 } else {
-                  sendPrompt(val)
+                  sendPrompt(val);
                 }
 
-                inputRef.current!.value = ""
+                inputRef.current!.value = "";
               }
             }}
           />
           <div className="absolute bottom-2 right-2 flex gap-1 items-center">
             <FileUploader />
-            <button
-              className="cursor-pointer blue-on-hover flex items-center justify-center w-6 h-6"
-              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>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  className="cursor-pointer blue-on-hover flex items-center justify-center w-6 h-6"
+                  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>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{t("tooltips.send")}</p>
+              </TooltipContent>
+            </Tooltip>
           </div>
         </div>
       </div>
     </>
-  )
-}
+  );
+};

package/src/creator/src/components/ui/tooltip.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border border-gray-200 bg-white px-3 py-1.5 text-sm text-gray-800 shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+

package/src/creator/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/creator/src/locales/en.json

@@ -68,7 +68,19 @@
         },
         "youtube": {
             "description": "Share a Youtube link",
-            "placeholder": "Paste your link here…"
+            "placeholder": "Paste your YouTube link here…",
+            "invalidUrl": "Please enter a valid YouTube URL",
+            "notAvailable": "Transcript not available for this video.",
+            "tooManyRequests": "Too many requests. Please try again later.",
+            "serviceUnavailable": "Service temporarily unavailable. Please try again later.",
+            "fetchError": "Failed to fetch transcript",
+            "enterUrl": "Please enter a URL",
+            "notAvailableReasons": {
+                "title": "Please check the following:",
+                "captions": "The video has captions/subtitles enabled.",
+                "privacy": "The video is public and not restricted.",
+                "region": "The video is not region-locked or blocked."
+            }
         }
     },
     "loader": {
@@ -135,5 +147,16 @@
     "turnstileModal": {
         "title": "We need to verify you are a human, wait a moment...",
         "error": "Error verifying you are a human, please try again, if the problem persists, use a different browser."
+    },
+    "tooltips": {
+        "lockLesson": "Lock lesson",
+        "unlockLesson": "Unlock lesson",
+        "editLesson": "Edit lesson",
+        "deleteLesson": "Delete lesson",
+        "cannotEditLocked": "Cannot edit locked lesson",
+        "cannotDeleteLocked": "Cannot delete locked lesson",
+        "addLessonHere": "Add lesson here",
+        "attachFiles": "Attach files",
+        "send": "Send"
     }
 }