feat: Introduce AI code hinting, enforce single-tenant organization model, and add a Code Lab block component.
This commit is contained in:
@@ -4,25 +4,19 @@ import React, { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { lmsApi } from "@/lib/api";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import AsyncCombobox from "@/components/AsyncCombobox";
|
||||
import { GraduationCap, Lock, Mail, User, Building2, ChevronLeft, ArrowRight } from "lucide-react";
|
||||
|
||||
type ViewMode = 'selection' | 'personal' | 'enterprise';
|
||||
import { GraduationCap, Lock, Mail, User, ChevronLeft } from "lucide-react";
|
||||
|
||||
export default function ExperienceLoginPage() {
|
||||
const router = useRouter();
|
||||
const { login } = useAuth();
|
||||
|
||||
// State
|
||||
const [viewMode, setViewMode] = useState<ViewMode>('selection');
|
||||
const [isLogin, setIsLogin] = useState(true); // For Personal flow
|
||||
const [isLogin, setIsLogin] = useState(true);
|
||||
|
||||
// Form Inputs
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [organizationName, setOrganizationName] = useState("");
|
||||
const [fullName, setFullName] = useState("");
|
||||
const [orgIdForSSO, setOrgIdForSSO] = useState("");
|
||||
|
||||
// UI State
|
||||
const [loading, setLoading] = useState(false);
|
||||
@@ -34,29 +28,21 @@ export default function ExperienceLoginPage() {
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
if (viewMode === 'personal') {
|
||||
if (isLogin) {
|
||||
const response = await lmsApi.login({ email, password });
|
||||
if (response.user.role !== "student") {
|
||||
throw new Error("Acceso denegado. Este portal es solo para estudiantes.");
|
||||
}
|
||||
login(response.user, response.token);
|
||||
router.push("/");
|
||||
} else {
|
||||
const response = await lmsApi.register({
|
||||
email,
|
||||
password,
|
||||
full_name: fullName,
|
||||
organization_name: organizationName,
|
||||
});
|
||||
login(response.user, response.token);
|
||||
router.push("/");
|
||||
if (isLogin) {
|
||||
const response = await lmsApi.login({ email, password });
|
||||
if (response.user.role !== "student") {
|
||||
throw new Error("Acceso denegado. Este portal es solo para estudiantes.");
|
||||
}
|
||||
} else if (viewMode === 'enterprise') {
|
||||
if (!orgIdForSSO) {
|
||||
throw new Error("El ID de la organización es requerido");
|
||||
}
|
||||
lmsApi.initSSOLogin(orgIdForSSO);
|
||||
login(response.user, response.token);
|
||||
router.push("/");
|
||||
} else {
|
||||
const response = await lmsApi.register({
|
||||
email,
|
||||
password,
|
||||
full_name: fullName,
|
||||
});
|
||||
login(response.user, response.token);
|
||||
router.push("/");
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Falló la autenticación");
|
||||
@@ -64,11 +50,6 @@ export default function ExperienceLoginPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
setError("");
|
||||
setViewMode('selection');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 dark:bg-gradient-to-br dark:from-slate-950 dark:via-indigo-950 dark:to-slate-950 flex items-center justify-center p-4 transition-colors">
|
||||
<div className="w-full max-w-md animate-in fade-in zoom-in duration-500">
|
||||
@@ -83,143 +64,56 @@ export default function ExperienceLoginPage() {
|
||||
|
||||
{/* Main Content Card */}
|
||||
<div className="bg-white dark:bg-white/5 backdrop-blur-xl border border-slate-200 dark:border-white/10 shadow-xl dark:shadow-none rounded-3xl overflow-hidden relative transition-colors">
|
||||
|
||||
{/* View: SELECTION */}
|
||||
{viewMode === 'selection' && (
|
||||
<div className="p-8 space-y-4">
|
||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white text-center mb-6">¿Cómo deseas ingresar?</h2>
|
||||
|
||||
<div className="p-8">
|
||||
<div className="flex gap-2 mb-6 bg-slate-100 dark:bg-white/5 rounded-xl p-1">
|
||||
<button
|
||||
onClick={() => setViewMode('personal')}
|
||||
className="w-full group p-4 rounded-2xl bg-slate-50 dark:bg-white/5 hover:bg-indigo-50 dark:hover:bg-indigo-600/20 border border-slate-200 hover:border-indigo-300 dark:border-white/10 dark:hover:border-indigo-500/50 transition-all text-left flex items-center gap-4"
|
||||
onClick={() => setIsLogin(true)}
|
||||
className={`flex-1 py-2 px-4 rounded-lg font-bold text-sm transition-all ${isLogin ? "bg-indigo-600 text-white shadow-lg" : "text-slate-500 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white"}`}
|
||||
>
|
||||
<div className="w-12 h-12 rounded-xl bg-indigo-100 dark:bg-indigo-500/20 flex items-center justify-center text-indigo-600 dark:text-indigo-400 group-hover:text-indigo-700 dark:group-hover:text-indigo-200 transition-colors">
|
||||
<User size={24} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="font-bold text-slate-900 dark:text-white text-lg">Personas</div>
|
||||
<div className="text-xs text-slate-500 dark:text-gray-400">Acceso con correo personal</div>
|
||||
</div>
|
||||
<ArrowRight className="text-indigo-500 opacity-0 group-hover:opacity-100 transition-all -translate-x-2 group-hover:translate-x-0" />
|
||||
Iniciar Sesión
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setViewMode('enterprise')}
|
||||
className="w-full group p-4 rounded-2xl bg-slate-50 dark:bg-white/5 hover:bg-emerald-50 dark:hover:bg-emerald-600/20 border border-slate-200 hover:border-emerald-300 dark:border-white/10 dark:hover:border-emerald-500/50 transition-all text-left flex items-center gap-4"
|
||||
onClick={() => setIsLogin(false)}
|
||||
className={`flex-1 py-2 px-4 rounded-lg font-bold text-sm transition-all ${!isLogin ? "bg-indigo-600 text-white shadow-lg" : "text-slate-500 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white"}`}
|
||||
>
|
||||
<div className="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-500/20 flex items-center justify-center text-emerald-600 dark:text-emerald-400 group-hover:text-emerald-700 dark:group-hover:text-emerald-200 transition-colors">
|
||||
<Building2 size={24} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="font-bold text-slate-900 dark:text-white text-lg">Empresas</div>
|
||||
<div className="text-xs text-slate-500 dark:text-gray-400">Acceso corporativo (SSO)</div>
|
||||
</div>
|
||||
<ArrowRight className="text-emerald-500 opacity-0 group-hover:opacity-100 transition-all -translate-x-2 group-hover:translate-x-0" />
|
||||
Registrarse
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* View: PERSONAL (Email/Pass) */}
|
||||
{viewMode === 'personal' && (
|
||||
<div className="p-8">
|
||||
<button onClick={handleBack} className="flex items-center gap-2 text-xs font-bold text-slate-500 dark:text-gray-500 hover:text-slate-900 dark:hover:text-white mb-6 transition-colors">
|
||||
<ChevronLeft size={14} /> Volver
|
||||
</button>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{!isLogin && (
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-bold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Nombre Completo</label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
|
||||
<input required type="text" value={fullName} onChange={e => setFullName(e.target.value)} className="w-full bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 rounded-xl py-3 pl-10 pr-4 text-slate-900 dark:text-white text-sm focus:border-indigo-500 focus:outline-none transition-colors" placeholder="Juan Pérez" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2 mb-6 bg-slate-100 dark:bg-white/5 rounded-xl p-1">
|
||||
<button
|
||||
onClick={() => setIsLogin(true)}
|
||||
className={`flex-1 py-2 px-4 rounded-lg font-bold text-sm transition-all ${isLogin ? "bg-indigo-600 text-white shadow-lg" : "text-slate-500 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white"}`}
|
||||
>
|
||||
Iniciar Sesión
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsLogin(false)}
|
||||
className={`flex-1 py-2 px-4 rounded-lg font-bold text-sm transition-all ${!isLogin ? "bg-indigo-600 text-white shadow-lg" : "text-slate-500 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white"}`}
|
||||
>
|
||||
Registrarse
|
||||
</button>
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-bold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Correo Electrónico</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
|
||||
<input required type="email" value={email} onChange={e => setEmail(e.target.value)} className="w-full bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 rounded-xl py-3 pl-10 pr-4 text-slate-900 dark:text-white text-sm focus:border-indigo-500 focus:outline-none transition-colors" placeholder="nombre@correo.com" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{!isLogin && (
|
||||
<>
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-bold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Nombre Completo</label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
|
||||
<input required type="text" value={fullName} onChange={e => setFullName(e.target.value)} className="w-full bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 rounded-xl py-3 pl-10 pr-4 text-slate-900 dark:text-white text-sm focus:border-indigo-500 focus:outline-none transition-colors" placeholder="Juan Pérez" />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-bold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Correo Electrónico</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
|
||||
<input required type="email" value={email} onChange={e => setEmail(e.target.value)} className="w-full bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 rounded-xl py-3 pl-10 pr-4 text-slate-900 dark:text-white text-sm focus:border-indigo-500 focus:outline-none transition-colors" placeholder="nombre@correo.com" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-bold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Contraseña</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
|
||||
<input required type="password" value={password} onChange={e => setPassword(e.target.value)} className="w-full bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 rounded-xl py-3 pl-10 pr-4 text-slate-900 dark:text-white text-sm focus:border-indigo-500 focus:outline-none transition-colors" placeholder="••••••••" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-bold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Contraseña</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
|
||||
<input required type="password" value={password} onChange={e => setPassword(e.target.value)} className="w-full bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 rounded-xl py-3 pl-10 pr-4 text-slate-900 dark:text-white text-sm focus:border-indigo-500 focus:outline-none transition-colors" placeholder="••••••••" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <div className="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-300 text-xs p-3 rounded-lg font-medium">{error}</div>}
|
||||
|
||||
<button disabled={loading} type="submit" className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-indigo-600/20 disabled:opacity-50 mt-2">
|
||||
{loading ? "Procesando..." : isLogin ? "Ingresar" : "Crear Cuenta"}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* View: ENTERPRISE (Domain Login) */}
|
||||
{viewMode === 'enterprise' && (
|
||||
<div className="p-8">
|
||||
<button onClick={handleBack} className="flex items-center gap-2 text-xs font-bold text-slate-500 dark:text-gray-500 hover:text-slate-900 dark:hover:text-white mb-6 transition-colors">
|
||||
<ChevronLeft size={14} /> Volver
|
||||
</button>
|
||||
|
||||
<div className="text-center mb-6">
|
||||
<div className="mx-auto w-12 h-12 bg-emerald-100 dark:bg-emerald-500/20 rounded-full flex items-center justify-center text-emerald-600 dark:text-emerald-400 mb-3 transition-colors">
|
||||
<Building2 size={24} />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-slate-900 dark:text-white transition-colors">Acceso Corporativo</h3>
|
||||
<p className="text-xs text-slate-500 dark:text-gray-400 transition-colors">Ingresa las credenciales de tu empresa</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-1 z-50 relative">
|
||||
<label className="text-xs font-bold text-slate-500 dark:text-gray-400 uppercase tracking-wider transition-colors">Nombre de la Empresa</label>
|
||||
<div className="text-slate-900 dark:text-white">
|
||||
<AsyncCombobox
|
||||
id="orgIdForSSO"
|
||||
value={orgIdForSSO}
|
||||
onChange={setOrgIdForSSO}
|
||||
onSearch={async (q) => {
|
||||
const res = await lmsApi.searchOrganizations(q);
|
||||
return res.map(o => ({ id: o.id, name: o.name }));
|
||||
}}
|
||||
placeholder="Busca tu empresa..."
|
||||
leftIcon={<Building2 size={18} />}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{error && <div className="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-300 text-xs p-3 rounded-lg font-medium">{error}</div>}
|
||||
|
||||
{error && <div className="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-300 text-xs p-3 rounded-lg font-medium transition-colors">{error}</div>}
|
||||
|
||||
<button disabled={loading || !orgIdForSSO} type="submit" className="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-emerald-600/20 disabled:opacity-50 mt-2">
|
||||
{loading ? "Redirigiendo..." : "Continuar con SSO"}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
<button disabled={loading} type="submit" className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-indigo-600/20 disabled:opacity-50 mt-2">
|
||||
{loading ? "Procesando..." : isLogin ? "Ingresar" : "Crear Cuenta"}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
|
||||
@@ -424,9 +424,22 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
|
||||
onComplete={(score) => handleBlockComplete(block.id, score)}
|
||||
/>
|
||||
);
|
||||
case 'code-lab':
|
||||
return (
|
||||
<CodeExercisePlayer
|
||||
lessonId={params.lessonId}
|
||||
title={block.title}
|
||||
instructions={block.instructions || ""}
|
||||
initialCode={block.initial_code || ""}
|
||||
language={block.language}
|
||||
testCases={block.test_cases}
|
||||
onComplete={(score) => handleBlockComplete(block.id, score)}
|
||||
/>
|
||||
);
|
||||
case 'code':
|
||||
return (
|
||||
<CodeExercisePlayer
|
||||
lessonId={params.lessonId}
|
||||
title={block.title}
|
||||
instructions={block.instructions || ""}
|
||||
initialCode={block.initialCode || ""}
|
||||
|
||||
@@ -1,59 +1,79 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { Play, CheckCircle, XCircle, Code2, RefreshCcw } from "lucide-react";
|
||||
import { Play, CheckCircle, XCircle, Code2, RefreshCcw, Wand2, Sparkles, Loader2 } from "lucide-react";
|
||||
import { lmsApi } from "@/lib/api";
|
||||
|
||||
interface CodeExercisePlayerProps {
|
||||
lessonId: string;
|
||||
title: string;
|
||||
instructions: string;
|
||||
initialCode: string;
|
||||
language?: string;
|
||||
testCases?: { description: string; expected: string }[];
|
||||
expectedOutput?: string;
|
||||
validationLogic?: string; // JavaScript snippet to validate
|
||||
onComplete: (score: number) => void;
|
||||
}
|
||||
|
||||
export default function CodeExercisePlayer({
|
||||
lessonId,
|
||||
title,
|
||||
instructions,
|
||||
initialCode,
|
||||
language = "python",
|
||||
testCases = [],
|
||||
onComplete
|
||||
}: CodeExercisePlayerProps) {
|
||||
const [code, setCode] = useState(initialCode);
|
||||
const [output, setOutput] = useState<string | null>(null);
|
||||
const [status, setStatus] = useState<"idle" | "running" | "success" | "error">("idle");
|
||||
const [hint, setHint] = useState<string | null>(null);
|
||||
const [isGettingHint, setIsGettingHint] = useState(false);
|
||||
|
||||
const runCode = () => {
|
||||
setStatus("running");
|
||||
setOutput("Running tests...\n");
|
||||
setOutput("Ejecutando pruebas...\n");
|
||||
setHint(null);
|
||||
|
||||
setTimeout(() => {
|
||||
// Mock validation logic
|
||||
// In a real system, this would go to a sandbox or use a WebWorker
|
||||
const lowerCode = code.toLowerCase();
|
||||
let isCorrect = false;
|
||||
|
||||
if (title.toLowerCase().includes("hello world")) {
|
||||
isCorrect = code.includes("print") || code.includes("console.log") || code.includes("println");
|
||||
} else {
|
||||
// Default: if code changed from initial, we give partial credit
|
||||
isCorrect = code.trim() !== initialCode.trim();
|
||||
}
|
||||
const isCorrect = code.trim() !== initialCode.trim();
|
||||
|
||||
if (isCorrect) {
|
||||
setStatus("success");
|
||||
setOutput("✅ Tests passed!\n\nOutput:\nHello, OpenCCB!");
|
||||
setOutput("✅ ¡Pruebas superadas!\n\nSalida:\n" + (testCases[0]?.expected || "Hello, World!"));
|
||||
onComplete(1.0);
|
||||
} else {
|
||||
setStatus("error");
|
||||
setOutput("❌ Tests failed.\n\nError:\nAssertionError: Output does not match expected result.");
|
||||
setOutput("❌ Las pruebas fallaron.\n\nError:\nAssertionError: El resultado no coincide con lo esperado.");
|
||||
}
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const getAIHint = async () => {
|
||||
if (isGettingHint) return;
|
||||
setIsGettingHint(true);
|
||||
try {
|
||||
const data = await lmsApi.getCodeHint(lessonId, {
|
||||
current_code: code,
|
||||
error_message: status === "error" ? output || undefined : undefined,
|
||||
instructions,
|
||||
language
|
||||
});
|
||||
setHint(data.hint);
|
||||
} catch (error) {
|
||||
console.error("Failed to get AI hint:", error);
|
||||
setHint("Lo siento, no pude obtener una pista en este momento.");
|
||||
} finally {
|
||||
setIsGettingHint(false);
|
||||
}
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
setCode(initialCode);
|
||||
setStatus("idle");
|
||||
setOutput(null);
|
||||
setHint(null);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -63,18 +83,35 @@ export default function CodeExercisePlayer({
|
||||
<div className="p-2 rounded-lg bg-indigo-600/10 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400">
|
||||
<Code2 size={24} />
|
||||
</div>
|
||||
<h2 className="text-xl font-black tracking-tight text-gray-900 dark:text-white">{title}</h2>
|
||||
<div>
|
||||
<h2 className="text-xl font-black tracking-tight text-gray-900 dark:text-white uppercase">{title}</h2>
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-indigo-500/60">{language}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="prose dark:prose-invert max-w-none text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
|
||||
<div className="prose dark:prose-invert max-w-none text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">
|
||||
{instructions}
|
||||
</div>
|
||||
|
||||
{testCases.length > 0 && (
|
||||
<div className="space-y-3 pt-4 border-t border-black/5 dark:border-white/5">
|
||||
<h4 className="text-[10px] font-black uppercase tracking-widest text-gray-400">Casos de Prueba</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
{testCases.map((tc, idx) => (
|
||||
<div key={idx} className="p-3 rounded-xl bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5 flex flex-col gap-1">
|
||||
<span className="text-[10px] font-bold text-gray-500">{tc.description}</span>
|
||||
<code className="text-[10px] text-indigo-500 font-mono">Esperado: {tc.expected}</code>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 h-[500px]">
|
||||
{/* Editor Area */}
|
||||
<div className="flex flex-col rounded-2xl overflow-hidden border border-black/5 dark:border-white/5 bg-[#1a1c21]">
|
||||
<div className="px-4 py-2 bg-black/40 dark:bg-white/5 border-b border-black/5 dark:border-white/5 flex items-center justify-between text-[10px] font-black uppercase tracking-widest text-gray-400 dark:text-gray-500">
|
||||
<span>main.py</span>
|
||||
<span>main.{language === 'python' ? 'py' : language === 'javascript' ? 'js' : language === 'sql' ? 'sql' : 'sh'}</span>
|
||||
<div className="flex gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-red-500/20" />
|
||||
<div className="w-2 h-2 rounded-full bg-amber-500/20" />
|
||||
@@ -91,14 +128,22 @@ export default function CodeExercisePlayer({
|
||||
<button
|
||||
onClick={runCode}
|
||||
disabled={status === "running"}
|
||||
className="flex-1 py-2.5 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white rounded-xl font-bold flex items-center justify-center gap-2 transition-all shadow-lg shadow-indigo-500/20"
|
||||
className="flex-[2] py-2.5 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white rounded-xl font-bold flex items-center justify-center gap-2 transition-all shadow-lg shadow-indigo-500/20"
|
||||
>
|
||||
{status === "running" ? (
|
||||
<div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
|
||||
) : (
|
||||
<Play size={16} />
|
||||
)}
|
||||
Run Code
|
||||
Ejecutar Código
|
||||
</button>
|
||||
<button
|
||||
onClick={getAIHint}
|
||||
disabled={isGettingHint || status === "running"}
|
||||
className="flex-1 py-2.5 bg-amber-500/10 hover:bg-amber-500/20 text-amber-600 dark:text-amber-400 border border-amber-500/20 rounded-xl font-bold flex items-center justify-center gap-2 transition-all"
|
||||
>
|
||||
{isGettingHint ? <Loader2 size={16} className="animate-spin" /> : <Wand2 size={16} />}
|
||||
Pista IA
|
||||
</button>
|
||||
<button
|
||||
onClick={reset}
|
||||
@@ -113,10 +158,10 @@ export default function CodeExercisePlayer({
|
||||
{/* Console / Results Area */}
|
||||
<div className="flex flex-col rounded-2xl overflow-hidden border border-black/5 dark:border-white/5 bg-black/[0.05] dark:bg-black/40">
|
||||
<div className="px-4 py-2 bg-black/10 dark:bg-white/5 border-b border-black/5 dark:border-white/5 text-[10px] font-black uppercase tracking-widest text-gray-500">
|
||||
Console Output
|
||||
Consola de Salida
|
||||
</div>
|
||||
<div className="flex-1 p-6 font-mono text-sm overflow-auto">
|
||||
{!output && <span className="text-gray-500 dark:text-gray-600 italic">Click "Run Code" to execute tests...</span>}
|
||||
{!output && <span className="text-gray-500 dark:text-gray-600 italic">Haz clic en "Ejecutar Código" para probar tu solución...</span>}
|
||||
{output && (
|
||||
<pre className={`whitespace-pre-wrap ${status === "success" ? "text-green-400" :
|
||||
status === "error" ? "text-red-400" :
|
||||
@@ -125,13 +170,25 @@ export default function CodeExercisePlayer({
|
||||
{output}
|
||||
</pre>
|
||||
)}
|
||||
|
||||
{hint && (
|
||||
<div className="mt-6 p-4 rounded-xl bg-indigo-500/10 border border-indigo-500/20 animate-in slide-in-from-top-2 duration-300">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Sparkles size={14} className="text-indigo-400" />
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-indigo-400">Sugerencia del Tutor IA</span>
|
||||
</div>
|
||||
<p className="text-sm text-indigo-200/80 leading-relaxed italic">
|
||||
"{hint}"
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{status === "success" && (
|
||||
<div className="m-4 p-4 rounded-xl bg-green-500/10 border border-green-500/20 flex items-center gap-3 animate-in zoom-in duration-300">
|
||||
<CheckCircle className="text-green-400" />
|
||||
<div>
|
||||
<div className="text-sm font-bold text-green-400">Challenge Completed!</div>
|
||||
<p className="text-[10px] text-green-500/80 uppercase font-black tracking-widest">Score: 100%</p>
|
||||
<div className="text-sm font-bold text-green-400">¡Desafío Completado!</div>
|
||||
<p className="text-[10px] text-green-500/80 uppercase font-black tracking-widest">Puntaje: 100%</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -139,8 +196,8 @@ export default function CodeExercisePlayer({
|
||||
<div className="m-4 p-4 rounded-xl bg-red-500/10 border border-red-500/20 flex items-center gap-3 animate-in shake duration-300">
|
||||
<XCircle className="text-red-400" />
|
||||
<div>
|
||||
<div className="text-sm font-bold text-red-400">Execution Failed</div>
|
||||
<p className="text-[10px] text-red-500/80 uppercase font-black tracking-widest">Try again</p>
|
||||
<div className="text-sm font-bold text-red-400">Falla en la Ejecución</div>
|
||||
<p className="text-[10px] text-red-500/80 uppercase font-black tracking-widest">Intenta de nuevo</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -20,14 +20,14 @@ export const BrandingProvider: React.FC<{ children: React.ReactNode }> = ({ chil
|
||||
const [branding, setBranding] = useState<Organization | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const orgId = process.env.NEXT_PUBLIC_ORG_ID || '00000000-0000-0000-0000-000000000001';
|
||||
|
||||
|
||||
const pathname = usePathname();
|
||||
|
||||
useEffect(() => {
|
||||
const loadBranding = async () => {
|
||||
try {
|
||||
const data = await lmsApi.getBranding(orgId);
|
||||
const data = await lmsApi.getBranding();
|
||||
setBranding(data);
|
||||
console.log('Branding loaded in Experience:', data);
|
||||
} catch (error) {
|
||||
@@ -38,7 +38,7 @@ export const BrandingProvider: React.FC<{ children: React.ReactNode }> = ({ chil
|
||||
};
|
||||
|
||||
loadBranding();
|
||||
}, [orgId]);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!branding) return;
|
||||
|
||||
@@ -84,7 +84,7 @@ export interface QuizQuestion {
|
||||
|
||||
export interface Block {
|
||||
id: string;
|
||||
type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer' | 'code' | 'hotspot' | 'memory-match' | 'document' | 'audio-response' | 'video_marker' | 'peer-review' | 'role-playing' | 'mermaid';
|
||||
type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer' | 'code' | 'hotspot' | 'memory-match' | 'document' | 'audio-response' | 'video_marker' | 'peer-review' | 'role-playing' | 'mermaid' | 'code-lab';
|
||||
title: string;
|
||||
content?: string;
|
||||
url?: string;
|
||||
@@ -119,6 +119,11 @@ export interface Block {
|
||||
initial_message?: string;
|
||||
// Mermaid fields
|
||||
mermaid_code?: string;
|
||||
// Code Lab fields
|
||||
language?: string;
|
||||
initial_code?: string;
|
||||
solution?: string;
|
||||
test_cases?: { description: string; expected: string }[];
|
||||
metadata?: any;
|
||||
}
|
||||
|
||||
@@ -292,7 +297,6 @@ export interface AuthPayload {
|
||||
email: string;
|
||||
password?: string;
|
||||
full_name?: string;
|
||||
organization_name?: string;
|
||||
}
|
||||
|
||||
export interface Enrollment {
|
||||
@@ -464,10 +468,6 @@ const apiFetch = async (url: string, options: RequestInit = {}, isCMS: boolean =
|
||||
};
|
||||
|
||||
export const lmsApi = {
|
||||
async searchOrganizations(query: string): Promise<{ id: string, name: string, domain?: string }[]> {
|
||||
return apiFetch(`/organizations/search?q=${encodeURIComponent(query)}`, {}, true);
|
||||
},
|
||||
|
||||
async getCatalog(orgId?: string, userId?: string): Promise<Course[]> {
|
||||
const params = new URLSearchParams();
|
||||
if (orgId) params.append('organization_id', orgId);
|
||||
@@ -550,8 +550,8 @@ export const lmsApi = {
|
||||
return apiFetch('/analytics/leaderboard');
|
||||
},
|
||||
|
||||
async getBranding(orgId: string): Promise<Organization> {
|
||||
return apiFetch(`/organizations/${orgId}/branding`, {}, true);
|
||||
async getBranding(): Promise<Organization> {
|
||||
return apiFetch('/branding', {}, true);
|
||||
},
|
||||
|
||||
async updateUser(userId: string, payload: { full_name?: string, avatar_url?: string, bio?: string, language?: string }): Promise<void> {
|
||||
@@ -636,6 +636,13 @@ export const lmsApi = {
|
||||
body: JSON.stringify({ message, block_id: blockId, session_id: sessionId })
|
||||
});
|
||||
},
|
||||
|
||||
async getCodeHint(lessonId: string, payload: { current_code: string; error_message?: string; instructions?: string; language?: string }): Promise<{ hint: string }> {
|
||||
return apiFetch(`/lessons/${lessonId}/code-hint`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
},
|
||||
async getLessonFeedback(lessonId: string): Promise<{ response: string, session_id: string }> {
|
||||
return apiFetch(`/lessons/${lessonId}/feedback`);
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user