Se agrega realtime para chat de ia plan

Reviewed-on: #156

.github/copilot-instructions.md

@@ -1 +0,0 @@
-Al funcionar como agente, ignora los problemas de eslint del orden de imports

bun.lock

@@ -20,7 +20,7 @@
         "@radix-ui/react-tabs": "^1.1.13",
         "@radix-ui/react-tooltip": "^1.2.8",
         "@stepperize/react": "^5.1.9",
-        "@supabase/supabase-js": "^2.98.0",
+        "@supabase/supabase-js": "^2.90.1",
         "@tailwindcss/vite": "^4.0.6",
         "@tanstack/react-devtools": "^0.7.0",
         "@tanstack/react-query": "^5.66.5",
@@ -441,17 +441,17 @@
 
     "@stylistic/eslint-plugin": ["@stylistic/eslint-plugin@5.7.1", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.9.1", "@typescript-eslint/types": "^8.53.1", "eslint-visitor-keys": "^4.2.1", "espree": "^10.4.0", "estraverse": "^5.3.0", "picomatch": "^4.0.3" }, "peerDependencies": { "eslint": ">=9.0.0" } }, "sha512-zjTUwIsEfT+k9BmXwq1QEFYsb4afBlsI1AXFyWQBgggMzwBFOuu92pGrE5OFx90IOjNl+lUbQoTG7f8S0PkOdg=="],
 
-    "@supabase/auth-js": ["@supabase/auth-js@2.98.0", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-GBH361T0peHU91AQNzOlIrjUZw9TZbB9YDRiyFgk/3Kvr3/Z1NWUZ2athWTfHhwNNi8IrW00foyFxQD9IO/Trg=="],
+    "@supabase/auth-js": ["@supabase/auth-js@2.93.1", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-pC0Ek4xk4z6q7A/3+UuZ/eYgfFUUQTg3DhapzrAgJnFGDJDFDyGCj6v9nIz8+3jfLqSZ3QKGe6AoEodYjShghg=="],
 
-    "@supabase/functions-js": ["@supabase/functions-js@2.98.0", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-N/xEyiNU5Org+d+PNCpv+TWniAXRzxIURxDYsS/m2I/sfAB/HcM9aM2Dmf5edj5oWb9GxID1OBaZ8NMmPXL+Lg=="],
+    "@supabase/functions-js": ["@supabase/functions-js@2.93.1", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-Ott2IcIXHGupaC0nX9WNEiJAX4OdlGRu9upkkURaQHbaLdz9JuCcHxlwTERgtgjMpikbIWHfMM1M9QTQFYABiA=="],
 
-    "@supabase/postgrest-js": ["@supabase/postgrest-js@2.98.0", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-v6e9WeZuJijzUut8HyXu6gMqWFepIbaeaMIm1uKzei4yLg9bC9OtEW9O14LE/9ezqNbSAnSLO5GtOLFdm7Bpkg=="],
+    "@supabase/postgrest-js": ["@supabase/postgrest-js@2.93.1", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-uRKKQJBDnfi6XFNFPNMh9+u3HT2PCgp065PcMPmG7e0xGuqvLtN89QxO2/SZcGbw2y1+mNBz0yUs5KmyNqF2fA=="],
 
-    "@supabase/realtime-js": ["@supabase/realtime-js@2.98.0", "", { "dependencies": { "@types/phoenix": "^1.6.6", "@types/ws": "^8.18.1", "tslib": "2.8.1", "ws": "^8.18.2" } }, "sha512-rOWt28uGyFipWOSd+n0WVMr9kUXiWaa7J4hvyLCIHjRFqWm1z9CaaKAoYyfYMC1Exn3WT8WePCgiVhlAtWC2yw=="],
+    "@supabase/realtime-js": ["@supabase/realtime-js@2.93.1", "", { "dependencies": { "@types/phoenix": "^1.6.6", "@types/ws": "^8.18.1", "tslib": "2.8.1", "ws": "^8.18.2" } }, "sha512-2WaP/KVHPlQDjWM6qe4wOZz6zSRGaXw1lfXf4thbfvk3C3zPPKqXRyspyYnk3IhphyxSsJ2hQ/cXNOz48008tg=="],
 
-    "@supabase/storage-js": ["@supabase/storage-js@2.98.0", "", { "dependencies": { "iceberg-js": "^0.8.1", "tslib": "2.8.1" } }, "sha512-tzr2mG+v7ILSAZSfZMSL9OPyIH4z1ikgQ8EcQTKfMRz4EwmlFt3UnJaGzSOxyvF5b+fc9So7qdSUWTqGgeLokQ=="],
+    "@supabase/storage-js": ["@supabase/storage-js@2.93.1", "", { "dependencies": { "iceberg-js": "^0.8.1", "tslib": "2.8.1" } }, "sha512-3KVwd4S1i1BVPL6KIywe5rnruNQXSkLyvrdiJmwnqwbCcDujQumARdGWBPesqCjOPKEU2M9ORWKAsn+2iLzquA=="],
 
-    "@supabase/supabase-js": ["@supabase/supabase-js@2.98.0", "", { "dependencies": { "@supabase/auth-js": "2.98.0", "@supabase/functions-js": "2.98.0", "@supabase/postgrest-js": "2.98.0", "@supabase/realtime-js": "2.98.0", "@supabase/storage-js": "2.98.0" } }, "sha512-Ohc97CtInLwZyiSASz7tT9/Abm/vqnIbO9REp+PivVUII8UZsuI3bngRQnYgJdFoOIwvaEII1fX1qy8x0CyNiw=="],
+    "@supabase/supabase-js": ["@supabase/supabase-js@2.93.1", "", { "dependencies": { "@supabase/auth-js": "2.93.1", "@supabase/functions-js": "2.93.1", "@supabase/postgrest-js": "2.93.1", "@supabase/realtime-js": "2.93.1", "@supabase/storage-js": "2.93.1" } }, "sha512-FJTgS5s0xEgRQ3u7gMuzGObwf3jA4O5Ki/DgCDXx94w1pihLM4/WG3XFa4BaCJYfuzLxLcv6zPPA5tDvBUjAUg=="],
 
     "@tailwindcss/node": ["@tailwindcss/node@4.1.18", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "enhanced-resolve": "^5.18.3", "jiti": "^2.6.1", "lightningcss": "1.30.2", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.1.18" } }, "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ=="],
 

components.json

@@ -10,7 +10,6 @@
     "cssVariables": true,
     "prefix": ""
   },
-  "iconLibrary": "lucide",
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",
@@ -18,11 +17,11 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
+  "iconLibrary": "lucide",
   "registries": {
     "@shadcn-studio": "https://shadcnstudio.com/r/{name}.json",
     "@ss-components": "https://shadcnstudio.com/r/components/{name}.json",
     "@ss-blocks": "https://shadcnstudio.com/r/blocks/{name}.json",
-    "@ss-themes": "https://shadcnstudio.com/r/themes/{name}.json",
+    "@ss-themes": "https://shadcnstudio.com/r/themes/{name}.json"
-    "@supabase": "https://supabase.com/ui/r/{name}.json"
   }
 }

package.json

@@ -33,7 +33,7 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@stepperize/react": "^5.1.9",
-    "@supabase/supabase-js": "^2.98.0",
+    "@supabase/supabase-js": "^2.90.1",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-devtools": "^0.7.0",
     "@tanstack/react-query": "^5.66.5",

src/components/Header.tsx

@@ -1,20 +1,9 @@
-import { Link, useNavigate } from '@tanstack/react-router'
+import { Link } from '@tanstack/react-router'
-import { Home, LogOut, Menu, Network, X } from 'lucide-react'
+import { Home, Menu, Network, X } from 'lucide-react'
 import { useState } from 'react'
 
-import { supabaseBrowser } from '@/data/supabase/client'
-
 export default function Header() {
   const [isOpen, setIsOpen] = useState(false)
-  const navigate = useNavigate()
-
-  const handleLogout = async () => {
-    try {
-      await supabaseBrowser().auth.signOut()
-    } finally {
-      void navigate({ to: '/login', replace: true })
-    }
-  }
 
   return (
     <>
@@ -32,16 +21,6 @@ export default function Header() {
             <img src="/lasalle-logo.svg" alt="La Salle Logo" className="h-10" />
           </Link>
         </h1>
-
-        <button
-          onClick={handleLogout}
-          className="ml-auto inline-flex items-center gap-2 rounded-lg p-2 transition-colors hover:bg-gray-700"
-          aria-label="Logout"
-          title="Logout"
-        >
-          <LogOut size={20} />
-          <span className="hidden sm:inline">Salir</span>
-        </button>
       </header>
 
       <aside

src/components/asignaturas/detalle/IAAsignaturaTab.tsx

@@ -1,4 +1,5 @@
-import { useParams, useRouterState } from '@tanstack/react-router'
+import { useQueryClient } from '@tanstack/react-query'
+import { useParams } from '@tanstack/react-router'
 import {
   Sparkles,
   Send,
@@ -10,48 +11,27 @@ import {
   BookOpen,
   Check,
   X,
+  MessageSquarePlus,
+  Archive,
+  History, // Agregado
 } from 'lucide-react'
 import { useState, useEffect, useRef, useMemo } from 'react'
 
-import type { IAMessage, IASugerencia } from '@/types/asignatura'
+import type { IASugerencia } from '@/types/asignatura'
 
 import { Avatar, AvatarFallback } from '@/components/ui/avatar'
-import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Textarea } from '@/components/ui/textarea'
-import { useSubject } from '@/data'
+import {
+  useAISubjectChat,
+  useConversationBySubject,
+  useMessagesBySubjectChat,
+  useSubject,
+  useUpdateSubjectConversationStatus,
+} from '@/data'
 import { cn } from '@/lib/utils'
 
-// Tipos importados de tu archivo de asignatura
-
-const PRESETS = [
-  {
-    id: 'mejorar-objetivo',
-    label: 'Mejorar objetivo',
-    icon: Target,
-    prompt: 'Mejora la redacción del objetivo de esta asignatura...',
-  },
-  {
-    id: 'contenido-tematico',
-    label: 'Sugerir contenido',
-    icon: BookOpen,
-    prompt: 'Genera un desglose de temas para esta asignatura...',
-  },
-  {
-    id: 'actividades',
-    label: 'Actividades de aprendizaje',
-    icon: GraduationCap,
-    prompt: 'Sugiere actividades prácticas para los temas seleccionados...',
-  },
-  {
-    id: 'bibliografia',
-    label: 'Actualizar bibliografía',
-    icon: FileText,
-    prompt: 'Recomienda bibliografía reciente para esta asignatura...',
-  },
-]
-
 interface SelectedField {
   key: string
   label: string
@@ -59,165 +39,298 @@ interface SelectedField {
 }
 
 interface IAAsignaturaTabProps {
-  asignatura: Record<string, any>
+  asignatura?: Record<string, any>
-  messages: Array<IAMessage>
-  onSendMessage: (message: string, campoId?: string) => void
   onAcceptSuggestion: (sugerencia: IASugerencia) => void
   onRejectSuggestion: (messageId: string) => void
 }
 
 export function IAAsignaturaTab({
-  messages,
-  onSendMessage,
   onAcceptSuggestion,
   onRejectSuggestion,
 }: IAAsignaturaTabProps) {
-  const routerState = useRouterState()
+  const queryClient = useQueryClient()
   const { asignaturaId } = useParams({
     from: '/planes/$planId/asignaturas/$asignaturaId',
   })
 
-  const { data: datosGenerales, isLoading: loadingAsig } =
+  // --- ESTADOS ---
-    useSubject(asignaturaId)
+  const [activeChatId, setActiveChatId] = useState<string | undefined>(
-  // ESTADOS PRINCIPALES (Igual que en Planes)
+    undefined,
+  )
+  const [showArchived, setShowArchived] = useState(false)
   const [input, setInput] = useState('')
   const [selectedFields, setSelectedFields] = useState<Array<SelectedField>>([])
   const [showSuggestions, setShowSuggestions] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
+  const [isSending, setIsSending] = useState(false)
   const scrollRef = useRef<HTMLDivElement>(null)
 
-  // 1. Transformar datos de la asignatura para el menú
+  // --- DATA QUERIES ---
-  const availableFields = useMemo(() => {
+  const { data: datosGenerales } = useSubject(asignaturaId)
-    if (!datosGenerales?.datos) return []
+  const { data: todasConversaciones, isLoading: loadingConv } =
+    useConversationBySubject(asignaturaId)
+  const { data: rawMessages } = useMessagesBySubjectChat(activeChatId, {
+    enabled: !!activeChatId,
+  })
+  const { mutateAsync: sendMessage } = useAISubjectChat()
+  const { mutate: updateStatus } = useUpdateSubjectConversationStatus()
+  const [isCreatingNewChat, setIsCreatingNewChat] = useState(false)
+  const hasInitialSelected = useRef(false)
 
-    const estructuraProps =
+  // --- AUTO-SCROLL ---
-      datosGenerales?.estructuras_asignatura?.definicion?.properties || {}
+  useEffect(() => {
+    const viewport = scrollRef.current?.querySelector(
+      '[data-radix-scroll-area-viewport]',
+    )
+    if (viewport) {
+      viewport.scrollTop = viewport.scrollHeight
+    }
+  }, [rawMessages, isSending])
 
-    return Object.keys(datosGenerales.datos).map((key) => {
+  // --- FILTRADO DE CHATS ---
-      const estructuraCampo = estructuraProps[key]
+  const { activeChats, archivedChats } = useMemo(() => {
+    const chats = todasConversaciones || []
+    return {
+      activeChats: chats.filter((c: any) => c.estado === 'ACTIVA'),
+      archivedChats: chats.filter((c: any) => c.estado === 'ARCHIVADA'),
+    }
+  }, [todasConversaciones])
 
-      const labelAmigable =
+  // --- PROCESAMIENTO DE MENSAJES ---
-        estructuraCampo?.title ||
+  const messages = useMemo(() => {
-        key.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())
+    if (!rawMessages) return []
-
+    return rawMessages.flatMap((m) => {
-      return {
+      const msgs = []
-        key,
+      msgs.push({ id: `${m.id}-user`, role: 'user', content: m.mensaje })
-        label: labelAmigable,
+      if (m.respuesta) {
-        value: String(datosGenerales.datos[key] || ''),
+        msgs.push({
+          id: `${m.id}-ai`,
+          role: 'assistant',
+          content: m.respuesta,
+          sugerencia: m.propuesta?.recommendations?.[0]
+            ? {
+                id: m.id,
+                campoKey: m.propuesta.recommendations[0].campo_afectado,
+                campoNombre:
+                  m.propuesta.recommendations[0].campo_afectado.replace(
+                    /_/g,
+                    ' ',
+                  ),
+                valorSugerido: m.propuesta.recommendations[0].texto_mejora,
+                aceptada: m.propuesta.recommendations[0].aplicada,
+              }
+            : null,
+        })
       }
+      return msgs
     })
-  }, [datosGenerales])
+  }, [rawMessages])
-
-  // 2. Manejar el estado inicial si viene de "Datos de Asignatura" (Prefill)
 
+  // Auto-selección inicial
   useEffect(() => {
-    const state = routerState.location.state as any
+    // Si ya hay un chat, o si el usuario ya interactuó (hasInitialSelected), abortamos.
+    if (activeChatId || hasInitialSelected.current) return
 
-    if (state?.prefillCampo && availableFields.length > 0) {
+    if (activeChats.length > 0 && !loadingConv) {
-      console.log(state?.prefillCampo)
+      setActiveChatId(activeChats[0].id)
-      console.log(availableFields)
+      hasInitialSelected.current = true
+    }
+  }, [activeChats, loadingConv])
 
-      const field = availableFields.find((f) => f.key === state.prefillCampo)
+  const handleSend = async (promptOverride?: string) => {
+    const text = promptOverride || input
+    if (!text.trim() && selectedFields.length === 0) return
 
-      if (field && !selectedFields.find((sf) => sf.key === field.key)) {
+    setIsSending(true)
-        setSelectedFields([field])
+    try {
-        // Sincronizamos el texto inicial con el campo pre-seleccionado
+      const response = await sendMessage({
-        setInput(`Mejora el campo ${field.label}: `)
+        subjectId: asignaturaId as any, // Importante: se usa para crear la conv si activeChatId es undefined
+        content: text,
+        campos: selectedFields.map((f) => f.key),
+        conversacionId: activeChatId, // Si es undefined, la mutación crea el chat automáticamente
+      })
+
+      // IMPORTANTE: Después de la respuesta, actualizamos el ID activo con el que creó el backend
+      if (response.conversacionId) {
+        setActiveChatId(response.conversacionId)
       }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [availableFields])
 
-  // Scroll automático
+      setInput('')
-  useEffect(() => {
+      setSelectedFields([])
-    if (scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
-    }
-  }, [messages, isLoading])
 
-  // 3. Lógica para el disparador ":"
+      // Invalidamos la lista de conversaciones para que el nuevo chat aparezca en el historial (panel izquierdo)
-  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      queryClient.invalidateQueries({
-    const val = e.target.value
+        queryKey: ['conversation-by-subject', asignaturaId],
-    setInput(val)
+      })
-    setShowSuggestions(val.endsWith(':'))
+    } catch (error) {
+      console.error('Error al enviar mensaje:', error)
+    } finally {
+      setIsSending(false)
+    }
   }
 
   const toggleField = (field: SelectedField) => {
-    setSelectedFields((prev) => {
+    setSelectedFields((prev) =>
-      const isSelected = prev.find((f) => f.key === field.key)
+      prev.find((f) => f.key === field.key)
-
+        ? prev.filter((f) => f.key !== field.key)
-      // 1. Si ya está seleccionado, lo quitamos (Toggle OFF)
+        : [...prev, field],
-      if (isSelected) {
+    )
-        return prev.filter((f) => f.key !== field.key)
-      }
-
-      // 2. Si no está, lo agregamos a la lista (Toggle ON)
-      const newSelected = [...prev, field]
-
-      // 3. Actualizamos el texto del input para reflejar los títulos (labels)
-      setInput((prevText) => {
-        // Separamos lo que el usuario escribió antes del disparador ":"
-        // y lo que viene después (posibles keys/labels previos)
-        const parts = prevText.split(':')
-        const beforeColon = parts[0]
-
-        // Creamos un string con los labels de todos los campos seleccionados
-        const labelsPath = newSelected.map((f) => f.label).join(', ')
-
-        return `${beforeColon.trim()}: ${labelsPath} `
-      })
-
-      return newSelected
-    })
-
-    // Opcional: mantener abierto si quieres que el usuario elija varios seguidos
-    // setShowSuggestions(false)
   }
 
-  const buildPrompt = (userInput: string) => {
+  const availableFields = useMemo(() => {
-    if (selectedFields.length === 0) return userInput
+    if (!datosGenerales?.datos) return []
-    const fieldsText = selectedFields
+    const estructuraProps =
-      .map((f) => `- ${f.label}: ${f.value || '(vacio)'}`)
+      datosGenerales?.estructuras_asignatura?.definicion?.properties || {}
-      .join('\n')
+    return Object.keys(datosGenerales.datos).map((key) => ({
-
+      key,
-    return `${userInput}\n\nCampos a analizar:\n${fieldsText}`.trim()
+      label:
-  }
+        estructuraProps[key]?.title || key.replace(/_/g, ' ').toUpperCase(),
-
+      value: String(datosGenerales.datos[key] || ''),
-  const handleSend = async (promptOverride?: string) => {
+    }))
-    const rawText = promptOverride || input
+  }, [datosGenerales])
-    if (!rawText.trim() && selectedFields.length === 0) return
-
-    const finalPrompt = buildPrompt(rawText)
-
-    setIsLoading(true)
-    // Llamamos a la función que viene por props
-    onSendMessage(finalPrompt, selectedFields[0]?.key)
 
+  const createNewChat = () => {
+    setActiveChatId(undefined) // Al ser undefined, el próximo mensaje creará la charla en el backend
     setInput('')
     setSelectedFields([])
-
+    // Opcional: podrías forzar el foco al textarea aquí con una ref
-    // Simular carga local para el feedback visual
-    setTimeout(() => setIsLoading(false), 1200)
   }
 
+  const PRESETS = [
+    {
+      id: 'mejorar-obj',
+      label: 'Mejorar objetivo',
+      icon: Target,
+      prompt: 'Mejora la redacción del objetivo...',
+    },
+    {
+      id: 'sugerir-cont',
+      label: 'Sugerir contenido',
+      icon: BookOpen,
+      prompt: 'Genera un desglose de temas...',
+    },
+    {
+      id: 'actividades',
+      label: 'Actividades',
+      icon: GraduationCap,
+      prompt: 'Sugiere actividades prácticas...',
+    },
+  ]
+
   return (
-    <div className="flex h-[calc(100vh-160px)] max-h-[calc(100vh-160px)] w-full gap-6 overflow-hidden p-4">
+    <div className="flex h-[calc(100vh-160px)] w-full gap-6 overflow-hidden p-4">
-      {/* PANEL DE CHAT PRINCIPAL */}
+      {/* PANEL IZQUIERDO */}
-      <div className="relative flex min-w-0 flex-[3] flex-col overflow-hidden rounded-xl border border-slate-200 bg-slate-50/50 shadow-sm">
+      <div className="flex w-64 flex-col border-r pr-4">
-        {/* Barra superior */}
+        <div className="mb-4 flex items-center justify-between px-2">
-        <div className="shrink-0 border-b bg-white p-3">
+          <h2 className="flex items-center gap-2 text-xs font-bold text-slate-500 uppercase">
-          <div className="flex flex-wrap items-center gap-2">
+            <History size={14} /> Historial
-            <span className="text-[10px] font-bold tracking-wider text-slate-400 uppercase">
+          </h2>
-              IA de Asignatura
+          <Button
-            </span>
+            variant="ghost"
-          </div>
+            size="icon"
+            className={cn(
+              'h-8 w-8',
+              showArchived && 'bg-teal-50 text-teal-600',
+            )}
+            onClick={() => setShowArchived(!showArchived)}
+          >
+            <Archive size={16} />
+          </Button>
+        </div>
+
+        <Button
+          onClick={() => {
+            // 1. Limpiamos el ID
+            setActiveChatId(undefined)
+            // 2. Marcamos que ya hubo una "interacción inicial" para que el useEffect no actúe
+            hasInitialSelected.current = true
+            // 3. Limpiamos estados visuales
+            setIsCreatingNewChat(true)
+            setInput('')
+            setSelectedFields([])
+
+            // 4. Opcional: Limpiar el caché de mensajes actual para que la pantalla se vea vacía al instante
+            queryClient.setQueryData(['subject-messages', undefined], [])
+          }}
+          variant="outline"
+          className="mb-4 w-full justify-start gap-2 border-dashed border-slate-300 hover:border-teal-500"
+        >
+          <MessageSquarePlus size={18} /> Nuevo Chat
+        </Button>
+
+        <ScrollArea className="flex-1">
+          <div className="space-y-1 pr-3">
+            {(showArchived ? archivedChats : activeChats).map((chat: any) => (
+              <div
+                key={chat.id}
+                onClick={() => {
+                  setActiveChatId(chat.id)
+                  setIsCreatingNewChat(false) // <--- Volvemos al modo normal
+                }}
+                className={cn(
+                  'group relative flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all',
+                  activeChatId === chat.id
+                    ? 'bg-teal-50 font-medium text-teal-900'
+                    : 'text-slate-600 hover:bg-slate-100',
+                )}
+              >
+                <FileText size={14} className="shrink-0 opacity-50" />
+                <span className="flex-1 truncate">
+                  {chat.titulo || 'Conversación'}
+                </span>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    updateStatus(
+                      {
+                        id: chat.id,
+                        estado: showArchived ? 'ACTIVA' : 'ARCHIVADA',
+                      },
+                      {
+                        onSuccess: () =>
+                          queryClient.invalidateQueries({
+                            queryKey: ['conversation-by-subject'],
+                          }),
+                      },
+                    )
+                  }}
+                  className="rounded p-1 opacity-0 group-hover:opacity-100 hover:bg-slate-200"
+                >
+                  <Archive size={12} />
+                </button>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </div>
+
+      {/* PANEL CENTRAL */}
+      <div className="relative flex min-w-0 flex-[3] flex-col overflow-hidden rounded-xl border border-slate-200 bg-slate-50/50 shadow-sm">
+        <div className="shrink-0 border-b bg-white p-3">
+          <span className="text-[10px] font-bold tracking-wider text-slate-400 uppercase">
+            Asistente IA
+          </span>
         </div>
 
-        {/* CONTENIDO DEL CHAT */}
         <div className="relative min-h-0 flex-1">
           <ScrollArea ref={scrollRef} className="h-full w-full">
             <div className="mx-auto max-w-3xl space-y-6 p-6">
-              {messages?.map((msg) => (
+              {messages.length === 0 && !isSending && (
+                <div className="flex h-full flex-col items-center justify-center space-y-4 text-center opacity-60">
+                  <div className="rounded-full bg-teal-100 p-4">
+                    <Sparkles size={32} className="text-teal-600" />
+                  </div>
+                  <div>
+                    <h3 className="font-bold text-slate-700">
+                      Nueva Consultoría IA
+                    </h3>
+                    <p className="max-w-[250px] text-xs text-slate-500">
+                      Selecciona campos con ":" o usa una acción rápida para
+                      comenzar.
+                    </p>
+                  </div>
+                </div>
+              )}
+              {messages.map((msg) => (
                 <div
                   key={msg.id}
                   className={`flex ${msg.role === 'user' ? 'flex-row-reverse' : 'flex-row'} items-start gap-3`}
@@ -247,12 +360,11 @@ export function IAAsignaturaTab({
                       {msg.content}
                     </div>
 
-                    {/* Renderizado de Sugerencias (Homologado con lógica de Asignatura) */}
                     {msg.sugerencia && !msg.sugerencia.aceptada && (
                       <div className="animate-in fade-in slide-in-from-top-1 mt-3 w-full">
                         <div className="rounded-xl border border-teal-100 bg-white p-4 shadow-md">
                           <p className="mb-2 text-[10px] font-bold text-slate-400 uppercase">
-                            Propuesta para: {msg.sugerencia.campoNombre}
+                            Propuesta: {msg.sugerencia.campoNombre}
                           </p>
                           <div className="mb-4 max-h-40 overflow-y-auto rounded-lg bg-slate-50 p-3 text-xs text-slate-600 italic">
                             {msg.sugerencia.valorSugerido}
@@ -260,10 +372,8 @@ export function IAAsignaturaTab({
                           <div className="flex gap-2">
                             <Button
                               size="sm"
-                              onClick={() =>
+                              onClick={() => onAcceptSuggestion(msg.sugerencia)}
-                                onAcceptSuggestion(msg.sugerencia!)
+                              className="h-8 bg-teal-600 hover:bg-teal-700"
-                              }
-                              className="h-8 bg-teal-600 text-xs hover:bg-teal-700"
                             >
                               <Check size={14} className="mr-1" /> Aplicar
                             </Button>
@@ -271,7 +381,7 @@ export function IAAsignaturaTab({
                               size="sm"
                               variant="outline"
                               onClick={() => onRejectSuggestion(msg.id)}
-                              className="h-8 text-xs"
+                              className="h-8"
                             >
                               <X size={14} className="mr-1" /> Descartar
                             </Button>
@@ -279,44 +389,36 @@ export function IAAsignaturaTab({
                         </div>
                       </div>
                     )}
-                    {msg.sugerencia?.aceptada && (
-                      <Badge className="mt-2 border-teal-200 bg-teal-100 text-teal-700 hover:bg-teal-100">
-                        <Check className="mr-1 h-3 w-3" /> Sugerencia aplicada
-                      </Badge>
-                    )}
                   </div>
                 </div>
               ))}
-              {isLoading && (
+              {isSending && (
-                <div className="flex gap-2 p-4">
+                <div className="flex animate-pulse gap-2 p-4">
-                  <div className="h-2 w-2 animate-bounce rounded-full bg-teal-400" />
+                  <div className="h-2 w-2 rounded-full bg-teal-400" />
-                  <div className="h-2 w-2 animate-bounce rounded-full bg-teal-400 [animation-delay:0.2s]" />
+                  <div className="h-2 w-2 rounded-full bg-teal-400" />
-                  <div className="h-2 w-2 animate-bounce rounded-full bg-teal-400 [animation-delay:0.4s]" />
+                  <div className="h-2 w-2 rounded-full bg-teal-400" />
                 </div>
               )}
             </div>
           </ScrollArea>
         </div>
 
-        {/* INPUT FIJO AL FONDO */}
+        {/* INPUT */}
         <div className="shrink-0 border-t bg-white p-4">
           <div className="relative mx-auto max-w-4xl">
-            {/* MENÚ DE SUGERENCIAS FLOTANTE */}
             {showSuggestions && (
               <div className="animate-in slide-in-from-bottom-2 absolute bottom-full z-50 mb-2 w-72 overflow-hidden rounded-xl border bg-white shadow-2xl">
-                <div className="border-b bg-slate-50 px-3 py-2 text-[10px] font-bold tracking-wider text-slate-500 uppercase">
+                <div className="border-b bg-slate-50 px-3 py-2 text-[10px] font-bold text-slate-500 uppercase">
-                  Seleccionar campo de asignatura
+                  Campos de Asignatura
                 </div>
                 <div className="max-h-64 overflow-y-auto p-1">
                   {availableFields.map((field) => (
                     <button
                       key={field.key}
                       onClick={() => toggleField(field)}
-                      className="group flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-teal-50"
+                      className="flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm transition-colors hover:bg-teal-50"
                     >
-                      <span className="text-slate-700 group-hover:text-teal-700">
+                      <span className="text-slate-700">{field.label}</span>
-                        {field.label}
-                      </span>
                       {selectedFields.find((f) => f.key === field.key) && (
                         <Check size={14} className="text-teal-600" />
                       )}
@@ -326,9 +428,7 @@ export function IAAsignaturaTab({
               </div>
             )}
 
-            {/* CONTENEDOR DEL INPUT */}
             <div className="flex flex-col gap-2 rounded-xl border bg-slate-50 p-2 transition-all focus-within:bg-white focus-within:ring-1 focus-within:ring-teal-500">
-              {/* Visualización de Tags */}
               {selectedFields.length > 0 && (
                 <div className="flex flex-wrap gap-2 px-2 pt-1">
                   {selectedFields.map((field) => (
@@ -336,10 +436,10 @@ export function IAAsignaturaTab({
                       key={field.key}
                       className="animate-in zoom-in-95 flex items-center gap-1 rounded-md border border-teal-200 bg-teal-100 px-2 py-0.5 text-[11px] font-semibold text-teal-800"
                     >
-                      <span className="opacity-70">Campo:</span> {field.label}
+                      {field.label}
                       <button
                         onClick={() => toggleField(field)}
-                        className="ml-1 rounded-full p-0.5 transition-colors hover:bg-teal-200"
+                        className="ml-1 rounded-full p-0.5 hover:bg-teal-200"
                       >
                         <X size={10} />
                       </button>
@@ -351,27 +451,28 @@ export function IAAsignaturaTab({
               <div className="flex items-end gap-2">
                 <Textarea
                   value={input}
-                  onChange={handleInputChange}
+                  onChange={(e) => {
+                    setInput(e.target.value)
+                    if (e.target.value.endsWith(':')) setShowSuggestions(true)
+                    else if (showSuggestions && !e.target.value.includes(':'))
+                      setShowSuggestions(false)
+                  }}
                   onKeyDown={(e) => {
                     if (e.key === 'Enter' && !e.shiftKey) {
                       e.preventDefault()
                       handleSend()
                     }
                   }}
-                  placeholder={
+                  placeholder='Escribe ":" para referenciar un campo...'
-                    selectedFields.length > 0
+                  className="max-h-[120px] min-h-[40px] flex-1 resize-none border-none bg-transparent text-sm shadow-none focus-visible:ring-0"
-                      ? 'Instrucciones para los campos seleccionados...'
-                      : 'Escribe tu solicitud o ":" para campos...'
-                  }
-                  className="max-h-[120px] min-h-[40px] flex-1 resize-none border-none bg-transparent py-2 text-sm shadow-none focus-visible:ring-0"
                 />
                 <Button
                   onClick={() => handleSend()}
                   disabled={
-                    (!input.trim() && selectedFields.length === 0) || isLoading
+                    (!input.trim() && selectedFields.length === 0) || isSending
                   }
                   size="icon"
-                  className="mb-1 h-9 w-9 shrink-0 bg-teal-600 hover:bg-teal-700"
+                  className="h-9 w-9 bg-teal-600 hover:bg-teal-700"
                 >
                   <Send size={16} className="text-white" />
                 </Button>
@@ -381,24 +482,22 @@ export function IAAsignaturaTab({
         </div>
       </div>
 
-      {/* PANEL LATERAL (ACCIONES RÁPIDAS) */}
+      {/* PANEL DERECHO ACCIONES */}
       <div className="flex flex-[1] flex-col gap-4 overflow-y-auto pr-2">
-        <h4 className="flex items-center gap-2 text-left text-sm font-bold text-slate-800">
+        <h4 className="flex items-center gap-2 text-sm font-bold text-slate-800">
-          <Lightbulb size={18} className="text-orange-500" /> Acciones rápidas
+          <Lightbulb size={18} className="text-orange-500" /> Atajos
         </h4>
         <div className="space-y-2">
           {PRESETS.map((preset) => (
             <button
               key={preset.id}
               onClick={() => handleSend(preset.prompt)}
-              className="group flex w-full items-center gap-3 rounded-xl border bg-white p-3 text-left text-sm shadow-sm transition-all hover:border-teal-500 hover:bg-teal-50"
+              className="group flex w-full items-center gap-3 rounded-xl border bg-white p-3 text-left text-sm transition-all hover:border-teal-500 hover:bg-teal-50"
             >
-              <div className="rounded-lg bg-slate-100 p-2 text-slate-500 group-hover:bg-teal-100 group-hover:text-teal-600">
+              <div className="rounded-lg bg-slate-100 p-2 group-hover:bg-teal-100 group-hover:text-teal-600">
                 <preset.icon size={16} />
               </div>
-              <span className="leading-tight font-medium text-slate-700">
+              <span className="font-medium text-slate-700">{preset.label}</span>
-                {preset.label}
-              </span>
             </button>
           ))}
         </div>

src/components/auth/ExternalLoginForm.tsx

@@ -1,44 +1,18 @@
-import { useQueryClient } from '@tanstack/react-query'
-import { useNavigate } from '@tanstack/react-router'
 import { useState } from 'react'
 
+// import { supabase } from '@/lib/supabase'
 import { LoginInput } from '../ui/LoginInput'
 import { SubmitButton } from '../ui/SubmitButton'
 
-import { throwIfError } from '@/data/api/_helpers'
-import { qk } from '@/data/query/keys'
-import { supabaseBrowser } from '@/data/supabase/client'
-
 export function ExternalLoginForm() {
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
-  const [error, setError] = useState<string | null>(null)
-  const [isLoading, setIsLoading] = useState(false)
-
-  const qc = useQueryClient()
-  const navigate = useNavigate({ from: '/login' })
-  const supabase = supabaseBrowser()
 
   const submit = async () => {
-    setIsLoading(true)
+    /* await supabase.auth.signInWithPassword({
-    setError(null)
+      email,
-
+      password,
-    try {
+    })*/
-      const { error } = await supabase.auth.signInWithPassword({
-        email,
-        password,
-      })
-      throwIfError(error)
-
-      qc.invalidateQueries({ queryKey: qk.session() })
-      qc.invalidateQueries({ queryKey: qk.auth })
-      await navigate({ to: '/dashboard', replace: true })
-    } catch (e: unknown) {
-      const anyErr = e as any
-      setError(anyErr?.message ?? 'No se pudo iniciar sesión')
-    } finally {
-      setIsLoading(false)
-    }
   }
 
   return (
@@ -60,11 +34,7 @@ export function ExternalLoginForm() {
         value={password}
         onChange={setPassword}
       />
-      {error ? <p className="text-sm text-red-600">{error}</p> : null}
+      <SubmitButton />
-      <SubmitButton
-        text={isLoading ? 'Iniciando…' : 'Iniciar sesión'}
-        disabled={isLoading}
-      />
     </form>
   )
 }

src/components/auth/InternalLoginForm.tsx

@@ -1,45 +1,18 @@
-import { useQueryClient } from '@tanstack/react-query'
-import { useNavigate } from '@tanstack/react-router'
 import { useState } from 'react'
 
+// import { supabase } from '@/lib/supabase'
 import { LoginInput } from '../ui/LoginInput'
 import { SubmitButton } from '../ui/SubmitButton'
 
-import { throwIfError } from '@/data/api/_helpers'
-import { qk } from '@/data/query/keys'
-import { supabaseBrowser } from '@/data/supabase/client'
-
 export function InternalLoginForm() {
   const [clave, setClave] = useState('')
   const [password, setPassword] = useState('')
-  const [error, setError] = useState<string | null>(null)
-  const [isLoading, setIsLoading] = useState(false)
-
-  const qc = useQueryClient()
-  const navigate = useNavigate({ from: '/login' })
-  const supabase = supabaseBrowser()
 
   const submit = async () => {
-    setIsLoading(true)
+    /* await supabase.auth.signInWithPassword({
-    setError(null)
+      email: `${clave}@ulsa.mx`,
-
+      password,
-    try {
+    })*/
-      const email = clave.includes('@') ? clave : `${clave}@ulsa.mx`
-      const { error } = await supabase.auth.signInWithPassword({
-        email,
-        password,
-      })
-      throwIfError(error)
-
-      qc.invalidateQueries({ queryKey: qk.session() })
-      qc.invalidateQueries({ queryKey: qk.auth })
-      await navigate({ to: '/dashboard', replace: true })
-    } catch (e: unknown) {
-      const anyErr = e as any
-      setError(anyErr?.message ?? 'No se pudo iniciar sesión')
-    } finally {
-      setIsLoading(false)
-    }
   }
 
   return (
@@ -57,11 +30,7 @@ export function InternalLoginForm() {
         value={password}
         onChange={setPassword}
       />
-      {error ? <p className="text-sm text-red-600">{error}</p> : null}
+      <SubmitButton />
-      <SubmitButton
-        text={isLoading ? 'Iniciando…' : 'Iniciar sesión'}
-        disabled={isLoading}
-      />
     </form>
   )
 }

src/components/planes/detalle/Ia/ImprovementCard.tsx

@@ -8,6 +8,7 @@ export const ImprovementCard = ({
   suggestions,
   onApply,
   planId,
+  dbMessageId,
   currentDatos,
   activeChatId,
   onApplySuccess,
@@ -16,6 +17,7 @@ export const ImprovementCard = ({
   onApply?: (key: string, value: string) => void
   planId: string
   currentDatos: any
+  dbMessageId: string
   activeChatId: any
   onApplySuccess?: (key: string) => void
 }) => {
@@ -53,9 +55,11 @@ export const ImprovementCard = ({
           setLocalApplied((prev) => [...prev, key])
 
           if (onApplySuccess) onApplySuccess(key)
-          if (activeChatId) {
+
+          // --- CAMBIO AQUÍ: Ahora enviamos el ID del mensaje ---
+          if (dbMessageId) {
             updateAppliedStatus.mutate({
-              conversacionId: activeChatId,
+              conversacionId: dbMessageId, // Cambiamos el nombre de la propiedad si es necesario
               campoAfectado: key,
             })
           }

src/components/ui/SubmitButton.tsx

@@ -1,14 +1,13 @@
 interface Props {
   text?: string
-  disabled?: boolean
 }
 
-export function SubmitButton({ text = 'Iniciar sesión', disabled }: Props) {
+export function SubmitButton({ text = 'Iniciar sesión' }: Props) {
   return (
     <button
       type="submit"
-      disabled={disabled}
+      className="w-full bg-[#7b0f1d] text-white py-2 rounded-lg
-      className="w-full rounded-lg bg-[#7b0f1d] py-2 font-semibold text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
+                 font-semibold hover:opacity-90 transition"
     >
       {text}
     </button>

src/data/api/ai.api.ts

@@ -100,7 +100,7 @@ export async function library_search(payload: {
 export async function create_conversation(planId: string) {
   const supabase = supabaseBrowser()
   const { data, error } = await supabase.functions.invoke(
-    'create-chat-conversation/conversations',
+    'create-chat-conversation/plan/conversations',
     {
       method: 'POST',
       body: {
@@ -149,7 +149,7 @@ export async function ai_plan_chat_v2(payload: {
 }): Promise<{ reply: string; meta?: any }> {
   const supabase = supabaseBrowser()
   const { data, error } = await supabase.functions.invoke(
-    `create-chat-conversation/conversations/${payload.conversacionId}/messages`,
+    `create-chat-conversation/conversations/plan/${payload.conversacionId}/messages`,
     {
       method: 'POST',
       body: {
@@ -175,6 +175,22 @@ export async function getConversationByPlan(planId: string) {
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   return data ?? []
 }
+export async function getMessagesByConversation(conversationId: string) {
+  const supabase = supabaseBrowser()
+
+  const { data, error } = await supabase
+    .from('plan_mensajes_ia')
+    .select('*')
+    .eq('conversacion_plan_id', conversationId)
+    .order('fecha_creacion', { ascending: true }) // Ascendente para que el chat fluya en orden cronológico
+
+  if (error) {
+    console.error('Error al obtener mensajes:', error.message)
+    throw error
+  }
+
+  return data ?? []
+}
 
 export async function update_conversation_title(
   conversacionId: string,
@@ -194,45 +210,152 @@ export async function update_conversation_title(
 }
 
 export async function update_recommendation_applied_status(
-  conversacionId: string,
+  mensajeId: string, // Ahora es más eficiente usar el ID del mensaje directamente
   campoAfectado: string,
 ) {
   const supabase = supabaseBrowser()
 
-  // 1. Obtener el estado actual del JSON
+  // 1. Obtener la propuesta actual de ese mensaje específico
-  const { data: conv, error: fetchError } = await supabase
+  const { data: msgData, error: fetchError } = await supabase
-    .from('conversaciones_plan')
+    .from('plan_mensajes_ia')
-    .select('conversacion_json')
+    .select('propuesta')
-    .eq('id', conversacionId)
+    .eq('id', mensajeId)
     .single()
 
   if (fetchError) throw fetchError
-  if (!conv.conversacion_json) throw new Error('No se encontró la conversación')
+  if (!msgData?.propuesta)
+    throw new Error('No se encontró la propuesta en el mensaje')
 
-  // 2. Transformar el JSON para marcar como aplicada la recomendación específica
+  const propuestaActual = msgData.propuesta as any
-  // Usamos una transformación inmutable para evitar efectos secundarios
-  const nuevoJson = (conv.conversacion_json as Array<any>).map((msg) => {
-    if (msg.user === 'assistant' && Array.isArray(msg.recommendations)) {
-      return {
-        ...msg,
-        recommendations: msg.recommendations.map((rec: any) =>
-          rec.campo_afectado === campoAfectado
-            ? { ...rec, aplicada: true }
-            : rec,
-        ),
-      }
-    }
-    return msg
-  })
 
-  // 3. Actualizar la base de datos con el nuevo JSON
+  // 2. Modificar el array de recommendations dentro de la propuesta
-  const { data, error: updateError } = await supabase
+  // Mantenemos el resto de la propuesta (prompt, respuesta, etc.) intacto
-    .from('conversaciones_plan')
+  const nuevaPropuesta = {
-    .update({ conversacion_json: nuevoJson })
+    ...propuestaActual,
+    recommendations: (propuestaActual.recommendations || []).map((rec: any) =>
+      rec.campo_afectado === campoAfectado ? { ...rec, aplicada: true } : rec,
+    ),
+  }
+
+  // 3. Actualizar la base de datos con el nuevo objeto JSON
+  const { error: updateError } = await supabase
+    .from('plan_mensajes_ia')
+    .update({ propuesta: nuevaPropuesta })
+    .eq('id', mensajeId)
+
+  if (updateError) throw updateError
+
+  return true
+}
+
+// --- FUNCIONES DE ASIGNATURA ---
+
+export async function create_subject_conversation(subjectId: string) {
+  const supabase = supabaseBrowser()
+  const { data, error } = await supabase.functions.invoke(
+    'create-chat-conversation/asignatura/conversations', // Ruta corregida
+    {
+      method: 'POST',
+      body: {
+        asignatura_id: subjectId,
+        instanciador: 'alex',
+      },
+    },
+  )
+  if (error) throw error
+  return data // Retorna { conversation_asignatura: { id, ... } }
+}
+
+export async function ai_subject_chat_v2(payload: {
+  conversacionId: string
+  content: string
+  campos?: Array<string>
+}) {
+  const supabase = supabaseBrowser()
+  const { data, error } = await supabase.functions.invoke(
+    `create-chat-conversation/conversations/asignatura/${payload.conversacionId}/messages`, // Ruta corregida
+    {
+      method: 'POST',
+      body: {
+        content: payload.content,
+        campos: payload.campos || [],
+      },
+    },
+  )
+  if (error) throw error
+  return data
+}
+
+export async function getConversationBySubject(subjectId: string) {
+  const supabase = supabaseBrowser()
+  const { data, error } = await supabase
+    .from('conversaciones_asignatura') // Tabla corregida
+    .select('*')
+    .eq('asignatura_id', subjectId)
+    .order('creado_en', { ascending: false })
+
+  if (error) throw error
+  return data ?? []
+}
+
+export async function getMessagesBySubjectConversation(conversationId: string) {
+  const supabase = supabaseBrowser()
+  const { data, error } = await supabase
+    .from('asignatura_mensajes_ia') // Tabla corregida
+    .select('*')
+    .eq('conversacion_asignatura_id', conversationId)
+    .order('fecha_creacion', { ascending: true })
+
+  if (error) throw error
+  return data ?? []
+}
+
+export async function update_subject_recommendation_applied(
+  mensajeId: string,
+  campoAfectado: string,
+) {
+  const supabase = supabaseBrowser()
+
+  // 1. Obtener propuesta actual
+  const { data: msgData, error: fetchError } = await supabase
+    .from('asignatura_mensajes_ia')
+    .select('propuesta')
+    .eq('id', mensajeId)
+    .single()
+
+  if (fetchError) throw fetchError
+  const propuestaActual = msgData?.propuesta as any
+
+  // 2. Marcar como aplicada
+  const nuevaPropuesta = {
+    ...propuestaActual,
+    recommendations: (propuestaActual.recommendations || []).map((rec: any) =>
+      rec.campo_afectado === campoAfectado ? { ...rec, aplicada: true } : rec,
+    ),
+  }
+
+  // 3. Update
+  const { error: updateError } = await supabase
+    .from('asignatura_mensajes_ia')
+    .update({ propuesta: nuevaPropuesta })
+    .eq('id', mensajeId)
+
+  if (updateError) throw updateError
+  return true
+}
+
+export async function update_subject_conversation_status(
+  conversacionId: string,
+  nuevoEstado: 'ARCHIVADA' | 'ACTIVA',
+) {
+  const supabase = supabaseBrowser()
+  const { data, error } = await supabase
+    .from('conversaciones_asignatura')
+    .update({ estado: nuevoEstado })
     .eq('id', conversacionId)
     .select()
     .single()
 
-  if (updateError) throw updateError
+  if (error) throw error
   return data
 }

src/data/api/document.api.ts

@@ -3,9 +3,15 @@
 const DOCUMENT_PDF_URL =
   'https://n8n.app.lci.ulsa.mx/webhook/62ca84ec-0adb-4006-aba1-32282d27d434'
 
+const DOCUMENT_PDF_ASIGNATURA_URL =
+  'https://n8n.app.lci.ulsa.mx/webhook/041a68be-7568-46d0-bc08-09ded12d017d'
+
 interface GeneratePdfParams {
   plan_estudio_id: string
 }
+interface GeneratePdfParamsAsignatura {
+  asignatura_id: string
+}
 
 export async function fetchPlanPdf({
   plan_estudio_id,
@@ -25,3 +31,22 @@ export async function fetchPlanPdf({
   // n8n devuelve el archivo → lo tratamos como blob
   return await response.blob()
 }
+
+export async function fetchAsignaturaPdf({
+  asignatura_id,
+}: GeneratePdfParamsAsignatura): Promise<Blob> {
+  const response = await fetch(DOCUMENT_PDF_ASIGNATURA_URL, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ asignatura_id }),
+  })
+
+  if (!response.ok) {
+    throw new Error('Error al generar el PDF')
+  }
+
+  // n8n devuelve el archivo → lo tratamos como blob
+  return await response.blob()
+}

src/data/api/subjects.api.ts

@@ -117,7 +117,7 @@ export async function subjects_get(subjectId: UUID): Promise<AsignaturaDetail> {
         id,carrera_id,estructura_id,nombre,nivel,tipo_ciclo,numero_ciclos,datos,estado_actual_id,activo,tipo_origen,meta_origen,creado_por,actualizado_por,creado_en,actualizado_en,
         carreras(id,facultad_id,nombre,nombre_corto,clave_sep,activa, facultades(id,nombre,nombre_corto,color,icono))
       ),
-      estructuras_asignatura(id,nombre,version,definicion)
+      estructuras_asignatura(id,nombre,definicion)
     `,
     )
     .eq('id', subjectId)

src/data/hooks/useAI.ts

@@ -1,9 +1,9 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useEffect } from 'react'
 
 import {
   ai_plan_chat_v2,
   ai_plan_improve,
-  ai_subject_chat,
   ai_subject_improve,
   create_conversation,
   get_chat_history,
@@ -12,10 +12,17 @@ import {
   update_conversation_status,
   update_recommendation_applied_status,
   update_conversation_title,
+  getMessagesByConversation,
+  update_subject_conversation_status,
+  update_subject_recommendation_applied,
+  getMessagesBySubjectConversation,
+  getConversationBySubject,
+  ai_subject_chat_v2,
+  create_subject_conversation,
 } from '../api/ai.api'
+import { supabaseBrowser } from '../supabase/client'
 
-// eslint-disable-next-line node/prefer-node-protocol
+import type { UUID } from 'node:crypto'
-import type { UUID } from 'crypto'
 
 export function useAIPlanImprove() {
   return useMutation({ mutationFn: ai_plan_improve })
@@ -88,6 +95,61 @@ export function useConversationByPlan(planId: string | null) {
   })
 }
 
+export function useMessagesByChat(conversationId: string | null) {
+  const queryClient = useQueryClient()
+  const supabase = supabaseBrowser()
+
+  const query = useQuery({
+    queryKey: ['conversation-messages', conversationId],
+    queryFn: () => {
+      if (!conversationId) throw new Error('Conversation ID is required')
+      return getMessagesByConversation(conversationId)
+    },
+    enabled: !!conversationId,
+    placeholderData: (previousData) => previousData,
+  })
+
+  useEffect(() => {
+    if (!conversationId) return
+
+    // Suscribirse a cambios en los mensajes de ESTA conversación
+    const channel = supabase
+      .channel(`realtime-messages-${conversationId}`)
+      .on(
+        'postgres_changes',
+        {
+          event: '*', // Escuchamos INSERT y UPDATE
+          schema: 'public',
+          table: 'plan_mensajes_ia',
+          filter: `conversacion_plan_id=eq.${conversationId}`,
+        },
+        (payload) => {
+          // Opción A: Invalidar la query para que React Query haga refetch (más seguro)
+          queryClient.invalidateQueries({
+            queryKey: ['conversation-messages', conversationId],
+          })
+
+          /* Opción B: Actualización manual del caché (más rápido/fluido)
+             if (payload.eventType === 'INSERT') {
+               queryClient.setQueryData(['conversation-messages', conversationId], (old: any) => [...old, payload.new])
+             } else if (payload.eventType === 'UPDATE') {
+               queryClient.setQueryData(['conversation-messages', conversationId], (old: any) => 
+                 old.map((m: any) => m.id === payload.new.id ? payload.new : m)
+               )
+             }
+          */
+        },
+      )
+      .subscribe()
+
+    return () => {
+      supabase.removeChannel(channel)
+    }
+  }, [conversationId, queryClient, supabase])
+
+  return query
+}
+
 export function useUpdateRecommendationApplied() {
   const qc = useQueryClient()
 
@@ -117,10 +179,6 @@ export function useAISubjectImprove() {
   return useMutation({ mutationFn: ai_subject_improve })
 }
 
-export function useAISubjectChat() {
-  return useMutation({ mutationFn: ai_subject_chat })
-}
-
 export function useLibrarySearch() {
   return useMutation({ mutationFn: library_search })
 }
@@ -137,3 +195,89 @@ export function useUpdateConversationTitle() {
     },
   })
 }
+
+// Asignaturas
+
+export function useAISubjectChat() {
+  const qc = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (payload: {
+      subjectId: UUID
+      content: string
+      campos?: Array<string>
+      conversacionId?: string
+    }) => {
+      let currentId = payload.conversacionId
+
+      // 1. Si no hay ID, creamos la conversación de asignatura
+      if (!currentId) {
+        const response = await create_subject_conversation(payload.subjectId)
+        currentId = response.conversation_asignatura.id
+      }
+
+      // 2. Enviamos mensaje al endpoint de asignatura
+      const result = await ai_subject_chat_v2({
+        conversacionId: currentId!,
+        content: payload.content,
+        campos: payload.campos,
+      })
+
+      return { ...result, conversacionId: currentId }
+    },
+    onSuccess: (data) => {
+      // Invalidamos mensajes para que se refresque el chat
+      qc.invalidateQueries({
+        queryKey: ['subject-messages', data.conversacionId],
+      })
+    },
+  })
+}
+
+export function useConversationBySubject(subjectId: string | null) {
+  return useQuery({
+    queryKey: ['conversation-by-subject', subjectId],
+    queryFn: () => getConversationBySubject(subjectId!),
+    enabled: !!subjectId,
+  })
+}
+
+export function useMessagesBySubjectChat(conversationId: string | null) {
+  return useQuery({
+    queryKey: ['subject-messages', conversationId],
+    queryFn: () => {
+      if (!conversationId) throw new Error('Conversation ID is required')
+      return getMessagesBySubjectConversation(conversationId)
+    },
+    enabled: !!conversationId,
+    placeholderData: (previousData) => previousData,
+  })
+}
+
+export function useUpdateSubjectRecommendation() {
+  const qc = useQueryClient()
+
+  return useMutation({
+    mutationFn: (payload: { mensajeId: string; campoAfectado: string }) =>
+      update_subject_recommendation_applied(
+        payload.mensajeId,
+        payload.campoAfectado,
+      ),
+    onSuccess: () => {
+      // Refrescamos los mensajes para ver el check de "aplicado"
+      qc.invalidateQueries({ queryKey: ['subject-messages'] })
+    },
+  })
+}
+
+export function useUpdateSubjectConversationStatus() {
+  const qc = useQueryClient()
+
+  return useMutation({
+    mutationFn: (payload: { id: string; estado: 'ARCHIVADA' | 'ACTIVA' }) =>
+      update_subject_conversation_status(payload.id, payload.estado),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['conversation-by-subject'] })
+    },
+  })
+}

src/data/hooks/useAuth.ts

@@ -1,145 +1,59 @@
-import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useEffect } from "react";
-import { useEffect } from 'react'
+import { useQuery, useQueryClient } from "@tanstack/react-query";
-
+import { supabaseBrowser } from "../supabase/client";
-import { throwIfError } from '../api/_helpers'
+import { qk } from "../query/keys";
-import { qk } from '../query/keys'
+import { throwIfError } from "../api/_helpers";
-import { supabaseBrowser } from '../supabase/client'
 
 export function useSession() {
-  const supabase = supabaseBrowser()
+  const supabase = supabaseBrowser();
-  const qc = useQueryClient()
+  const qc = useQueryClient();
 
   const query = useQuery({
     queryKey: qk.session(),
     queryFn: async () => {
-      const { data, error } = await supabase.auth.getSession()
+      const { data, error } = await supabase.auth.getSession();
-      throwIfError(error)
+      throwIfError(error);
-      return data.session ?? null
+      return data.session ?? null;
     },
     staleTime: Infinity,
-  })
+  });
 
   useEffect(() => {
     const { data } = supabase.auth.onAuthStateChange(() => {
-      qc.invalidateQueries({ queryKey: qk.session() })
+      qc.invalidateQueries({ queryKey: qk.session() });
-      qc.invalidateQueries({ queryKey: qk.meProfile() })
+      qc.invalidateQueries({ queryKey: qk.meProfile() });
-      qc.invalidateQueries({ queryKey: qk.meAccess() })
+      qc.invalidateQueries({ queryKey: qk.auth });
-      qc.invalidateQueries({ queryKey: qk.auth })
+    });
-    })
 
-    return () => data.subscription.unsubscribe()
+    return () => data.subscription.unsubscribe();
-  }, [supabase, qc])
+  }, [supabase, qc]);
 
-  return query
+  return query;
 }
 
 export function useMeProfile() {
-  const supabase = supabaseBrowser()
+  const supabase = supabaseBrowser();
 
   return useQuery({
     queryKey: qk.meProfile(),
     queryFn: async () => {
-      const { data: u, error: uErr } = await supabase.auth.getUser()
+      const { data: u, error: uErr } = await supabase.auth.getUser();
-      throwIfError(uErr)
+      throwIfError(uErr);
-      const userId = u.user?.id
+      const userId = u.user?.id;
-      if (!userId) return null
+      if (!userId) return null;
 
       const { data, error } = await supabase
-        .from('usuarios_app')
+        .from("usuarios_app")
-        .select('id,nombre_completo,email,externo,creado_en,actualizado_en')
+        .select("id,nombre_completo,email,externo,creado_en,actualizado_en")
-        .eq('id', userId)
+        .eq("id", userId)
-        .single()
+        .single();
 
       // si aún no existe perfil en usuarios_app, permite null (tu seed/trigger puede crearlo)
-      if (error && (error as any).code === 'PGRST116') return null
+      if (error && (error as any).code === "PGRST116") return null;
 
-      throwIfError(error)
+      throwIfError(error);
-      return data ?? null
+      return data ?? null;
     },
     staleTime: 60_000,
-  })
+  });
-}
-
-export type MeAccessRole = {
-  assignmentId: string
-  rolId: string
-  clave: string
-  nombre: string
-  descripcion: string | null
-  facultadId: string | null
-  carreraId: string | null
-}
-
-export type MeAccess = {
-  userId: string
-  roles: Array<MeAccessRole>
-  permissions: Array<string>
-}
-
-/**
- * Database-first RBAC: obtiene roles del usuario desde tablas app (NO desde JWT).
- *
- * Nota: el esquema actual modela roles con `usuarios_roles` -> `roles`.
- */
-export function useMeAccess() {
-  const supabase = supabaseBrowser()
-
-  return useQuery({
-    queryKey: qk.meAccess(),
-    queryFn: async (): Promise<MeAccess | null> => {
-      const { data: u, error: uErr } = await supabase.auth.getUser()
-      throwIfError(uErr)
-      const userId = u.user?.id
-      if (!userId) return null
-
-      const { data, error } = await supabase
-        .from('usuarios_roles')
-        .select(
-          'id,rol_id,facultad_id,carrera_id,roles(id,clave,nombre,descripcion)',
-        )
-        .eq('usuario_id', userId)
-
-      throwIfError(error)
-
-      const roles: Array<MeAccessRole> = (data ?? [])
-        .map((row: any) => {
-          const rol = row.roles
-          if (!rol) return null
-          return {
-            assignmentId: row.id,
-            rolId: rol.id,
-            clave: rol.clave,
-            nombre: rol.nombre,
-            descripcion: rol.descripcion ?? null,
-            facultadId: row.facultad_id ?? null,
-            carreraId: row.carrera_id ?? null,
-          } satisfies MeAccessRole
-        })
-        .filter(Boolean) as Array<MeAccessRole>
-
-      // Por ahora, los permisos granulares se derivan de claves de rol.
-      // Si luego existe una tabla `roles_permisos`, aquí se expande a permisos reales.
-      const permissions = Array.from(new Set(roles.map((r) => r.clave)))
-
-      return {
-        userId,
-        roles,
-        permissions,
-      }
-    },
-    staleTime: 30_000,
-    refetchOnWindowFocus: true,
-  })
-}
-
-export function useAuth() {
-  const session = useSession()
-  const meProfile = useMeProfile()
-  const meAccess = useMeAccess()
-
-  return {
-    session,
-    meProfile,
-    meAccess,
-  }
 }

src/data/query/keys.ts

@@ -2,7 +2,6 @@ export const qk = {
   auth: ['auth'] as const,
   session: () => ['auth', 'session'] as const,
   meProfile: () => ['auth', 'meProfile'] as const,
-  meAccess: () => ['auth', 'meAccess'] as const,
 
   facultades: () => ['meta', 'facultades'] as const,
   carreras: (facultadId?: string | null) =>

src/data/query/queryClient.tsx

@@ -1,57 +1,20 @@
-import {
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-  MutationCache,
-  QueryCache,
-  QueryClient,
-  QueryClientProvider,
-} from '@tanstack/react-query'
-
-import { qk } from './keys'
-
-import type React from 'react'
-
-function isRlsViolationError(error: unknown): boolean {
-  const anyErr = error as any
-  const code = anyErr?.code
-  const status = anyErr?.status ?? anyErr?.response?.status
-  console.log('Checking RLS violation error:', { code, status })
-  // Supabase/PostgREST suele devolver 403 (Forbidden) o código PG 42501 (insufficient_privilege)
-  return status === 403 || code === '42501'
-}
 
 export function getContext() {
-  const queryClientRef: { current: QueryClient | null } = { current: null }
+  const queryClient = new QueryClient(
-
+    {
-  const handleAuthzDesync = (error: unknown) => {
+  defaultOptions: {
-    if (!isRlsViolationError(error)) return
+    queries: {
-    // Forzar resincronización “database-first” del rol/permisos
+      staleTime: 30_000,
-    console.log('RLS violation detected, invalidating queries...')
+      refetchOnWindowFocus: false,
-    queryClientRef.current?.invalidateQueries({ queryKey: qk.meAccess() })
+      retry: (failureCount) => failureCount < 2,
-  }
-
-  const queryClient = new QueryClient({
-    queryCache: new QueryCache({
-      onError: (error) => {
-        handleAuthzDesync(error)
-      },
-    }),
-    mutationCache: new MutationCache({
-      onError: (error) => {
-        handleAuthzDesync(error)
-      },
-    }),
-    defaultOptions: {
-      queries: {
-        staleTime: 30_000,
-        refetchOnWindowFocus: false,
-        retry: (failureCount) => failureCount < 2,
-      },
-      mutations: {
-        retry: 0,
-      },
     },
-  })
+    mutations: {
-
+      retry: 0,
-  queryClientRef.current = queryClient
+    },
+  },
+}
+  )
   return {
     queryClient,
   }

src/main.tsx

@@ -6,7 +6,6 @@ import reportWebVitals from './reportWebVitals.ts'
 import { routeTree } from './routeTree.gen'
 
 import * as TanStackQueryProvider from '@/data/query/queryClient.tsx'
-import { supabaseBrowser } from '@/data/supabase/client'
 
 import './styles.css'
 
@@ -17,7 +16,6 @@ const router = createRouter({
   routeTree,
   context: {
     ...TanStackQueryProviderContext,
-    supabase: supabaseBrowser(),
   },
   defaultPreload: 'intent',
   scrollRestoration: true,

src/routes/__root.tsx

@@ -1,59 +1,22 @@
 import { TanStackDevtools } from '@tanstack/react-devtools'
-import {
+import { Outlet, createRootRouteWithContext } from '@tanstack/react-router'
-  Outlet,
-  createRootRouteWithContext,
-  redirect,
-  useNavigate,
-  useRouterState,
-} from '@tanstack/react-router'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
-import { useEffect } from 'react'
 
 import Header from '../components/Header'
 import TanStackQueryDevtools from '../integrations/tanstack-query/devtools'
 
-import type { Database } from '@/types/supabase'
-import type { SupabaseClient } from '@supabase/supabase-js'
 import type { QueryClient } from '@tanstack/react-query'
 
 import { NotFoundPage } from '@/components/ui/NotFoundPage'
-import { throwIfError } from '@/data/api/_helpers'
-import { useSession } from '@/data/hooks/useAuth'
-import { qk } from '@/data/query/keys'
 
 interface MyRouterContext {
   queryClient: QueryClient
-  supabase: SupabaseClient<Database>
 }
 
 export const Route = createRootRouteWithContext<MyRouterContext>()({
-  beforeLoad: async ({ context, location }) => {
-    const pathname = location.pathname
-    const isLogin = pathname === '/login'
-    const isIndex = pathname === '/'
-
-    const session = await context.queryClient.ensureQueryData({
-      queryKey: qk.session(),
-      queryFn: async () => {
-        const { data, error } = await context.supabase.auth.getSession()
-        throwIfError(error)
-        return data.session ?? null
-      },
-      staleTime: Infinity,
-    })
-
-    if (!session && !isLogin) {
-      throw redirect({ to: '/login' })
-    }
-    if (session && (isLogin || isIndex)) {
-      throw redirect({ to: '/dashboard' })
-    }
-  },
-
   component: () => (
     <>
-      <AuthSync />
+      <Header />
-      <MaybeHeader />
       <Outlet />
       <TanStackDevtools
         config={{
@@ -97,40 +60,3 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
     )
   },
 })
-
-function MaybeHeader() {
-  const pathname = useRouterState({
-    select: (s) => s.location.pathname,
-  })
-
-  if (pathname === '/login') return null
-  return <Header />
-}
-
-function AuthSync() {
-  const { data: session, isLoading } = useSession()
-  // Mantiene roles/permisos sincronizados con la BD (database-first)
-  // useMeAccess()
-
-  const navigate = useNavigate()
-  const pathname = useRouterState({
-    select: (s) => s.location.pathname,
-  })
-
-  // Reaccionar a cambios de sesión (login/logout) sin depender solo de beforeLoad.
-  // Nota: beforeLoad sigue siendo la línea de defensa en navegación/refresh.
-  useEffect(() => {
-    if (isLoading) return
-
-    if (!session && pathname !== '/login') {
-      void navigate({ to: '/login', replace: true })
-      return
-    }
-
-    if (session && pathname === '/login') {
-      void navigate({ to: '/dashboard', replace: true })
-    }
-  }, [isLoading, session, pathname, navigate])
-
-  return null
-}

src/routes/planes/$planId/_detalle/iaplan.tsx

@@ -29,6 +29,7 @@ import { Textarea } from '@/components/ui/textarea'
 import {
   useAIPlanChat,
   useConversationByPlan,
+  useMessagesByChat,
   useUpdateConversationStatus,
   useUpdateConversationTitle,
 } from '@/data'
@@ -97,12 +98,14 @@ function RouteComponent() {
   const [openIA, setOpenIA] = useState(false)
   const { mutateAsync: sendChat, isPending: isLoading } = useAIPlanChat()
   const { mutate: updateStatusMutation } = useUpdateConversationStatus()
-
+  const [isSyncing, setIsSyncing] = useState(false)
   const [activeChatId, setActiveChatId] = useState<string | undefined>(
     undefined,
   )
   const { data: lastConversation, isLoading: isLoadingConv } =
     useConversationByPlan(planId)
+  const { data: mensajesDelChat, isLoading: isLoadingMessages } =
+    useMessagesByChat(activeChatId ?? null) // Si es undefined, pasa null
   const [selectedArchivoIds, setSelectedArchivoIds] = useState<Array<string>>(
     [],
   )
@@ -149,58 +152,51 @@ function RouteComponent() {
     )
   }, [availableFields, filterQuery, selectedFields])
 
-  const activeChatData = useMemo(() => {
-    return lastConversation?.find((chat: any) => chat.id === activeChatId)
-  }, [lastConversation, activeChatId])
-
   const chatMessages = useMemo(() => {
-    // 1. Si no hay ID o no hay data del chat, retornamos vacío
+    if (!activeChatId || !mensajesDelChat) return []
-    if (!activeChatId || !activeChatData) return []
 
-    const json = (activeChatData.conversacion_json ||
+    // flatMap nos permite devolver 2 elementos (pregunta y respuesta) por cada registro de la BD
-      []) as unknown as Array<ChatMessageJSON>
+    return mensajesDelChat.flatMap((msg: any) => {
+      const messages = []
 
-    // 2. Verificamos que 'json' sea realmente un array antes de mapear
+      // 1. Mensaje del Usuario
-    if (!Array.isArray(json)) return []
+      messages.push({
+        id: `${msg.id}-user`,
+        role: 'user',
+        content: msg.mensaje,
+        selectedFields: msg.campos || [], // Aquí están tus campos
+      })
 
-    return json.map((msg, index: number) => {
+      // 2. Mensaje del Asistente (si hay respuesta)
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (msg.respuesta) {
-      if (!msg?.user) {
+        // Extraemos las recomendaciones de la nueva estructura: msg.propuesta.recommendations
-        return {
+        const rawRecommendations = msg.propuesta?.recommendations || []
-          id: `err-${index}`,
+
+        messages.push({
+          id: `${msg.id}-ai`,
+          dbMessageId: msg.id,
           role: 'assistant',
-          content: '',
+          content: msg.respuesta,
-          suggestions: [],
+          isRefusal: msg.is_refusal,
-        }
+          suggestions: rawRecommendations.map((rec: any) => {
+            const fieldConfig = availableFields.find(
+              (f) => f.key === rec.campo_afectado,
+            )
+            return {
+              key: rec.campo_afectado,
+              label: fieldConfig
+                ? fieldConfig.label
+                : rec.campo_afectado.replace(/_/g, ' '),
+              newValue: rec.texto_mejora,
+              applied: rec.aplicada,
+            }
+          }),
+        })
       }
 
-      const isAssistant = msg.user === 'assistant'
+      return messages
-
-      return {
-        id: `${activeChatId}-${index}`,
-        role: isAssistant ? 'assistant' : 'user',
-        content: isAssistant ? msg.message || '' : msg.prompt || '', // Agregamos fallback a string vacío
-        isRefusal: isAssistant && msg.refusal === true,
-        suggestions:
-          isAssistant && msg.recommendations
-            ? msg.recommendations.map((rec) => {
-                const fieldConfig = availableFields.find(
-                  (f) => f.key === rec.campo_afectado,
-                )
-                return {
-                  key: rec.campo_afectado,
-                  label: fieldConfig
-                    ? fieldConfig.label
-                    : rec.campo_afectado.replace(/_/g, ' '),
-                  newValue: rec.texto_mejora,
-                  applied: rec.aplicada,
-                }
-              })
-            : [],
-      }
     })
-  }, [activeChatData, activeChatId, availableFields])
+  }, [mensajesDelChat, activeChatId, availableFields])
-
   const scrollToBottom = () => {
     if (scrollRef.current) {
       // Buscamos el viewport interno del ScrollArea de Radix
@@ -226,6 +222,8 @@ function RouteComponent() {
   }, [lastConversation])
 
   useEffect(() => {
+    console.log(mensajesDelChat)
+
     scrollToBottom()
   }, [chatMessages, isLoading])
 
@@ -242,30 +240,39 @@ function RouteComponent() {
   }, [input, selectedFields])
 
   useEffect(() => {
-    if (isLoadingConv || !lastConversation) return
+    if (isLoadingConv || isSending) return
 
-    const isChatStillActive = activeChats.some(
+    const currentChatExists = activeChats.some(
       (chat) => chat.id === activeChatId,
     )
     const isCreationMode = messages.length === 1 && messages[0].id === 'welcome'
 
-    // Caso A: El chat actual ya no es válido (fue archivado o borrado)
+    // 1. Si el chat que teníamos seleccionado ya no existe (ej. se archivó)
-    if (activeChatId && !isChatStillActive && !isCreationMode) {
+    if (activeChatId && !currentChatExists && !isCreationMode) {
       setActiveChatId(undefined)
       setMessages([])
-      return // Salimos para evitar ejecuciones extra en este render
+      return
     }
 
-    // Caso B: No hay chat seleccionado y hay chats disponibles (Auto-selección al cargar)
+    // 2. Auto-selección inicial: Solo si no hay ID, no estamos creando y hay chats
-    if (!activeChatId && activeChats.length > 0 && !isCreationMode) {
+    if (
+      !activeChatId &&
+      activeChats.length > 0 &&
+      !isCreationMode &&
+      chatMessages.length === 0
+    ) {
       setActiveChatId(activeChats[0].id)
     }
+  }, [
+    activeChats,
+    activeChatId,
+    isLoadingConv,
+    isSending,
+    messages.length,
+    chatMessages.length,
+    messages,
+  ])
 
-    // Caso C: Si la lista de chats está vacía y no estamos creando uno, limpiar por si acaso
-    if (activeChats.length === 0 && activeChatId && !isCreationMode) {
-      setActiveChatId(undefined)
-    }
-  }, [activeChats, activeChatId, isLoadingConv, messages.length])
   useEffect(() => {
     const state = routerState.location.state as any
     if (!state?.campo_edit || availableFields.length === 0) return
@@ -278,7 +285,7 @@ function RouteComponent() {
     setInput((prev) =>
       injectFieldsIntoInput(prev || 'Mejora este campo:', [field]),
     )
-  }, [availableFields])
+  }, [availableFields, routerState.location.state])
 
   const createNewChat = () => {
     setActiveChatId(undefined) // Al ser undefined, el próximo handleSend creará uno nuevo
@@ -352,13 +359,16 @@ function RouteComponent() {
     input: string,
     fields: Array<SelectedField>,
   ) => {
-    const cleaned = input.replace(/\n?\[Campos:[^\]]*]/g, '').trim()
+    // 1. Limpiamos cualquier rastro anterior de la etiqueta (por si acaso)
+    // Esta regex ahora también limpia si el texto termina de forma natural
+    const cleaned = input.replace(/[:\s]+[^:]*$/, '').trim()
 
     if (fields.length === 0) return cleaned
 
     const fieldLabels = fields.map((f) => f.label).join(', ')
 
-    return `${cleaned}\n[Campos: ${fieldLabels}]`
+    // 2. Devolvemos un formato natural: "Mejora este campo: Nombre del Campo"
+    return `${cleaned}: ${fieldLabels}`
   }
 
   const toggleField = (field: SelectedField) => {
@@ -388,47 +398,64 @@ function RouteComponent() {
 
   const handleSend = async (promptOverride?: string) => {
     const rawText = promptOverride || input
-    if (!rawText.trim() && selectedFields.length === 0) return
     if (isSending || (!rawText.trim() && selectedFields.length === 0)) return
-    const currentFields = [...selectedFields]
-    const finalPrompt = buildPrompt(rawText, currentFields)
-    setIsSending(true)
-    setOptimisticMessage(rawText)
-    setInput('')
-    setSelectedArchivoIds([])
-    setSelectedRepositorioIds([])
-    setUploadedFiles([])
-    try {
-      const payload: any = {
-        planId: planId,
-        content: finalPrompt,
-        conversacionId: activeChatId || undefined,
-      }
 
-      if (currentFields.length > 0) {
+    const currentFields = [...selectedFields]
-        payload.campos = currentFields.map((f) => f.key)
+    const finalContent = buildPrompt(rawText, currentFields)
+    setIsSending(true)
+    setOptimisticMessage(finalContent)
+    setInput('')
+    setSelectedFields([])
+
+    try {
+      const payload = {
+        planId: planId as any,
+        content: finalContent,
+        conversacionId: activeChatId,
+        campos:
+          currentFields.length > 0
+            ? currentFields.map((f) => f.key)
+            : undefined,
       }
 
       const response = await sendChat(payload)
-
+      setIsSyncing(true)
       if (response.conversacionId && response.conversacionId !== activeChatId) {
         setActiveChatId(response.conversacionId)
       }
 
-      await queryClient.invalidateQueries({
+      // ESPERAMOS a que la caché se actualice antes de quitar el "isSending"
-        queryKey: ['conversation-by-plan', planId],
+      await Promise.all([
-      })
+        queryClient.invalidateQueries({
-      setOptimisticMessage(null)
+          queryKey: ['conversation-by-plan', planId],
+        }),
+        queryClient.invalidateQueries({
+          queryKey: ['conversation-messages', response.conversacionId],
+        }),
+      ])
     } catch (error) {
-      console.error('Error en el chat:', error)
+      console.error('Error:', error)
-      // Aquí sí podrías usar un toast o un mensaje de error temporal
-    } finally {
-      // 5. CRÍTICO: Detener el estado de carga SIEMPRE
-      setIsSending(false)
       setOptimisticMessage(null)
+    } finally {
+      // Solo ahora quitamos los indicadores de carga
+      setIsSending(false)
+      // setOptimisticMessage(null)
     }
   }
 
+  useEffect(() => {
+    if (!isSyncing || !mensajesDelChat || mensajesDelChat.length === 0) return
+
+    // Forzamos el tipo a 'any' o a tu interfaz de mensaje para saltarnos la unión de tipos compleja
+    const ultimoMensajeDB = mensajesDelChat[mensajesDelChat.length - 1] as any
+
+    // Ahora la validación es directa y no debería dar avisos de "unnecessary"
+    if (ultimoMensajeDB?.respuesta) {
+      setIsSyncing(false)
+      setOptimisticMessage(null)
+    }
+  }, [mensajesDelChat, isSyncing])
+
   const totalReferencias = useMemo(() => {
     return (
       selectedArchivoIds.length +
@@ -630,42 +657,56 @@ function RouteComponent() {
                 </div>
               ) : (
                 <>
-                  {chatMessages.map((msg: any) => (
+                  {chatMessages.map((msg: any) => {
-                    <div
+                    const isAI = msg.role === 'assistant'
-                      key={msg.id}
+                    const isUser = msg.role === 'user'
-                      className={`flex max-w-[85%] flex-col ${
+                    // IMPORTANTE: Asegúrate de que msg.id contenga la info de procesamiento o pásala en el map
-                        msg.role === 'user'
+                    const isProcessing = msg.isProcessing
-                          ? 'ml-auto items-end'
+
-                          : 'items-start'
+                    return (
-                      }`}
-                    >
                       <div
-                        className={`relative rounded-2xl p-3 text-sm whitespace-pre-wrap shadow-sm transition-all duration-300 ${
+                        key={msg.id}
-                          msg.role === 'user'
+                        className={`flex max-w-[85%] flex-col ${
-                            ? 'rounded-tr-none bg-teal-600 text-white'
+                          isUser ? 'ml-auto items-end' : 'items-start'
-                            : `rounded-tl-none border bg-white text-slate-700 ${
-                                // --- LÓGICA DE REFUSAL ---
-                                msg.isRefusal
-                                  ? 'border-red-200 bg-red-50/50 ring-1 ring-red-100'
-                                  : 'border-slate-100'
-                              }`
                         }`}
                       >
-                        {/* Icono opcional de advertencia si es refusal */}
+                        <div
-                        {msg.isRefusal && (
+                          className={`relative rounded-2xl p-3 text-sm whitespace-pre-wrap shadow-sm transition-all duration-300 ${
-                          <div className="mb-1 flex items-center gap-1 text-[10px] font-bold text-red-500 uppercase">
+                            isUser
-                            <span>Aviso del Asistente</span>
+                              ? 'rounded-tr-none bg-teal-600 text-white'
-                          </div>
+                              : `rounded-tl-none border bg-white text-slate-700 ${
-                        )}
+                                  msg.isRefusal
+                                    ? 'border-red-200 bg-red-50/50 ring-1 ring-red-100'
+                                    : 'border-slate-100'
+                                }`
+                          }`}
+                        >
+                          {/* Aviso de Refusal */}
+                          {msg.isRefusal && (
+                            <div className="mb-1 flex items-center gap-1 text-[10px] font-bold text-red-500 uppercase">
+                              <span>Aviso del Asistente</span>
+                            </div>
+                          )}
 
-                        {msg.content}
+                          {/* CONTENIDO CORRECTO: Usamos msg.content */}
+                          {isAI && isProcessing ? (
+                            <div className="flex items-center gap-2 py-1">
+                              <div className="flex gap-1">
+                                <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-teal-500" />
+                                <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-teal-500 [animation-delay:-0.15s]" />
+                                <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-teal-500 [animation-delay:-0.3s]" />
+                              </div>
+                            </div>
+                          ) : (
+                            msg.content // <--- CAMBIO CLAVE
+                          )}
 
-                        {!msg.isRefusal &&
+                          {/* Recomendaciones */}
-                          msg.suggestions &&
+                          {isAI && msg.suggestions?.length > 0 && (
-                          msg.suggestions.length > 0 && (
                             <div className="mt-4">
                               <ImprovementCard
-                                suggestions={msg.suggestions}
+                                suggestions={msg.suggestions} // Usamos el nombre normalizado en el flatMap
+                                dbMessageId={msg.dbMessageId}
                                 planId={planId}
                                 currentDatos={data?.datos}
                                 activeChatId={activeChatId}
@@ -675,19 +716,24 @@ function RouteComponent() {
                               />
                             </div>
                           )}
+                        </div>
                       </div>
-                    </div>
+                    )
-                  ))}
+                  })}
 
-                  {optimisticMessage && (
+                  {(isSending || isSyncing) &&
-                    <div className="animate-in fade-in slide-in-from-right-2 ml-auto flex max-w-[85%] flex-col items-end">
+                    optimisticMessage &&
-                      <div className="rounded-2xl rounded-tr-none bg-teal-600/70 p-3 text-sm whitespace-pre-wrap text-white shadow-sm">
+                    !chatMessages.some(
-                        {optimisticMessage}
+                      (m) => m.content === optimisticMessage,
+                    ) && (
+                      <div className="animate-in fade-in slide-in-from-right-2 ml-auto flex max-w-[85%] flex-col items-end">
+                        <div className="rounded-2xl rounded-tr-none bg-teal-600/70 p-3 text-sm whitespace-pre-wrap text-white shadow-sm">
+                          {optimisticMessage}
+                        </div>
                       </div>
-                    </div>
+                    )}
-                  )}
 
-                  {isSending && (
+                  {(isSending || isSyncing) && (
                     <div className="animate-in fade-in slide-in-from-left-2 flex flex-col items-start duration-300">
                       <div className="rounded-2xl rounded-tl-none border border-slate-200 bg-white p-4 shadow-sm">
                         <div className="flex items-center gap-2">
@@ -697,7 +743,9 @@ function RouteComponent() {
                             <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-teal-500" />
                           </div>
                           <span className="text-[10px] font-medium tracking-tight text-slate-400 uppercase">
-                            Esperando respuesta...
+                            {isSyncing
+                              ? 'Actualizando historial...'
+                              : 'Esperando respuesta...'}
                           </span>
                         </div>
                       </div>

src/routes/planes/$planId/asignaturas/$asignaturaId/documento.tsx

@@ -2,7 +2,7 @@ import { createFileRoute, useParams } from '@tanstack/react-router'
 import { useCallback, useEffect, useState } from 'react'
 
 import { DocumentoSEPTab } from '@/components/asignaturas/detalle/DocumentoSEPTab'
-import { fetchPlanPdf } from '@/data/api/document.api'
+import { fetchAsignaturaPdf } from '@/data/api/document.api'
 
 export const Route = createFileRoute(
   '/planes/$planId/asignaturas/$asignaturaId/documento',
@@ -11,7 +11,7 @@ export const Route = createFileRoute(
 })
 
 function RouteComponent() {
-  const { planId } = useParams({
+  const { asignaturaId } = useParams({
     from: '/planes/$planId/asignaturas/$asignaturaId/documento',
   })
 
@@ -23,8 +23,8 @@ function RouteComponent() {
     try {
       setIsLoading(true)
 
-      const pdfBlob = await fetchPlanPdf({
+      const pdfBlob = await fetchAsignaturaPdf({
-        plan_estudio_id: planId,
+        asignatura_id: asignaturaId,
       })
 
       const url = window.URL.createObjectURL(pdfBlob)
@@ -38,7 +38,7 @@ function RouteComponent() {
     } finally {
       setIsLoading(false)
     }
-  }, [planId])
+  }, [asignaturaId])
 
   useEffect(() => {
     loadPdfPreview()
@@ -49,8 +49,8 @@ function RouteComponent() {
   }, [loadPdfPreview])
 
   const handleDownload = async () => {
-    const pdfBlob = await fetchPlanPdf({
+    const pdfBlob = await fetchAsignaturaPdf({
-      plan_estudio_id: planId,
+      asignatura_id: asignaturaId,
     })
 
     const url = window.URL.createObjectURL(pdfBlob)

src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx

@@ -232,7 +232,7 @@ function AsignaturaLayout() {
               { label: 'Datos', to: '' },
               { label: 'Contenido', to: 'contenido' },
               { label: 'Bibliografía', to: 'bibliografia' },
-              { label: 'IA', to: 'asignaturaIa' },
+              { label: 'IA', to: 'iaasignatura' },
               { label: 'Documento SEP', to: 'documento' },
               { label: 'Historial', to: 'historial' },
             ].map((tab) => {