18 Commits

Author SHA1 Message Date
31cd071175 Se corrige bugs de archivos 2025-11-28 09:59:26 -06:00
c44698d0c7 Se corrige bug en materias 2025-11-28 09:12:11 -06:00
85057e0f85 Se agregan los dos repositorios 2025-11-28 08:58:58 -06:00
169599874e Se quitan respuestas amigables 2025-11-28 08:32:25 -06:00
9b3880a02f Se corrige edfunction 2025-11-28 07:48:02 -06:00
9d9fb3d8a8 Se corrigen errores de contexto y limpiar mensajes de ia, se actualiza la forma de mostrar archivos y vectores y se permite seleccionar varios archivos 2025-11-27 16:08:02 -06:00
a6f0010a53 Se agrga crear formatos 2025-11-26 19:44:45 -06:00
29231206c0 Se quitan respuestas del asistente y se agrega boton de cerrar modal 2025-11-25 15:21:32 -06:00
93c79eee77 Se agrega modelo de respuestas y conversaciones archivos multiples y contexto de id plan de estudios 2025-11-25 11:34:00 -06:00
6f97a83eb0 Merge branch 'main' of https://github.lci.ulsa.mx/AlexRG/Acad-IA 2025-11-24 16:17:53 -06:00
4ec2c2d533 Se agrega funcionalidades de crear conversacion, archivos y vectores ademas de MCP 2025-11-24 16:17:49 -06:00
efe7faa65f Cambios de Roberto 2025-11-21 17:05:16 -06:00
c9d66ce2e5 Merge branch 'main' of https://github.lci.ulsa.mx/AlexRG/Acad-IA 2025-11-18 15:17:15 -06:00
f7a29ad510 Version estable conversacion normal 2025-11-18 15:17:11 -06:00
e7a47f56f8 Merge pull request '[#67] dummy' (!2) from task/67-dummy into main
Reviewed-on: #2
2025-11-13 21:32:48 +00:00
214d17cf98 [#67] dummy
https://proyectos.apps.lci.ulsa.mx/work_packages/67
2025-11-13 15:22:28 -06:00
8c890d76e0 Se agrega titulo a pdf 2025-11-13 10:23:04 -06:00
6d264a8214 Merge branch 'master' of https://github.lci.ulsa.mx/AlexRG/Acad-IA 2025-10-30 14:38:56 -06:00
13 changed files with 1413 additions and 381 deletions

4
.env.local2 Normal file
View File

@@ -0,0 +1,4 @@
VITE_SUPABASE_URL=http://127.0.0.1:54321
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImV4ZGtzc3Vyem1qbm5oZ3RpYW1hIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDEzNzg2MzIsImV4cCI6MjA1Njk1NDYzMn0.g1mBmsw-i6F6e-tPv5gWkHZacyPM2Y9X0fiKVYmVYKE
#VITE_BACK_ORIGIN=http://localhost:3001
VITE_BACK_ORIGIN=http://localhost:3001

2
.gitignore vendored
View File

@@ -4,6 +4,6 @@ dist
dist-ssr
*.local
count.txt
.env
.env*
.nitro
.tanstack

View File

@@ -0,0 +1,627 @@
import React, { useEffect, useRef, useState } from "react";
import { supabase } from "@/auth/supabase";
import ReactMarkdown from "react-markdown";
/* ---------- UI Mocks (sin cambios) ---------- */
const Paperclip = (props) => (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor"
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
</svg>
);
const Dialog = ({ open, onOpenChange, children }) =>
open ? <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4" onClick={onOpenChange}>{children}</div> : null;
const DialogContent = ({ className, children }) =>
<div className={`bg-white rounded-xl shadow-2xl transform transition-all max-w-6xl w-[95vw] h-[85vh] p-6 flex flex-col ${className}`}
onClick={(e) => e.stopPropagation()}>{children}</div>;
const DialogHeader = ({ children }) => <div className="pb-4 border-b border-gray-200">{children}</div>;
const DialogTitle = ({ className, children }) => <h2 className={`text-xl font-bold ${className}`}>{children}</h2>;
const Button = ({ onClick, disabled, className, variant, children }) => (
<button onClick={onClick} disabled={disabled}
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors
${variant === "outline"
? "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50"
: "bg-blue-600 text-white hover:bg-blue-700"}
${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`}>
{children}
</button>
);
const Card = ({ className, children }) => <div className={`bg-white rounded-2xl shadow-md ${className}`}>{children}</div>;
const CardContent = ({ className, children }) => <div className={`p-4 ${className}`}>{children}</div>;
const ScrollArea = ({ className, children }) => <div className={`overflow-y-auto ${className}`}>{children}</div>;
/* ------------- COMPONENT ------------- */
export default function AIChatModal({ open, onClose, context, onAccept, plan_format }) {
const [vectorStores, setVectorStores] = useState([]);
const [vectorFiles, setVectorFiles] = useState([]);
const [selectedVector, setSelectedVector] = useState(null);
const [selectedFiles, setSelectedFiles] = useState([]);
const [attachedFiles, setAttachedFiles] = useState([]);
const [attachedPreviews, setAttachedPreviews] = useState([]);
// chat
const [messages, setMessages] = useState([]);
const [input, setInput] = useState("");
// loading states
const [loading, setLoading] = useState(false);
const [loadingFiles, setLoadingFiles] = useState(false);
const [loadingVectors, setLoadingVectors] = useState(false);
// conversation control
const [conversationId, setConversationId] = useState(null);
const [creatingConversation, setCreatingConversation] = useState(false);
const messagesEndRef = useRef(null);
const scrollToBottom = () => messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
useEffect(scrollToBottom, [messages]);
const normalizeInvokeResponse = (resp) => {
if (!resp) return null;
const raw = resp.data;
if (typeof raw === "string") {
try { return JSON.parse(raw); } catch (e) { console.warn("❗ No se pudo parsear resp.data:", raw); return null; }
}
if (typeof raw === "object" && raw !== null) return raw;
return null;
};
// Al abrir: reset o crear conversación
useEffect(() => {
if (!open) {
if (conversationId) {
deleteConversation(conversationId).catch((e) => console.error(e));
}
setMessages([]);
setInput("");
setSelectedFiles([]);
setAttachedFiles([]);
setAttachedPreviews([]);
setConversationId(null);
setSelectedVector(null);
setVectorFiles([]);
return;
}
if (context) {
setMessages([
{
role: "system",
//content: `Contexto académico:\n${context.section || "—"}\n\nTexto original:\n${context.originalText || "—"}`
content: `Contexto académico:\n${context.section || "—"}\n\nTexto original:\n${context.originalText || "—"}`
}
]);
}
(async () => {
await createConversation();
fetchVectorStores();
})();
}, [open]);
// ---------- CREATE CONVERSATION ----------
const createConversation = async () => {
try {
setCreatingConversation(true);
const { data: { session } } = await supabase.auth.getSession();
const token = session?.access_token;
const resp = await supabase.functions.invoke("modal-conversation", {
headers: { Authorization: `Bearer ${token}` },
body: { action: "start", role: "system", content: context?.cont_conversation ?? "" }
});
let parsed = null;
if (typeof resp?.data === "string") {
try { parsed = JSON.parse(resp.data); } catch (e) { parsed = null; }
} else if (typeof resp?.data === "object" && resp.data !== null) parsed = resp.data;
else parsed = resp;
const convId =
parsed?.conversationId ||
parsed?.data?.conversationId ||
parsed?.data?.id ||
parsed?.id ||
parsed?.conversation_id ||
parsed?.data?.conversation_id;
if (!convId) { setCreatingConversation(false); return; }
setConversationId(convId);
} catch (err) {
console.error("Error creando conversación:", err);
} finally {
setCreatingConversation(false);
}
};
// ---------- DELETE CONVERSATION ----------
const deleteConversation = async (convIdParam) => {
try {
const convIdToUse = convIdParam ?? conversationId;
if (!convIdToUse) return;
const { data: { session } } = await supabase.auth.getSession();
const token = session?.access_token;
await supabase.functions.invoke("modal-conversation", {
headers: { Authorization: `Bearer ${token}` },
body: { action: "end", conversationId: convIdToUse }
});
setConversationId(null);
} catch (err) {
console.error("Error eliminando conversación:", err);
}
};
// ---------- CONVERT FILE TO BASE64 ----------
const fileToBase64 = (file) =>
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onerror = (e) => reject(e);
reader.onload = () => resolve(reader.result.split(",")[1]);
reader.readAsDataURL(file);
});
// ---------- HANDLE CONVERSATION (envío) ----------
const handleConversation = async ({ text }) => {
let contextText = "";
if (context?.originalText) contextText += `CONTEXTO DEL CAMPO:\n${context.originalText}\n`;
if (!conversationId) {
console.warn("No hay conversación activa todavía. conversationId:", conversationId);
return;
}
try {
setLoading(true);
const { data: { session } } = await supabase.auth.getSession();
const token = session?.access_token;
// archivos adjuntos (locales) -> base64
let filesInput = [];
if (attachedFiles.length > 0) {
for (const file of attachedFiles) {
const base64 = await fileToBase64(file);
filesInput.push({
type: "input_file",
filename: file.name,
file_data: `data:${file.type};base64,${base64}`
});
}
}
// archivos seleccionados del vector (por id)
if (selectedFiles.length > 0) {
const filesFromVectors = selectedFiles.map(f => ({
type: "input_file",
file_id: f.id
}));
filesInput = [...filesInput, ...filesFromVectors];
}
const promptFinal = `${contextText}\nPREGUNTA DEL USUARIO:\n${text}`;
const payload = {
action: "message",
format: plan_format,
conversationId,
vectorStoreId: selectedVector ?? null,
fileIds: selectedFiles.length ? selectedFiles.map(f => f.id) : [],
input: [
{
role: "user",
content: [
{ type: "input_text", text: promptFinal },
...filesInput
]
}
]
};
const { data: invokeData, error } = await supabase.functions.invoke(
"modal-conversation",
{
headers: { Authorization: `Bearer ${token}` },
body: payload
}
);
if (error) throw error;
const parsed = normalizeInvokeResponse({ data: invokeData });
// Extraer texto del assistant (robusto)
let assistantText = null;
if (parsed?.data?.output_text) assistantText = parsed.data.output_text;
if (!assistantText && Array.isArray(parsed?.data?.output)) {
const msgBlock = parsed.data.output.find(o => o.type === "message");
if (msgBlock?.content?.[0]?.text) assistantText = msgBlock.content[0].text;
}
assistantText = assistantText || "Sin respuesta del modelo.";
setMessages(prev => [...prev, { role: "assistant", content: cleanAssistantResponse(assistantText) }]);
// limpiar attachments locales (pero mantener seleccionados del vector si quieres — aquí los limpiamos)
setAttachedFiles([]);
setAttachedPreviews([]);
// si quieres mantener los selectedFiles tras el envío, comenta la siguiente línea:
setSelectedFiles([]);
} catch (err) {
console.error("Error en handleConversation:", err);
setMessages(prev => [...prev, { role: "assistant", content: "Ocurrió un error al procesar tu mensaje." }]);
} finally {
setLoading(false);
}
};
// ---------- VECTORES ----------
const fetchVectorStores = async () => {
try {
setLoadingVectors(true);
const { data: { session } } = await supabase.auth.getSession();
const token = session?.access_token;
const { data, error } = await supabase.functions.invoke("files-and-vector-stores-api", {
headers: { Authorization: `Bearer ${token}` },
body: { module: "vectorStores", action: "list" }
});
if (error) throw error;
setVectorStores(Array.isArray(data) ? data : (data?.data ?? []));
} catch (err) {
console.error("Error loading vector stores:", err);
setVectorStores([]);
} finally {
setLoadingVectors(false);
}
};
useEffect(() => {
if (open) fetchVectorStores();
}, [open]);
const loadFilesForVector = async (vectorStoreId) => {
try {
setLoadingFiles(true);
const { data: { session } } = await supabase.auth.getSession();
const token = session?.access_token;
const { data, error } = await supabase.functions.invoke("files-and-vector-stores-api", {
headers: { Authorization: `Bearer ${token}` },
body: { module: "vectorStoreFiles", action: "list", params: { vector_store_id: vectorStoreId } }
});
if (error) throw error;
setVectorFiles(Array.isArray(data) ? data : (data?.data ?? []));
} catch (err) {
console.error("Error loading vector files:", err);
setVectorFiles([]);
} finally {
setLoadingFiles(false);
}
};
// ---------- UI helpers ----------
const handleAttach = (e) => {
const files = Array.from(e.target.files);
if (!files.length) return;
setAttachedFiles(prev => [...prev, ...files]);
setAttachedPreviews(prev => [...prev, ...files.map(f => f.name)]);
};
// Al hacer click en un vector: expandir (solo uno a la vez) y cargar sus archivos
const handleVectorClick = async (vector) => {
if (selectedVector === vector.id) {
// colapsar
setSelectedVector(null);
setVectorFiles([]);
setSelectedFiles([]);
return;
}
setSelectedVector(vector.id);
setSelectedFiles([]);
await loadFilesForVector(vector.id);
};
// Toggle selección de archivo (checkbox)
const toggleFileSelection = (file) => {
if (selectedFiles.some(f => f.id === file.id)) {
setSelectedFiles(prev => prev.filter(f => f.id !== file.id));
} else {
setSelectedFiles(prev => [...prev, file]);
}
};
const removeSelectedFile = (fileId) => {
setSelectedFiles(prev => prev.filter(f => f.id !== fileId));
};
// ---------- Send flow ----------
const handleSend = async () => {
// no permitir enviar si no hay nada
if (!input.trim() && attachedFiles.length === 0 && selectedFiles.length === 0) return;
if (creatingConversation) {
// no bloqueo visible aquí por diseño; simplemente ignoramos el envío si aún creando
return;
}
if (!conversationId) {
await createConversation();
if (!conversationId) {
setMessages(prev => [...prev, { role: "assistant", content: "No se pudo crear la conversación. Intenta de nuevo." }]);
return;
}
}
const userText = input.trim() || (selectedFiles.length ? `Consultar ${selectedFiles.length} archivo(s) del repositorio` : "");
setMessages(prev => [...prev, { role: "user", content: userText }]);
setInput("");
await handleConversation({ text: userText });
};
function cleanAIResponse(text) {
if (!text) return text;
let cleaned = text;
// -------------------------
// 1. Eliminar emojis
// -------------------------
cleaned = cleaned.replace(/[\p{Emoji}\uFE0F]/gu, "");
// -------------------------
// 2. Eliminar separadores tipo ---
// -------------------------
cleaned = cleaned.replace(/^---+$/gm, "");
// -------------------------
// 3. Eliminar saludos y frases meta
// -------------------------
const metaPatterns = [
/^hola[!¡., ]*/i,
/^buen(os|as) (días|tardes|noches)[!¡., ]*/i,
/estoy aquí para ayudarte[.! ]*/gi,
/aquí tienes[,:]*/gi,
/claro[,:]*/gi,
/como pediste[,:]*/gi,
/como solicitaste[,:]*/gi,
/el texto íntegro que compartiste.*$/gi,
/te lo dejo a continuación.*$/gi,
/¿te gustaría.*$/gi,
/¿en qué más puedo.*$/gi,
/si necesitas algo más.*$/gi,
/con gusto.*$/gi,
];
metaPatterns.forEach(p => {
cleaned = cleaned.replace(p, "").trim();
});
// -------------------------
// 4. Extraer solo contenido útil
// -------------------------
const startMarker = "CONTEXTO DEL CAMPO";
const startIndex = cleaned.indexOf(startMarker);
if (startIndex !== -1) {
cleaned = cleaned.substring(startIndex).trim();
}
// -------------------------
// 5. Eliminar líneas vacías múltiples
// -------------------------
cleaned = cleaned.replace(/\n{2,}/g, "\n\n");
// -------------------------
// 6. Quitar numeraciones de cortesía (opcional)
// Ejemplo: “1. ” al inicio de líneas
// -------------------------
cleaned = cleaned.replace(/^\s*\d+\.\s+/gm, "");
return cleaned.trim();
}
const handleApply = () => {
const last = [...messages].reverse().find(m => m.role === "assistant");
if (last && onAccept) {
const cleaned = cleanAIResponse(last.content);
onAccept(cleaned);
onClose();
}
};
const cleanAssistantResponse = (text) => {
if (!text) return text;
const patterns = [/^claro[, ]*/i, /^por supuesto[, ]*/i, /^aquí tienes[, ]*/i, /^con gusto[, ]*/i, /^hola[, ]*/i, /^perfecto[, ]*/i, /^entendido[, ]*/i, /^muy bien[, ]*/i, /^ok[, ]*/i];
let cleaned = text.trim();
for (const p of patterns) cleaned = cleaned.replace(p, "").trim();
return cleaned;
};
return (
<Dialog open={open} onOpenChange={onClose} >
<DialogContent className="max-w-6xl w-[95vw] h-[85vh] p-6 flex flex-col relative"
>
<button onClick={onClose} className="absolute top-3 right-3 text-gray-400 hover:text-gray-600 transition z-50"></button>
<DialogHeader>
<DialogTitle>Asistente Inteligente</DialogTitle>
</DialogHeader>
<div className="flex-1 pt-4 min-h-0">
<div className="flex gap-6 h-full min-h-0">
{/* Left: vectors */}
<Card className="w-1/3 min-w-[250px] max-w-sm flex flex-col bg-muted/20 border border-gray-200 rounded-2xl">
<CardContent className="flex flex-col flex-1 p-4">
<h3 className="font-semibold text-sm mb-3">Repositorio de archivos</h3>
<ScrollArea className="flex-1">
{loadingVectors ? (
<p className="text-gray-500 text-sm text-center mt-10">Cargando Repositorio de archivos...</p>
) : vectorStores.length === 0 ? (
<p className="text-gray-500 text-sm text-center mt-10">No hay Repositorio de archivos.</p>
) : (
<div className="space-y-3">
{vectorStores.map((vector) => (
<div key={vector.id}>
{/* VECTOR */}
<div
onClick={() => handleVectorClick(vector)}
className={`p-3 rounded-lg border cursor-pointer transition flex items-center justify-between
${selectedVector === vector.id ? "bg-blue-50 border-blue-400 shadow" : "bg-white border-gray-300"}`}
>
<div className="truncate">
<strong className="block truncate">{vector.name || vector.id}</strong>
<p className="text-xs text-gray-400 truncate">{vector.description || ""}</p>
</div>
<div className="text-xs text-gray-500">{selectedVector === vector.id ? "▼" : "▶"}</div>
</div>
{/* ARCHIVOS cuando está expandido */}
{selectedVector === vector.id && (
<div className="ml-4 mt-2 mb-2 space-y-2">
{loadingFiles ? (
<p className="text-gray-400 text-sm">Cargando archivos...</p>
) : vectorFiles.length === 0 ? (
<p className="text-gray-400 text-sm">No hay archivos en este repositorio</p>
) : (
vectorFiles.map((file) => (
<label key={file.id} className="flex items-center gap-2 p-2 rounded-md hover:bg-gray-50 cursor-pointer">
<input
type="checkbox"
checked={selectedFiles.some(f => f.id === file.id)}
onChange={() => toggleFileSelection(file)}
/>
<div className="text-sm">
<div className="font-medium">{file.filename ?? file.name ?? file.id}</div>
<div className="text-xs text-gray-400">{file.id}</div>
</div>
</label>
))
)}
</div>
)}
</div>
))}
</div>
)}
</ScrollArea>
{/* Resumen de archivos seleccionados (de vectores) */}
<div className="mt-4">
<h4 className="font-semibold text-sm mb-2">Archivos seleccionados</h4>
{selectedFiles.length === 0 ? (
<p className="text-sm text-gray-500">No has seleccionado archivos del repositorio</p>
) : (
<ul className="space-y-2 max-h-40 overflow-auto">
{selectedFiles.map((f) => (
<li key={f.id} className="flex items-center justify-between p-2 rounded-md border bg-white">
<div className="text-sm">
<div className="font-medium">{f.filename ?? f.name ?? f.id}</div>
<div className="text-xs text-gray-400 truncate">{f.id}</div>
</div>
<div className="flex items-center gap-2">
<span className="text-xs text-gray-500">{/* optionally show vector id */}</span>
<button onClick={() => removeSelectedFile(f.id)} className="text-sm text-red-500 hover:underline">Quitar</button>
</div>
</li>
))}
</ul>
)}
</div>
{/* <div className="mt-4 flex-shrink-0">
<Button variant="outline" className="w-full" onClick={() => alert("Funcionalidad Subir a vector store no implementada aquí")}>Subir archivo (vector)</Button>
</div> */}
</CardContent>
</Card>
{/* Right: Chat */}
<Card className="flex-1 flex flex-col min-w-[350px] bg-background border border-gray-200 rounded-2xl">
<CardContent className="flex flex-col flex-1 p-4 min-h-0">
<h3 className="font-semibold text-sm mb-3 flex-shrink-0">Chat con IA</h3>
<div className="flex-1 flex flex-col min-h-0">
{/* CONTENEDOR SCROLL DE LOS MENSAJES */}
<div className="flex-1 overflow-y-auto min-h-0 border border-gray-200 rounded-lg p-3 space-y-3 bg-gray-50 break-words whitespace-pre-wrap">
{messages.length === 0 ? (
<p className="text-gray-400 text-sm text-center mt-10">Inicia una conversación...</p>
) : (
messages.map((m, i) => (
<div key={i} className={`break-words whitespace-pre-wrap p-3 rounded-xl shadow-sm max-w-[85%] ${m.role === "user" ? "bg-blue-50 text-blue-800 ml-auto" : m.role === "assistant" ? "bg-white text-gray-800 mr-auto border border-gray-200" : "bg-gray-100 text-gray-700 mr-auto"}`}>
<strong className="font-bold">{m.role === "user" ? "Tú:" : m.role === "assistant" ? "IA:" : "Sistema:"}</strong>{" "}
<ReactMarkdown>{m.content}</ReactMarkdown>
</div>
))
)}
{loading && (
<div className="flex items-center space-x-2 p-3 bg-white border border-gray-200 rounded-xl mr-auto max-w-fit shadow-sm flex-shrink-0">
<svg className="animate-spin h-4 w-4 text-blue-500" 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"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span className="text-sm text-gray-600">La IA está respondiendo...</span>
</div>
)}
<div ref={messagesEndRef} />
</div>
</div>
{attachedPreviews.length > 0 && (
<ul className="text-xs text-gray-600 mt-2">
{attachedPreviews.map((name, i) => (
<li key={i}>📄 {name}</li>
))}
</ul>
)}
<div className="flex gap-2 mt-4 items-end flex-shrink-0">
<label className="cursor-pointer text-gray-600 hover:text-blue-600 self-center">
<Paperclip className="w-5 h-5" />
<input type="file" accept=".pdf,.txt,.doc,.docx" multiple className="hidden" onChange={handleAttach} />
</label>
<textarea
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Escribe tu pregunta..."
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
handleSend();
}
}}
rows={1}
className="flex-1 resize-none rounded-xl border border-gray-300 p-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 max-h-32 overflow-y-auto bg-white shadow-inner"
style={{ minHeight: "38px" }}
/>
<Button onClick={handleSend} disabled={loading || creatingConversation || (!input.trim() && attachedFiles.length === 0 && selectedFiles.length === 0)} className="shadow-md">
{creatingConversation ? "Preparando..." : loading ? "Enviando..." : "Enviar"}
</Button>
<Button onClick={handleApply} disabled={!messages.some((m) => m.role === "assistant")} className="shadow-md">
Aplicar mejora
</Button>
</div>
</CardContent>
</Card>
</div>
</div>
</DialogContent>
</Dialog>
);
}

View File

@@ -1,371 +0,0 @@
import React, { useEffect, useState } from "react"
import { supabase } from "@/auth/supabase"
import type { PlanTextFields } from "../planes/academic-sections";
// 🔹 SIMULACIÓN DE ICONO LUCIDE-REACT
const Paperclip = (props) => (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-paperclip">
<path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
</svg>
);
// 🔹 SIMULACIÓN DE SHADCN/UI
const Dialog = ({ open, onOpenChange, children }) => open ? <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4" onClick={onOpenChange}>{children}</div> : null;
const DialogContent = ({ className, children }) => <div className={`bg-white rounded-xl shadow-2xl transform transition-all max-w-6xl w-[95vw] h-[85vh] p-6 flex flex-col ${className}`} onClick={(e) => e.stopPropagation()}>{children}</div>;
const DialogHeader = ({ children }) => <div className="pb-4 border-b border-gray-200">{children}</div>;
const DialogTitle = ({ className, children }) => <h2 className={`text-xl font-bold ${className}`}>{children}</h2>;
const Button = ({ onClick, disabled, className, variant, children }) => (
<button
onClick={onClick}
disabled={disabled}
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
variant === "outline" ? "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50" :
"bg-blue-600 text-white hover:bg-blue-700"
} ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
>
{children}
</button>
);
const Card = ({ className, children }) => <div className={`bg-white rounded-2xl shadow-md ${className}`}>{children}</div>;
const CardContent = ({ className, children }) => <div className={`p-4 ${className}`}>{children}</div>;
const ScrollArea = ({ className, children }) => <div className={`overflow-y-auto ${className}`}>{children}</div>;
// ====================================================================
type AIChatModalProps = {
open: boolean
onClose: () => void
edgeFunctionUrl: string
context?: {
section?: string
fieldKey?: keyof PlanTextFields
originalText?: string
}
onAccept?: (newText: string) => void
}
export default function AIChatModal({ open, onClose, edgeFunctionUrl, context, onAccept }: AIChatModalProps) {
const [files, setFiles] = useState<any[]>([])
const [attachedFile, setAttachedFile] = useState<File | null>(null)
const [attachedPreview, setAttachedPreview] = useState<string | null>(null)
const [messages, setMessages] = useState<{ role: string; content: string }[]>([])
const [input, setInput] = useState("")
const [loading, setLoading] = useState(false)
// Referencia para desplazar al final del chat
const messagesEndRef = React.useRef<HTMLDivElement>(null);
const scrollToBottom = () => messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
useEffect(scrollToBottom, [messages])
useEffect(() => {
if (!open) {
// 🧹 Limpia mensajes y archivos al cerrar
setMessages([])
setInput("")
setAttachedFile(null)
setAttachedPreview(null)
} else if (context) {
// 🧩 Muestra el contexto inicial al abrir
setMessages([
{
role: "system",
content: `Contexto: ${context.section}\nTexto original:\n${context.originalText || "—"}`,
},
])
}
}, [open, context])
// 🔹 Obtener lista de archivos del Vector Store (Lógica de API original)
useEffect(() => {
if (!open) return
const fetchVectorFiles = async () => {
// Nota: La verificación de Supabase ahora pasa por el mock.
if (typeof supabase === 'undefined' || !supabase.auth) {
console.error("Supabase no está disponible (Simulación). Saltando fetch de archivos.");
return;
}
try {
setLoading(true)
const { data: { session } } = await supabase.auth.getSession()
const token = session?.access_token
// 🟢 TU LÓGICA DE FETCH ORIGINAL
const res = await fetch(`${edgeFunctionUrl}?action=list_files`, {
headers: { Authorization: `Bearer ${token}` },
})
const data = await res.json()
if (data.files) setFiles(data.files)
else console.warn("No se encontraron archivos en el vector store.")
} catch (err) {
console.error("Error al cargar archivos del vector store:", err)
} finally {
setLoading(false)
}
}
fetchVectorFiles()
}, [open, edgeFunctionUrl])
// 📎 Adjuntar archivo
const handleAttach = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0]
if (!file) return
setAttachedFile(file)
setAttachedPreview(file.name)
}
// 🚀 Enviar prompt o archivo al Edge Function (Lógica de API original)
const handleSend = async () => {
if (!input.trim() && !attachedFile) return
// 🧩 Crear el mensaje visible del usuario
let userMessageContent = input.trim()
if (attachedFile) {
userMessageContent += (userMessageContent ? " | " : "") + `Adjunto: ${attachedFile.name}`
}
if (!userMessageContent && attachedFile) {
userMessageContent = `Consulta de archivo: ${attachedFile.name}`
}
setMessages((prev) => [...prev, { role: "user", content: userMessageContent }])
setInput("")
setLoading(true)
try {
if (typeof supabase === "undefined" || !supabase.functions) {
throw new Error("Supabase no está disponible o no soporta Edge Functions.")
}
const formData = new FormData()
// 🧠 Construimos un prompt limpio con el contexto del campo
const contextText = context?.originalText || "Sin texto original"
const section = context?.section ? `Sección: ${context.section}` : ""
const field = context?.fieldKey ? `Campo: ${context.fieldKey}` : ""
const fullPrompt = `
${section}
${field}
Texto original:
${contextText}
Solicitud del usuario:
${input}
Responde con una versión mejorada del texto, sin agregar frases como “Aquí tienes” ni explicaciones.
`.trim()
formData.append("prompt", fullPrompt)
if (attachedFile) formData.append("file", attachedFile)
// 🟢 Llamada a la Edge Function
const { data, error } = await supabase.functions.invoke("simple-chat", {
body: formData,
})
if (error) throw error
setMessages((prev) => [
...prev,
{ role: "assistant", content: data?.text || "Sin respuesta del modelo." },
])
} catch (err: any) {
console.error("Error al enviar prompt:", err)
setMessages((prev) => [
...prev,
{ role: "assistant", content: "Ocurrió un error al conectar con la API." },
])
} finally {
setLoading(false)
setAttachedFile(null)
setAttachedPreview(null)
}
}
return (
    <Dialog open={open} onOpenChange={onClose}>
      {/* DialogContent ya define el tamaño h-[85vh] y es flex-col */}
      <DialogContent className="max-w-6xl w-[95vw] h-[85vh] p-6 flex flex-col">
       
{/* Encabezado fijo (flex-shrink-0) */}
        <DialogHeader>
          <DialogTitle className="text-lg font-semibold">Asistente Inteligente</DialogTitle>
        </DialogHeader>
{/* CONTENEDOR PRINCIPAL QUE AHORA GESTIONA EL SCROLL DEL CONTENIDO */}
{/* flex-1: toma el espacio restante. overflow-y-auto: permite scroll si el contenido se desborda */}
        <div className="flex-1 overflow-y-auto pt-4">
{/* Contenido que originalmente estaba justo debajo del header */}
<div className="flex gap-6 min-h-full">
          {/* 📂 Archivos del Vector Store */}
          <Card className="w-1/3 min-w-[250px] max-w-sm flex flex-col bg-muted/20 border border-gray-200 rounded-2xl">
            {/* Se mantiene flex-1 en CardContent para el ScrollArea */}
            <CardContent className="flex flex-col flex-1 p-4">
              <h3 className="font-semibold text-sm mb-3">Archivos del Vector Store</h3>
              {/* ScrollArea toma el espacio disponible (flex-1) */}
              <ScrollArea className="flex-1">
                {files.length === 0 ? (
                  <p className="text-gray-500 text-sm text-center mt-10">
                    {loading ? "Cargando archivos..." : "No hay archivos cargados."}
                  </p>
                ) : (
                  <ul className="space-y-2">
                    {files.map((file) => (
                      <li
                        key={file.id}
                        className="border border-gray-200 bg-white rounded-lg p-2 text-sm shadow-sm hover:shadow-lg transition-shadow cursor-pointer"
                      >
                        <strong className="block text-gray-700 truncate">{file.name}</strong>
                        <p className="text-xs text-gray-400 truncate">{file.path}</p>
                      </li>
                    ))}
                  </ul>
                )}
              </ScrollArea>
              <div className="mt-4 flex-shrink-0">
                <Button variant="outline" className="w-full">
                  Subir archivo
                </Button>
              </div>
            </CardContent>
          </Card>
          {/* 💬 Chat con GPT */}
          <Card className="flex-1 flex flex-col min-w-[350px] bg-background border border-gray-200 rounded-2xl">
            <CardContent className="flex flex-col flex-1 p-4">
              <h3 className="font-semibold text-sm mb-3 flex-shrink-0">Chat con IA</h3>
              {/* Mensajes - EL CONTENEDOR QUE DEBE HACER SCROLL */}
               <div className="flex-1 overflow-y-auto min-h-0 border border-gray-200 rounded-lg p-3 space-y-3 bg-gray-50 break-words whitespace-pre-wrap">
                {messages.length === 0 ? (
                  <p className="text-gray-400 text-sm text-center mt-10">
                    Inicia una conversación...
                  </p>
                ) : (
                  messages.map((m, i) => (
                    <div
                      key={i}
                      className={`break-words whitespace-pre-wrap p-3 rounded-xl shadow-sm max-w-[85%] ${
                        m.role === "user"
                          ? "bg-blue-50 text-blue-800 ml-auto"
                          : "bg-white text-gray-800 mr-auto border border-gray-200"
                      }`}
                    >
                      <strong className="font-bold">{m.role === "user" ? "Tú:" : "IA:"}</strong>{" "}
                      {m.content}
                    </div>
                  ))
                )}
                {loading && (
                  <div className="flex items-center space-x-2 p-3 bg-white border border-gray-200 rounded-xl mr-auto max-w-fit shadow-sm flex-shrink-0">
                    <svg
                      className="animate-spin h-4 w-4 text-blue-500"
                      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"
                      ></circle>
                      <path
                        className="opacity-75"
                        fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2
                        5.291A7.962 7.962 0 014 12H0c0
                        3.042 1.135 5.824 3 7.938l3-2.647z"
                      ></path>
                    </svg>
                    <span className="text-sm text-gray-600">La IA está respondiendo...</span>
                  </div>
                )}
                <div ref={messagesEndRef} />
              </div>
              {/* Archivo adjunto - flex-shrink-0 */}
              {attachedPreview && (
                <div className="flex items-center justify-between mt-2 p-3 border border-gray-300 rounded-xl text-sm bg-gray-100 shadow-inner flex-shrink-0">
                  <span className="truncate flex items-center gap-2 text-gray-700">
                    <Paperclip className="w-4 h-4 text-blue-500" />
                    {attachedPreview}
                  </span>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="text-red-500 hover:bg-gray-200"
                    onClick={() => {
                      setAttachedFile(null)
                      setAttachedPreview(null)
                      setInput("")
                    }}
                  >
                    Quitar
                  </Button>
                </div>
              )}
              {/* Entrada de texto y enviar - flex-shrink-0 */}
              <div className="flex gap-2 mt-4 items-end flex-shrink-0">
                <label className="cursor-pointer text-gray-600 hover:text-blue-600 self-center">
                  <Paperclip className="w-5 h-5" />
                  <input type="file" className="hidden" onChange={handleAttach} />
                </label>
                <textarea
                  value={input}
                  onChange={(e) => setInput(e.target.value)}
                  placeholder="Escribe tu pregunta..."
                  onKeyDown={(e) => {
                    if (e.key === "Enter" && !e.shiftKey) {
                      e.preventDefault()
                      handleSend()
                    }
                  }}
                  rows={1}
                  className="flex-1 resize-none rounded-xl border border-gray-300 p-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 max-h-32 overflow-y-auto bg-white shadow-inner"
                  style={{ minHeight: "38px" }}
                />
                <Button
                  onClick={handleSend}
                  disabled={loading || (!input.trim() && !attachedFile)}
                  className="shadow-md"
                >
                  {loading ? "Enviando..." : "Enviar"}
                </Button>
<Button
onClick={() => {
const lastMessage = messages[messages.length - 1]
if (onAccept && lastMessage?.role === "assistant") {
onAccept(lastMessage.content)
onClose()
}
}}
disabled={!messages.some((m) => m.role === "assistant")}
className="shadow-md"
>
Aplicar mejora
</Button>
              </div>
            </CardContent>
          </Card>
        </div>
</div>
      </DialogContent>
    </Dialog>
  )
}

View File

@@ -21,7 +21,8 @@ export function DownloadPlanPDF({ plan }: { plan: PlanLike }) {
unit: "mm",
format: "letter",
})
console.log(plan);
const pageWidth = doc.internal.pageSize.getWidth()
const pageHeight = doc.internal.pageSize.getHeight()
const margin = 20
@@ -229,7 +230,7 @@ export function DownloadPlanPDF({ plan }: { plan: PlanLike }) {
// LICENCIATURA EN INGENIERÍA CIBERNÉTICA Y SISTEMAS COMPUTACIONALES
doc.setFontSize(18)
// Manejamos la conversión a string si es necesario
const mainTitle = (plan["titulo"] !== null && plan["titulo"] !== undefined ? String(plan["titulo"]) : "LICENCIATURA EN INGENIERÍA CIBERNÉTICA Y SISTEMAS COMPUTACIONALES").toUpperCase()
const mainTitle = (plan["nombre"] !== null && plan["nombre"] !== undefined ? String(plan["nombre"]) : "LICENCIATURA EN INGENIERÍA CIBERNÉTICA Y SISTEMAS COMPUTACIONALES").toUpperCase()
const mainTitleLines = doc.splitTextToSize(mainTitle, maxWidth - 20)
doc.text(mainTitleLines, pageWidth / 2, cursorY, { align: "center" })
cursorY += mainTitleLines.length * 8

View File

@@ -8,7 +8,9 @@ import { supabase,useSupabaseAuth } from "@/auth/supabase"
import { toast } from "sonner"
import ReactMarkdown from 'react-markdown'
import { HistorialCambiosModal } from "../historico/HistorialCambiosModal"
import AIChatModal from "../ai/AIChatModal"
// @ts-ignore
import AIChatModal from "../ai/AIChatModal"
/* =====================================================
@@ -53,6 +55,8 @@ export const planTextOptions = (planId: string) =>
staleTime: 60_000,
})
/* =====================================================
Color helpers
===================================================== */
@@ -123,6 +127,17 @@ export function AcademicSections({ planId, color }: { planId: string; color?: st
const [editing, setEditing] = useState<null | { key: keyof PlanTextFields; title: string }>(null)
const [draft, setDraft] = useState("")
const plan_format={
"objetivo_general": "...",
"sistema_evaluacion": "...",
"perfil_ingreso": "...",
"perfil_egreso": "...",
"competencias_genericas": "...",
"competencias_especificas": "...",
"indicadores_desempeno": "...",
"pertinencia": "..."
}
// --- mutation con actualización optimista ---
const updateField = useMutation({
mutationFn: async ({ key, value }: { key: keyof PlanTextFields; value: string | string[] | null }) => {
@@ -306,14 +321,19 @@ export function AcademicSections({ planId, color }: { planId: string; color?: st
updateField.mutate({ key, value })
}}
/>
<AIChatModal
open={openModalIa}
//plan_format={plan_format}
open={openModalIa}
onClose={() => setopenModalIa(false)}
edgeFunctionUrl="https://exdkssurzmjnnhgtiama.supabase.co/functions/v1/simple-chat"
context={{
section: iaContext?.title,
fieldKey: iaContext?.key,
section: null,//,iaContext?.title,
fieldKey: null,//iaContext?.key,
originalText: iaContext?.content,
cont_conversation: `Eres un experto en craer planes de estudios basate en el id del plan ${planId} que se encuentra en la tabla plan_estudios con el mcp para realizar los cambios que se te soliciten Responde únicamente con la información solicitada.
No uses frases como “claro”, “por supuesto”, “aquí tienes”, “con gusto”, “hola”, “perfecto”.
No uses introducciones, despedidas ni texto de relleno.
Entrega solo el contenido útil.`,
}}
onAccept={(newText: string) => {
if (iaContext) {

10
src/formatos/plan.json Normal file
View File

@@ -0,0 +1,10 @@
{
"objetivo_general": "...",
"sistema_evaluacion": "...",
"perfil_ingreso": "...",
"perfil_egreso": "...",
"competencias_genericas": "...",
"competencias_especificas": "...",
"indicadores_desempeno": "...",
"pertinencia": "..."
}

View File

@@ -1,3 +1,4 @@
// dummy test
import { StrictMode } from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider, createRouter } from '@tanstack/react-router'

View File

@@ -18,6 +18,7 @@ import { Route as AuthenticatedFacultadesRouteImport } from './routes/_authentic
import { Route as AuthenticatedDashboardRouteImport } from './routes/_authenticated/dashboard'
import { Route as AuthenticatedCarrerasRouteImport } from './routes/_authenticated/carreras'
import { Route as AuthenticatedAsignaturasRouteImport } from './routes/_authenticated/asignaturas'
import { Route as AuthenticatedArchivos2RouteImport } from './routes/_authenticated/archivos2'
import { Route as AuthenticatedArchivosRouteImport } from './routes/_authenticated/archivos'
import { Route as AuthenticatedPlanPlanIdRouteImport } from './routes/_authenticated/plan/$planId'
import { Route as AuthenticatedFacultadFacultadIdRouteImport } from './routes/_authenticated/facultad/$facultadId'
@@ -69,6 +70,11 @@ const AuthenticatedAsignaturasRoute =
path: '/asignaturas',
getParentRoute: () => AuthenticatedRoute,
} as any)
const AuthenticatedArchivos2Route = AuthenticatedArchivos2RouteImport.update({
id: '/archivos2',
path: '/archivos2',
getParentRoute: () => AuthenticatedRoute,
} as any)
const AuthenticatedArchivosRoute = AuthenticatedArchivosRouteImport.update({
id: '/archivos',
path: '/archivos',
@@ -102,6 +108,7 @@ export interface FileRoutesByFullPath {
'/': typeof IndexRoute
'/login': typeof LoginRoute
'/archivos': typeof AuthenticatedArchivosRoute
'/archivos2': typeof AuthenticatedArchivos2Route
'/asignaturas': typeof AuthenticatedAsignaturasRouteWithChildren
'/carreras': typeof AuthenticatedCarrerasRoute
'/dashboard': typeof AuthenticatedDashboardRoute
@@ -117,6 +124,7 @@ export interface FileRoutesByTo {
'/': typeof IndexRoute
'/login': typeof LoginRoute
'/archivos': typeof AuthenticatedArchivosRoute
'/archivos2': typeof AuthenticatedArchivos2Route
'/asignaturas': typeof AuthenticatedAsignaturasRouteWithChildren
'/carreras': typeof AuthenticatedCarrerasRoute
'/dashboard': typeof AuthenticatedDashboardRoute
@@ -134,6 +142,7 @@ export interface FileRoutesById {
'/_authenticated': typeof AuthenticatedRouteWithChildren
'/login': typeof LoginRoute
'/_authenticated/archivos': typeof AuthenticatedArchivosRoute
'/_authenticated/archivos2': typeof AuthenticatedArchivos2Route
'/_authenticated/asignaturas': typeof AuthenticatedAsignaturasRouteWithChildren
'/_authenticated/carreras': typeof AuthenticatedCarrerasRoute
'/_authenticated/dashboard': typeof AuthenticatedDashboardRoute
@@ -151,6 +160,7 @@ export interface FileRouteTypes {
| '/'
| '/login'
| '/archivos'
| '/archivos2'
| '/asignaturas'
| '/carreras'
| '/dashboard'
@@ -166,6 +176,7 @@ export interface FileRouteTypes {
| '/'
| '/login'
| '/archivos'
| '/archivos2'
| '/asignaturas'
| '/carreras'
| '/dashboard'
@@ -182,6 +193,7 @@ export interface FileRouteTypes {
| '/_authenticated'
| '/login'
| '/_authenticated/archivos'
| '/_authenticated/archivos2'
| '/_authenticated/asignaturas'
| '/_authenticated/carreras'
| '/_authenticated/dashboard'
@@ -265,6 +277,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof AuthenticatedAsignaturasRouteImport
parentRoute: typeof AuthenticatedRoute
}
'/_authenticated/archivos2': {
id: '/_authenticated/archivos2'
path: '/archivos2'
fullPath: '/archivos2'
preLoaderRoute: typeof AuthenticatedArchivos2RouteImport
parentRoute: typeof AuthenticatedRoute
}
'/_authenticated/archivos': {
id: '/_authenticated/archivos'
path: '/archivos'
@@ -319,6 +338,7 @@ const AuthenticatedAsignaturasRouteWithChildren =
interface AuthenticatedRouteChildren {
AuthenticatedArchivosRoute: typeof AuthenticatedArchivosRoute
AuthenticatedArchivos2Route: typeof AuthenticatedArchivos2Route
AuthenticatedAsignaturasRoute: typeof AuthenticatedAsignaturasRouteWithChildren
AuthenticatedCarrerasRoute: typeof AuthenticatedCarrerasRoute
AuthenticatedDashboardRoute: typeof AuthenticatedDashboardRoute
@@ -332,6 +352,7 @@ interface AuthenticatedRouteChildren {
const AuthenticatedRouteChildren: AuthenticatedRouteChildren = {
AuthenticatedArchivosRoute: AuthenticatedArchivosRoute,
AuthenticatedArchivos2Route: AuthenticatedArchivos2Route,
AuthenticatedAsignaturasRoute: AuthenticatedAsignaturasRouteWithChildren,
AuthenticatedCarrerasRoute: AuthenticatedCarrerasRoute,
AuthenticatedDashboardRoute: AuthenticatedDashboardRoute,

View File

@@ -47,6 +47,7 @@ const nav = [
{ to: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
{ to: "/usuarios", label: "Usuarios", icon: Users2Icon },
{ to: "/archivos", label: "Archivos de referencia", icon: FileAxis3D },
{ to: "/archivos2", label: "Repositorio de archivos", icon: FileAxis3D },
] as const
function getInitials(name?: string) {

View File

@@ -0,0 +1,718 @@
// routes/_authenticated/archivos.tsx
import { createFileRoute, useRouter } from "@tanstack/react-router"
import { useEffect, useMemo, useState } from "react"
import { supabase, useSupabaseAuth } from "@/auth/supabase"
import * as Icons from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Label } from "@/components/ui/label"
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
import { Textarea } from "@/components/ui/textarea"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
type EdgeModule = "files" | "vectorStores" | "vectorStoreFiles"
interface VectorStore {
id: string
object: "vector_store"
created_at: number
name: string | null
description?: string | null
usage_bytes: number
file_counts: {
in_progress: number
completed: number
failed: number
cancelled: number
total: number
}
status: string
last_active_at?: number | null
metadata?: Record<string, any> | null
}
interface VectorStoreFile {
id: string
object: string
created_at: number
vector_store_id: string
status: string
usage_bytes: number
last_error?: { code: string; message: string } | null
}
interface VectorStoreFileMeta {
id: string
user_id: string | null
vector_store_id: string
openai_file_id: string
label: string | null
tags: string[] | null
created_at: string
}
type EdgeArgs = {
module: EdgeModule
action: string
params?: Record<string, any>
}
async function callFilesAndVectorStoresApi<T = unknown>(
args: EdgeArgs,
): Promise<T> {
const { data, error } = await supabase.functions.invoke<any>(
"files-and-vector-stores-api",
{
body: args,
},
)
if (error) {
console.error(error)
throw error
}
const payload = data ?? {}
if (payload.error) {
const msg =
typeof payload.error === "string"
? payload.error
: payload.error.message ?? "Error en la función Edge"
throw new Error(msg)
}
const result = payload.data !== undefined ? payload.data : payload
return result as T
}
export const Route = createFileRoute("/_authenticated/archivos2")({
component: RouteComponent,
loader: async () => {
const stores = await callFilesAndVectorStoresApi<VectorStore[]>({
module: "vectorStores",
action: "list",
params: {
limit: 10,
},
})
return stores ?? []
},
})
/* ====== UI helpers ====== */
function StatusBadge({ status }: { status: string }) {
const label =
status === "completed"
? "Completado"
: status === "in_progress"
? "Procesando"
: status
const base = "text-[10px] px-2 py-0.5 rounded-full border"
if (status === "completed") {
return (
<span
className={`${base} bg-emerald-50 text-emerald-700 border-emerald-200`}
>
{label}
</span>
)
}
if (status === "in_progress") {
return (
<span
className={`${base} bg-amber-50 text-amber-800 border-amber-200`}
>
{label}
</span>
)
}
return (
<span className={`${base} bg-neutral-50 text-neutral-700 border-neutral-200`}>
{label}
</span>
)
}
/* ====== Página principal: lista repositorios (Vector Stores) ====== */
function RouteComponent() {
const router = useRouter()
const vectorStores = Route.useLoaderData() as VectorStore[]
const [q, setQ] = useState("")
const [statusFilter, setStatusFilter] = useState<"all" | "completed" | "in_progress">("all")
const [selected, setSelected] = useState<VectorStore | null>(null)
const [dialogOpen, setDialogOpen] = useState(false)
const [createOpen, setCreateOpen] = useState(false)
const [deletingId, setDeletingId] = useState<string | null>(null)
const filtered = useMemo(() => {
const term = q.trim().toLowerCase()
return vectorStores.filter((vs) => {
if (statusFilter !== "all" && vs.status !== statusFilter) return false
if (!term) return true
return (
(vs.name ?? "").toLowerCase().includes(term) ||
(vs.description ?? "").toLowerCase().includes(term)
)
})
}, [vectorStores, q, statusFilter])
function openDetails(vs: VectorStore) {
setSelected(vs)
setDialogOpen(true)
}
async function handleDelete(id: string) {
if (!confirm("¿Eliminar este repositorio y sus archivos asociados en OpenAI?")) return
setDeletingId(id)
try {
await callFilesAndVectorStoresApi({
module: "vectorStores",
action: "delete",
params: { vector_store_id: id },
})
await supabase
.from("vector_store_files_meta")
.delete()
.eq("vector_store_id", id)
router.invalidate()
} catch (err: any) {
alert(err?.message ?? "Error al eliminar el repositorio")
} finally {
setDeletingId(null)
}
}
return (
<div className="p-6 space-y-4">
<Card>
<CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<CardTitle className="font-mono">Repositorios de archivos</CardTitle>
<div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
<div className="relative w-full sm:w-80">
<Icons.Search className="absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-neutral-400" />
<Input
value={q}
onChange={(e) => setQ(e.target.value)}
placeholder="Buscar por nombre o descripción…"
className="pl-8"
/>
</div>
<Select
value={statusFilter}
onValueChange={(v) =>
setStatusFilter(v as "all" | "completed" | "in_progress")
}
>
<SelectTrigger className="sm:w-[160px]">
<SelectValue placeholder="Estado" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">Todos</SelectItem>
<SelectItem value="completed">Completados</SelectItem>
<SelectItem value="in_progress">En proceso</SelectItem>
</SelectContent>
</Select>
<Button onClick={() => setCreateOpen(true)}>
<Icons.FolderPlus className="w-4 h-4 mr-2" />
Nuevo repositorio
</Button>
</div>
</CardHeader>
<CardContent>
{filtered.length ? (
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{filtered.map((vs) => (
<article
key={vs.id}
className="rounded-2xl border bg-white/70 dark:bg-neutral-900/60 p-4 flex flex-col gap-3"
>
<header className="min-w-0 space-y-1">
<div className="flex items-center justify-between gap-2">
<h3 className="font-semibold truncate">
{vs.name || "(Sin nombre)"}
</h3>
<StatusBadge status={vs.status} />
</div>
<div className="flex flex-wrap items-center gap-2 text-xs text-neutral-600">
<Badge variant="outline">
Archivos: {vs.file_counts?.completed ?? 0}
</Badge>
{typeof vs.usage_bytes === "number" && (
<span>
{(vs.usage_bytes / 1024 / 1024).toFixed(2)} MB
</span>
)}
{vs.last_active_at && (
<span className="inline-flex items-center gap-1">
<Icons.Clock3 className="w-3 h-3" />
{new Date(vs.last_active_at * 1000).toLocaleDateString()}
</span>
)}
</div>
</header>
{vs.description && (
<p className="text-sm text-neutral-700 line-clamp-3">
{vs.description}
</p>
)}
<div className="mt-auto flex items-center justify-between gap-2 pt-2">
<Button variant="ghost" size="sm" onClick={() => openDetails(vs)}>
<Icons.Eye className="w-4 h-4 mr-1" /> Abrir
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => handleDelete(vs.id)}
disabled={deletingId === vs.id}
>
<Icons.Trash2 className="w-4 h-4 mr-1" />
{deletingId === vs.id ? "Eliminando…" : "Eliminar"}
</Button>
</div>
</article>
))}
</div>
) : (
<div className="text-center text-sm text-neutral-500 py-10">
No hay repositorios todavía. Crea uno nuevo para empezar 🚀
</div>
)}
</CardContent>
</Card>
<CreateVectorStoreDialog
open={createOpen}
onOpenChange={setCreateOpen}
onCreated={() => router.invalidate()}
/>
<VectorStoreDialog
store={selected}
open={dialogOpen}
onOpenChange={(open) => {
setDialogOpen(open)
if (!open) setSelected(null)
}}
onUpdated={() => router.invalidate()}
/>
</div>
)
}
/* ====== Crear repositorio ====== */
function CreateVectorStoreDialog({
open,
onOpenChange,
onCreated,
}: {
open: boolean
onOpenChange: (open: boolean) => void
onCreated: () => void
}) {
const [name, setName] = useState("")
const [description, setDescription] = useState("")
const [creating, setCreating] = useState(false)
async function handleCreate() {
if (!name.trim()) {
alert("Escribe un nombre para el repositorio")
return
}
setCreating(true)
try {
await callFilesAndVectorStoresApi<VectorStore>({
module: "vectorStores",
action: "create",
params: { name: name.trim(), description: description.trim() || undefined },
})
onOpenChange(false)
setName("")
setDescription("")
onCreated()
} catch (err: any) {
alert(err?.message ?? "Error al crear el repositorio")
} finally {
setCreating(false)
}
}
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle className="font-mono">Nuevo repositorio</DialogTitle>
<DialogDescription>
Crea un Vector Store para agrupar archivos relacionados.
</DialogDescription>
</DialogHeader>
<div className="grid gap-3">
<div className="space-y-1">
<Label>Nombre</Label>
<Input
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Planeación curricular, Entrevistas…"
/>
</div>
<div className="space-y-1">
<Label>Descripción (opcional)</Label>
<Textarea
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="Breve descripción del contenido de este repositorio."
className="min-h-[80px]"
/>
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => onOpenChange(false)}>
Cancelar
</Button>
<Button onClick={handleCreate} disabled={creating || !name.trim()}>
{creating ? "Creando…" : "Crear repositorio"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
/* ====== Detalle de un repositorio: archivos + subida ====== */
type FileRow = {
file: VectorStoreFile
meta: VectorStoreFileMeta | null
}
function VectorStoreDialog({
store,
open,
onOpenChange,
onUpdated,
}: {
store: VectorStore | null
open: boolean
onOpenChange: (open: boolean) => void
onUpdated: () => void
}) {
const supabaseAuth = useSupabaseAuth()
const [files, setFiles] = useState<FileRow[]>([])
const [loading, setLoading] = useState(false)
const [error, setError] = useState<string | null>(null)
const [uploading, setUploading] = useState(false)
const [refreshing, setRefreshing] = useState(false)
const [file, setFile] = useState<File | null>(null)
const [label, setLabel] = useState("")
useEffect(() => {
if (!open || !store) return
void refreshFiles()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [open, store?.id])
async function refreshFiles() {
if (!store) return
setLoading(true)
setError(null)
try {
const vectorFiles = await callFilesAndVectorStoresApi<VectorStoreFile[]>({
module: "vectorStoreFiles",
action: "list",
params: { vector_store_id: store.id },
})
const { data: metaRows, error: metaError } = await supabase
.from("vector_store_files_meta")
.select("*")
.eq("vector_store_id", store.id)
.order("created_at", { ascending: false })
if (metaError) throw metaError
const meta = (metaRows ?? []) as VectorStoreFileMeta[]
const merged: FileRow[] = (vectorFiles ?? []).map((vf) => ({
file: vf,
meta: meta.find((m) => m.openai_file_id === vf.id) ?? null,
}))
setFiles(merged)
} catch (err: any) {
console.error(err)
setError(err?.message ?? "No se pudieron cargar los archivos")
} finally {
setLoading(false)
}
}
async function handleUpload() {
if (!store || !file) {
alert("Selecciona un archivo")
return
}
setUploading(true)
try {
// 1) Subir archivo a OpenAI vía Edge con FormData (igual que en tu script)
const formData = new FormData()
formData.append("module", "files")
formData.append("action", "upload")
formData.append("file", file)
formData.append("purpose", "assistants") // o lo que uses en tu flujo
const { data, error } = await supabase.functions.invoke<any>(
"files-and-vector-stores-api",
{
body: formData,
},
)
if (error) {
console.error(error)
throw error
}
const uploaded = data
// La respuesta es el objeto "file" de OpenAI:
// { object: "file", id: "file-xxx", ... }
const openaiFileId: string | undefined = uploaded?.id
if (!openaiFileId) {
console.error("Respuesta Edge inesperada:", uploaded)
throw new Error("La Edge Function no devolvió el id del archivo")
}
// 2) Mapear archivo al Vector Store (JSON normal)
await callFilesAndVectorStoresApi<any>({
module: "vectorStoreFiles",
action: "create",
params: {
vector_store_id: store.id,
body: {
file_id: openaiFileId,
},
},
})
// 3) Guardar metadata en Supabase
const { error: insertError } = await supabase
.from("vector_store_files_meta")
.insert({
user_id: supabaseAuth.user?.id ?? null,
vector_store_id: store.id,
openai_file_id: openaiFileId,
label: label.trim() || file.name,
})
if (insertError) throw insertError
setFile(null)
setLabel("")
await refreshFiles()
onUpdated()
} catch (err: any) {
console.error(err)
alert(err?.message ?? "Error al subir el archivo")
} finally {
setUploading(false)
}
}
async function handleDeleteFile(fileId: string) {
if (!store) return
if (!confirm("¿Eliminar este archivo del repositorio y de OpenAI?")) return
setRefreshing(true)
try {
await callFilesAndVectorStoresApi<any>({
module: "vectorStoreFiles",
action: "delete",
params: {
vector_store_id: store.id,
file_id: fileId,
},
})
// Opcional: eliminar también el archivo global de OpenAI
await callFilesAndVectorStoresApi<any>({
module: "files",
action: "delete",
params: { id: fileId },
})
await supabase
.from("vector_store_files_meta")
.delete()
.eq("openai_file_id", fileId)
await refreshFiles()
onUpdated()
} catch (err: any) {
console.error(err)
alert(err?.message ?? "Error al eliminar el archivo")
} finally {
setRefreshing(false)
}
}
if (!store) return null
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Icons.Folder className="h-4 w-4" />
{store.name || "(Sin nombre)"}
</DialogTitle>
<DialogDescription>
Gestiona los archivos asociados a este repositorio (Vector Store).
</DialogDescription>
</DialogHeader>
<div className="space-y-4">
<div className="flex flex-wrap items-center gap-3 text-xs text-neutral-600">
<StatusBadge status={store.status} />
<Badge variant="outline">
Archivos completados: {store.file_counts?.completed ?? 0}
</Badge>
<Badge variant="outline">
Total archivos: {store.file_counts?.total ?? 0}
</Badge>
{typeof store.usage_bytes === "number" && (
<span>{(store.usage_bytes / 1024 / 1024).toFixed(2)} MB</span>
)}
</div>
{/* Subida de archivo */}
<div className="space-y-2 rounded-lg border bg-muted/50 p-4">
<Label className="text-xs font-semibold uppercase tracking-wide text-neutral-500">
Agregar archivo al repositorio
</Label>
<div className="grid gap-3 sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] sm:items-end">
<div className="space-y-1">
<Input
type="file"
accept=".pdf,.doc,.docx,.txt,.md"
onChange={(e) => setFile(e.target.files?.[0] ?? null)}
/>
{file && (
<div className="text-xs text-neutral-600">
{file.name} · {(file.size / 1024).toFixed(1)} KB
</div>
)}
</div>
<div className="space-y-1">
<Label>Título / etiqueta</Label>
<Input
value={label}
onChange={(e) => setLabel(e.target.value)}
placeholder="Ej.: Plan 2025, Entrevista 3…"
/>
<Button
className="mt-2 w-full sm:w-auto"
onClick={handleUpload}
disabled={uploading || !file}
>
{uploading ? "Subiendo…" : "Subir al repositorio"}
</Button>
</div>
</div>
</div>
{/* Lista de archivos */}
<div className="space-y-2">
<div className="flex items-center justify-between">
<Label>Archivos en este repositorio</Label>
<Button
variant="ghost"
size="sm"
onClick={() => refreshFiles()}
disabled={loading || refreshing}
>
<Icons.RefreshCw className="h-4 w-4 mr-1" />
Actualizar
</Button>
</div>
{loading ? (
<div className="text-xs text-neutral-500 py-4">
Cargando archivos
</div>
) : error ? (
<div className="text-xs text-red-500 py-4">{error}</div>
) : files.length === 0 ? (
<div className="text-xs text-neutral-500 py-4">
Todavía no hay archivos en este repositorio
</div>
) : (
<ul className="space-y-2 max-h-64 overflow-y-auto pr-1">
{files.map(({ file, meta }) => (
<li
key={file.id}
className="flex items-center justify-between gap-3 rounded-md border bg-background px-3 py-2"
>
<div className="min-w-0">
<p className="font-medium truncate">
{meta?.label || file.id}
</p>
<p className="text-xs text-neutral-500 truncate">
{new Date(file.created_at * 1000).toLocaleString()} ·{" "}
{(file.usage_bytes / 1024).toFixed(1)} KB
</p>
</div>
<div className="flex items-center gap-2">
<StatusBadge status={file.status} />
<Button
variant="ghost"
size="icon"
onClick={() => handleDeleteFile(file.id)}
>
<Icons.Trash2 className="h-4 w-4" />
</Button>
</div>
</li>
))}
</ul>
)}
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => onOpenChange(false)}>
Cerrar
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}

View File

@@ -265,7 +265,7 @@ function Page() {
<div className="flex items-center justify-between w-full">
<span className="font-medium">
{/^\s*\d+/.test(String(u.key))
? `Unidad ${u.key && Number(u.key) ? Number(u.key) : 1}${u.__title ? `: ${u.__title}` : ""}`
? `Unidad ${u.key && Number(u.key) ? Number(u.key) + 1 : 1}${u.__title ? `: ${u.__title}` : ""}`
: u.__title}
</span>
<span className="text-[11px] text-neutral-500">{u.__temas.length} tema(s)</span>

View File

@@ -1,5 +1,5 @@
{
"include": ["**/*.ts", "**/*.tsx"],
"include": ["**/*.ts", "**/*.tsx", "src/components/ai/AIChatModal.jsx", "src/components/ai/AIChatModal.js"],
"compilerOptions": {
"target": "ES2022",
"jsx": "react-jsx",