8 Commits

5 changed files with 546 additions and 262 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 dist-ssr
*.local *.local
count.txt count.txt
.env .env*
.nitro .nitro
.tanstack .tanstack

View File

@@ -1,73 +1,89 @@
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import { supabase } from "@/auth/supabase"; import { supabase } from "@/auth/supabase";
import ReactMarkdown from "react-markdown";
// ---------------- UI MOCKS ---------------- // /* ---------- UI Mocks (sin cambios) ---------- */
// Puedes reemplazarlos por tus propios componentes UI
const Paperclip = (props) => ( 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"> <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"/> <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> </svg>
); );
const Dialog = ({ open, onOpenChange, children }) => 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; 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 }) => 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()}> <div className={`bg-white rounded-xl shadow-2xl transform transition-all max-w-6xl w-[95vw] h-[85vh] p-6 flex flex-col ${className}`}
{children} onClick={(e) => e.stopPropagation()}>{children}</div>;
</div>;
const DialogHeader = ({ children }) => <div className="pb-4 border-b border-gray-200">{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 DialogTitle = ({ className, children }) => <h2 className={`text-xl font-bold ${className}`}>{children}</h2>;
const Button = ({ onClick, disabled, className, variant, children }) => ( const Button = ({ onClick, disabled, className, variant, children }) => (
<button <button onClick={onClick} disabled={disabled}
onClick={onClick}
disabled={disabled}
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors 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"} ${variant === "outline"
${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`} ? "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} {children}
</button> </button>
); );
const Card = ({ className, children }) => <div className={`bg-white rounded-2xl shadow-md ${className}`}>{children}</div>; 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 CardContent = ({ className, children }) => <div className={`p-4 ${className}`}>{children}</div>;
const ScrollArea = ({ className, children }) => <div className={`overflow-y-auto ${className}`}>{children}</div>; const ScrollArea = ({ className, children }) => <div className={`overflow-y-auto ${className}`}>{children}</div>;
// ---------------- COMPONENTE ---------------- // /* ------------- COMPONENT ------------- */
export default function AIChatModal({ open, onClose, context, onAccept }) { export default function AIChatModal({ open, onClose, context, onAccept, plan_format }) {
const [vectorStores, setVectorStores] = useState([]); const [vectorStores, setVectorStores] = useState([]);
const [vectorFiles, setVectorFiles] = useState([]); const [vectorFiles, setVectorFiles] = useState([]);
const [selectedVector, setSelectedVector] = useState(null);
const [selectedFiles, setSelectedFiles] = useState([]);
const [attachedFile, setAttachedFile] = useState(null); const [attachedFiles, setAttachedFiles] = useState([]);
const [attachedPreview, setAttachedPreview] = useState(null); const [attachedPreviews, setAttachedPreviews] = useState([]);
// chat
const [messages, setMessages] = useState([]); const [messages, setMessages] = useState([]);
const [input, setInput] = useState(""); const [input, setInput] = useState("");
// loading states
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [loadingFiles, setLoadingFiles] = useState(false); const [loadingFiles, setLoadingFiles] = useState(false);
const [selectedVector, setSelectedVector] = useState(null); const [loadingVectors, setLoadingVectors] = useState(false);
// conversation control
const [conversationId, setConversationId] = useState(null);
const [creatingConversation, setCreatingConversation] = useState(false);
const messagesEndRef = useRef(null); const messagesEndRef = useRef(null);
const scrollToBottom = () => messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); const scrollToBottom = () => messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
useEffect(scrollToBottom, [messages]); useEffect(scrollToBottom, [messages]);
// ------------------------------------ const normalizeInvokeResponse = (resp) => {
// Reset al abrir o cerrar modal 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(() => { useEffect(() => {
if (!open) { if (!open) {
if (conversationId) {
deleteConversation(conversationId).catch((e) => console.error(e));
}
setMessages([]); setMessages([]);
setInput(""); setInput("");
setAttachedFile(null); setSelectedFiles([]);
setAttachedPreview(null); setAttachedFiles([]);
setVectorStores([]); setAttachedPreviews([]);
setVectorFiles([]); setConversationId(null);
setSelectedVector(null); setSelectedVector(null);
setVectorFiles([]);
return; return;
} }
@@ -75,298 +91,534 @@ export default function AIChatModal({ open, onClose, context, onAccept }) {
setMessages([ setMessages([
{ {
role: "system", role: "system",
content: `Contexto: ${context.section}\nTexto original:\n${context.originalText || "—"}`, //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 || "—"}`
}
]); ]);
} }
}, [open, context]);
// ------------------------------------ (async () => {
// Cargar vector stores await createConversation();
// ------------------------------------ fetchVectorStores();
useEffect(() => { })();
if (!open) return;
}, [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;
}
const fetchVectorStores = async () => {
try { try {
setLoading(true); setLoading(true);
const { data: { session } } = await supabase.auth.getSession(); const { data: { session } } = await supabase.auth.getSession();
const token = session?.access_token; const token = session?.access_token;
const { data, error } = await supabase.functions.invoke( // archivos adjuntos (locales) -> base64
"files-and-vector-stores-api", 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}` }, headers: { Authorization: `Bearer ${token}` },
body: { module: "vectorStores", action: "list" }, body: payload
} }
); );
if (error) throw error; if (error) throw error;
setVectorStores(Array.isArray(data) ? data : []); 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) { } catch (err) {
console.error("Error al obtener vector stores:", err); console.error("Error en handleConversation:", err);
setVectorStores([]); setMessages(prev => [...prev, { role: "assistant", content: "Ocurrió un error al procesar tu mensaje." }]);
} finally { } finally {
setLoading(false); setLoading(false);
} }
}; };
fetchVectorStores(); // ---------- 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]); }, [open]);
// ------------------------------------
// Cargar archivos del vector seleccionado
// ------------------------------------
const loadFilesForVector = async (vectorStoreId) => { const loadFilesForVector = async (vectorStoreId) => {
try { try {
setLoadingFiles(true); setLoadingFiles(true);
const { data: { session } } = await supabase.auth.getSession(); const { data: { session } } = await supabase.auth.getSession();
const token = session?.access_token; const token = session?.access_token;
const { data, error } = await supabase.functions.invoke( const { data, error } = await supabase.functions.invoke("files-and-vector-stores-api", {
"files-and-vector-stores-api",
{
headers: { Authorization: `Bearer ${token}` }, headers: { Authorization: `Bearer ${token}` },
body: { body: { module: "vectorStoreFiles", action: "list", params: { vector_store_id: vectorStoreId } }
module: "vectorStoreFiles", });
action: "list",
params: { vector_store_id: vectorStoreId },
},
}
);
if (error) throw error; if (error) throw error;
setVectorFiles(Array.isArray(data) ? data : []); setVectorFiles(Array.isArray(data) ? data : (data?.data ?? []));
} catch (err) { } catch (err) {
console.error("Error al obtener archivos del vector store:", err); console.error("Error loading vector files:", err);
setVectorFiles([]); setVectorFiles([]);
} finally { } finally {
setLoadingFiles(false); setLoadingFiles(false);
} }
}; };
// ------------------------------------ // ---------- UI helpers ----------
// Adjuntar archivo
// ------------------------------------
const handleAttach = (e) => { const handleAttach = (e) => {
const file = e.target.files?.[0]; const files = Array.from(e.target.files);
if (!file) return; if (!files.length) return;
setAttachedFile(file); setAttachedFiles(prev => [...prev, ...files]);
setAttachedPreview(file.name); setAttachedPreviews(prev => [...prev, ...files.map(f => f.name)]);
}; };
// ------------------------------------ // Al hacer click en un vector: expandir (solo uno a la vez) y cargar sus archivos
// handleSend — versión final para Supabase Edge Function const handleVectorClick = async (vector) => {
// ------------------------------------ if (selectedVector === vector.id) {
const handleSend = async () => { // colapsar
if (!input.trim() && !attachedFile) return; setSelectedVector(null);
setVectorFiles([]);
// Construir texto del mensaje del usuario setSelectedFiles([]);
const userMessage = input.trim() return;
? input.trim()
: attachedFile
? `Consulta sobre archivo: ${attachedFile.name}`
: "";
// Agregar mensaje al chat
setMessages(prev => [...prev, { role: "user", content: userMessage }]);
setInput("");
setLoading(true);
try {
const formData = new FormData();
const fullPrompt = `
${context?.section ? `Sección: ${context.section}` : ""}
${context?.fieldKey ? `Campo: ${context.fieldKey}` : ""}
Texto original:
${context?.originalText || "Sin texto original"}
Solicitud del usuario:
${userMessage}
Responde con una versión mejorada en texto directo, sin explicaciones.
`.trim();
formData.append("prompt", fullPrompt);
if (attachedFile) formData.append("file", attachedFile);
const { data, error } = await supabase.functions.invoke(
"simple-chat",
{ body: formData }
);
if (error) throw error;
// Respuesta de la IA
setMessages(prev => [
...prev,
{ role: "assistant", content: data?.text || "Sin respuesta del modelo." }
]);
} catch (err) {
console.error("Error enviando mensaje:", err);
setMessages(prev => [...prev, { role: "assistant", content: "Ocurrió un error al conectar con la IA." }]);
} }
setLoading(false); setSelectedVector(vector.id);
setAttachedFile(null); setSelectedFiles([]);
setAttachedPreview(null); 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;
}; };
// ------------------------------------
// UI
// ------------------------------------
return ( return (
<Dialog open={open} onOpenChange={onClose}> <Dialog open={open} onOpenChange={onClose} >
<DialogContent> <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> <DialogHeader>
<DialogTitle>Asistente Inteligente</DialogTitle> <DialogTitle>Asistente Inteligente</DialogTitle>
</DialogHeader> </DialogHeader>
<div className="flex-1 overflow-y-auto pt-4"> <div className="flex-1 pt-4 min-h-0">
<div className="flex gap-6 min-h-full"> <div className="flex gap-6 h-full min-h-0">
{/* Left: vectors */}
{/* LEFT: VECTOR STORES */} <Card className="w-1/3 min-w-[250px] max-w-sm flex flex-col bg-muted/20 border border-gray-200 rounded-2xl">
<Card className="w-1/3 max-w-sm flex flex-col bg-muted/20 border border-gray-200"> <CardContent className="flex flex-col flex-1 p-4">
<CardContent className="flex flex-col flex-1"> <h3 className="font-semibold text-sm mb-3">Repositorio de archivos</h3>
<h3 className="font-semibold text-sm mb-3">Vector Stores</h3>
<ScrollArea className="flex-1"> <ScrollArea className="flex-1">
{loading ? ( {loadingVectors ? (
<p className="text-center text-gray-400">Cargando...</p> <p className="text-gray-500 text-sm text-center mt-10">Cargando Repositorio de archivos...</p>
) : vectorStores.length === 0 ? ( ) : vectorStores.length === 0 ? (
<p className="text-center text-gray-400">No hay vector stores</p> <p className="text-gray-500 text-sm text-center mt-10">No hay Repositorio de archivos.</p>
) : ( ) : (
<ul className="space-y-2"> <div className="space-y-3">
{vectorStores.map(store => ( {vectorStores.map((vector) => (
<li <div key={vector.id}>
key={store.id} {/* VECTOR */}
onClick={() => { <div
setSelectedVector(store); onClick={() => handleVectorClick(vector)}
loadFilesForVector(store.id); 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"}`}
className={`border p-2 rounded-lg cursor-pointer
${selectedVector?.id === store.id ? "bg-blue-100" : "bg-white"}`}
> >
<strong>{store.name || store.id}</strong> <div className="truncate">
<p className="text-xs text-gray-500 truncate">{store.description}</p> <strong className="block truncate">{vector.name || vector.id}</strong>
</li> <p className="text-xs text-gray-400 truncate">{vector.description || ""}</p>
))} </div>
</ul> <div className="text-xs text-gray-500">{selectedVector === vector.id ? "▼" : "▶"}</div>
)} </div>
</ScrollArea>
<h4 className="mt-4 font-semibold text-sm">Archivos</h4> {/* ARCHIVOS cuando está expandido */}
<ScrollArea className="mt-2 max-h-40"> {selectedVector === vector.id && (
<div className="ml-4 mt-2 mb-2 space-y-2">
{loadingFiles ? ( {loadingFiles ? (
<p className="text-gray-400 text-sm">Cargando archivos...</p> <p className="text-gray-400 text-sm">Cargando archivos...</p>
) : vectorFiles.length === 0 ? ( ) : vectorFiles.length === 0 ? (
<p className="text-gray-400 text-sm">No hay archivos</p> <p className="text-gray-400 text-sm">No hay archivos en este repositorio</p>
) : ( ) : (
<ul className="space-y-1"> vectorFiles.map((file) => (
{vectorFiles.map(f => ( <label key={file.id} className="flex items-center gap-2 p-2 rounded-md hover:bg-gray-50 cursor-pointer">
<li key={f.id} className="border bg-white p-2 rounded-lg text-sm"> <input
{f.id} 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> </li>
))} ))}
</ul> </ul>
)} )}
</ScrollArea> </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> </CardContent>
</Card> </Card>
{/* RIGHT: CHAT */} {/* Right: Chat */}
<Card className="flex-1 flex flex-col border border-gray-200"> <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"> <CardContent className="flex flex-col flex-1 p-4 min-h-0">
<h3 className="font-semibold text-sm mb-3">Chat</h3> <h3 className="font-semibold text-sm mb-3 flex-shrink-0">Chat con IA</h3>
<div className="flex-1 overflow-y-auto border p-3 rounded-lg bg-gray-50 space-y-3"> <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 ? ( {messages.length === 0 ? (
<p className="text-gray-400 text-center text-sm">Inicia la conversación</p> <p className="text-gray-400 text-sm text-center mt-10">Inicia una conversación...</p>
) : ( ) : (
messages.map((msg, idx) => ( messages.map((m, i) => (
<div <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"}`}>
key={idx} <strong className="font-bold">{m.role === "user" ? "Tú:" : m.role === "assistant" ? "IA:" : "Sistema:"}</strong>{" "}
className={`p-3 rounded-xl max-w-[85%] shadow-sm whitespace-pre-wrap <ReactMarkdown>{m.content}</ReactMarkdown>
${msg.role === "user"
? "bg-blue-50 text-blue-800 ml-auto"
: "bg-white text-gray-700 border border-gray-200 mr-auto"
}`}
>
<strong>{msg.role === "user" ? "Tú:" : "IA:"}</strong>
<p>{msg.content}</p>
</div> </div>
)) ))
)} )}
{loading && ( {loading && (
<div className="p-3 bg-white border rounded-xl max-w-fit"> <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">
<span className="text-gray-600 text-sm">La IA está respondiendo...</span> <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>
)} )}
<div ref={messagesEndRef} /> <div ref={messagesEndRef} />
</div> </div>
{attachedPreview && (
<div className="flex items-center mt-2 p-2 border rounded-lg bg-gray-100 text-sm">
<Paperclip className="w-4 h-4 text-blue-500" />
<span className="ml-2">{attachedPreview}</span>
<button
onClick={() => { setAttachedFile(null); setAttachedPreview(null); }}
className="ml-auto text-red-500 text-xs"
>
Quitar
</button>
</div> </div>
{attachedPreviews.length > 0 && (
<ul className="text-xs text-gray-600 mt-2">
{attachedPreviews.map((name, i) => (
<li key={i}>📄 {name}</li>
))}
</ul>
)} )}
{/* Input */} <div className="flex gap-2 mt-4 items-end flex-shrink-0">
<div className="flex gap-2 mt-4"> <label className="cursor-pointer text-gray-600 hover:text-blue-600 self-center">
<label className="cursor-pointer text-gray-600 hover:text-blue-600">
<Paperclip className="w-5 h-5" /> <Paperclip className="w-5 h-5" />
<input type="file" className="hidden" onChange={handleAttach} /> <input type="file" accept=".pdf,.txt,.doc,.docx" multiple className="hidden" onChange={handleAttach} />
</label> </label>
<textarea <textarea
value={input} value={input}
onChange={e => setInput(e.target.value)} onChange={(e) => setInput(e.target.value)}
placeholder="Escribe tu pregunta..." placeholder="Escribe tu pregunta..."
className="flex-1 border rounded-lg p-3 text-sm"
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey) { if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault(); e.preventDefault();
handleSend(); 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 <Button onClick={handleSend} disabled={loading || creatingConversation || (!input.trim() && attachedFiles.length === 0 && selectedFiles.length === 0)} className="shadow-md">
onClick={handleSend} {creatingConversation ? "Preparando..." : loading ? "Enviando..." : "Enviar"}
disabled={loading || (!input.trim() && !attachedFile)}
>
Enviar
</Button> </Button>
<Button <Button onClick={handleApply} disabled={!messages.some((m) => m.role === "assistant")} className="shadow-md">
onClick={() => { Aplicar mejora
const last = messages[messages.length - 1];
if (last?.role === "assistant") {
onAccept(last.content);
onClose();
}
}}
disabled={!messages.some(m => m.role === "assistant")}
>
Aplicar
</Button> </Button>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
</div> </div>
</DialogContent> </DialogContent>

View File

@@ -12,6 +12,7 @@ import { HistorialCambiosModal } from "../historico/HistorialCambiosModal"
import AIChatModal from "../ai/AIChatModal" import AIChatModal from "../ai/AIChatModal"
/* ===================================================== /* =====================================================
Query keys & fetcher Query keys & fetcher
===================================================== */ ===================================================== */
@@ -54,6 +55,8 @@ export const planTextOptions = (planId: string) =>
staleTime: 60_000, staleTime: 60_000,
}) })
/* ===================================================== /* =====================================================
Color helpers Color helpers
===================================================== */ ===================================================== */
@@ -124,6 +127,17 @@ export function AcademicSections({ planId, color }: { planId: string; color?: st
const [editing, setEditing] = useState<null | { key: keyof PlanTextFields; title: string }>(null) const [editing, setEditing] = useState<null | { key: keyof PlanTextFields; title: string }>(null)
const [draft, setDraft] = useState("") 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 --- // --- mutation con actualización optimista ---
const updateField = useMutation({ const updateField = useMutation({
mutationFn: async ({ key, value }: { key: keyof PlanTextFields; value: string | string[] | null }) => { mutationFn: async ({ key, value }: { key: keyof PlanTextFields; value: string | string[] | null }) => {
@@ -309,13 +323,17 @@ export function AcademicSections({ planId, color }: { planId: string; color?: st
/> />
<AIChatModal <AIChatModal
//plan_format={plan_format}
open={openModalIa} open={openModalIa}
onClose={() => setopenModalIa(false)} onClose={() => setopenModalIa(false)}
edgeFunctionUrl="https://exdkssurzmjnnhgtiama.supabase.co/functions/v1/simple-chat"
context={{ context={{
section: iaContext?.title, section: null,//,iaContext?.title,
fieldKey: iaContext?.key, fieldKey: null,//iaContext?.key,
originalText: iaContext?.content, 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) => { onAccept={(newText: string) => {
if (iaContext) { 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": "..."
}