Se agrega componente de ia y pdf

2025-11-13 10:02:26 -06:00
parent 0e884f20c5
commit 7105b286bf
6 changed files with 671 additions and 8 deletions
@@ -0,0 +1,371 @@
+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>
+  )
+}