Se agrega realtime para chat de ia plan

Se prepara chat asignaturas para ia
Se agregan hooks para manejo de la ia en asignaturas
2026-03-09 14:02:08 -06:00 · 2026-03-06 13:33:38 -06:00 · 2026-03-05 09:09:39 -06:00 · 2026-03-04 17:05:49 +00:00 · 2026-03-04 11:04:30 -06:00 · 2026-03-04 15:40:23 +00:00
9 changed files with 808 additions and 365 deletions
--- a/src/components/asignaturas/detalle/IAAsignaturaTab.tsx
+++ b/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>
-  messages: Array<IAMessage>
-  onSendMessage: (message: string, campoId?: string) => void
+  asignatura?: Record<string, any>
  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 } =
-    useSubject(asignaturaId)
-  // ESTADOS PRINCIPALES (Igual que en Planes)
+  // --- ESTADOS ---
+  const [activeChatId, setActiveChatId] = useState<string | undefined>(
+    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ú
-  const availableFields = useMemo(() => {
-    if (!datosGenerales?.datos) return []
+  // --- DATA QUERIES ---
+  const { data: datosGenerales } = useSubject(asignaturaId)
+  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 =
-      datosGenerales?.estructuras_asignatura?.definicion?.properties || {}
-
-    return Object.keys(datosGenerales.datos).map((key) => {
-      const estructuraCampo = estructuraProps[key]
-
-      const labelAmigable =
-        estructuraCampo?.title ||
-        key.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())
+  // --- AUTO-SCROLL ---
+  useEffect(() => {
+    const viewport = scrollRef.current?.querySelector(
+      '[data-radix-scroll-area-viewport]',
+    )
+    if (viewport) {
+      viewport.scrollTop = viewport.scrollHeight
+    }
+  }, [rawMessages, isSending])

+  // --- FILTRADO DE CHATS ---
+  const { activeChats, archivedChats } = useMemo(() => {
+    const chats = todasConversaciones || []
    return {
-        key,
-        label: labelAmigable,
-        value: String(datosGenerales.datos[key] || ''),
+      activeChats: chats.filter((c: any) => c.estado === 'ACTIVA'),
+      archivedChats: chats.filter((c: any) => c.estado === 'ARCHIVADA'),
    }
+  }, [todasConversaciones])
+
+  // --- PROCESAMIENTO DE MENSAJES ---
+  const messages = useMemo(() => {
+    if (!rawMessages) return []
+    return rawMessages.flatMap((m) => {
+      const msgs = []
+      msgs.push({ id: `${m.id}-user`, role: 'user', content: m.mensaje })
+      if (m.respuesta) {
+        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,
        })
-  }, [datosGenerales])
-
-  // 2. Manejar el estado inicial si viene de "Datos de Asignatura" (Prefill)
+      }
+      return msgs
+    })
+  }, [rawMessages])

+  // 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) {
-      console.log(state?.prefillCampo)
-      console.log(availableFields)
-
-      const field = availableFields.find((f) => f.key === state.prefillCampo)
-
-      if (field && !selectedFields.find((sf) => sf.key === field.key)) {
-        setSelectedFields([field])
-        // Sincronizamos el texto inicial con el campo pre-seleccionado
-        setInput(`Mejora el campo ${field.label}: `)
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [availableFields])
-
-  // Scroll automático
-  useEffect(() => {
-    if (scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
-    }
-  }, [messages, isLoading])
-
-  // 3. Lógica para el disparador ":"
-  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const val = e.target.value
-    setInput(val)
-    setShowSuggestions(val.endsWith(':'))
-  }
-
-  const toggleField = (field: SelectedField) => {
-    setSelectedFields((prev) => {
-      const isSelected = prev.find((f) => f.key === field.key)
-
-      // 1. Si ya está seleccionado, lo quitamos (Toggle OFF)
-      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) => {
-    if (selectedFields.length === 0) return userInput
-    const fieldsText = selectedFields
-      .map((f) => `- ${f.label}: ${f.value || '(vacio)'}`)
-      .join('\n')
-
-    return `${userInput}\n\nCampos a analizar:\n${fieldsText}`.trim()
+    if (activeChats.length > 0 && !loadingConv) {
+      setActiveChatId(activeChats[0].id)
+      hasInitialSelected.current = true
    }
+  }, [activeChats, loadingConv])

  const handleSend = async (promptOverride?: string) => {
-    const rawText = promptOverride || input
-    if (!rawText.trim() && selectedFields.length === 0) return
+    const text = promptOverride || input
+    if (!text.trim() && selectedFields.length === 0) return

-    const finalPrompt = buildPrompt(rawText)
+    setIsSending(true)
+    try {
+      const response = await sendMessage({
+        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
+      })

-    setIsLoading(true)
-    // Llamamos a la función que viene por props
-    onSendMessage(finalPrompt, selectedFields[0]?.key)
+      // IMPORTANTE: Después de la respuesta, actualizamos el ID activo con el que creó el backend
+      if (response.conversacionId) {
+        setActiveChatId(response.conversacionId)
+      }

      setInput('')
      setSelectedFields([])

-    // Simular carga local para el feedback visual
-    setTimeout(() => setIsLoading(false), 1200)
+      // Invalidamos la lista de conversaciones para que el nuevo chat aparezca en el historial (panel izquierdo)
+      queryClient.invalidateQueries({
+        queryKey: ['conversation-by-subject', asignaturaId],
+      })
+    } catch (error) {
+      console.error('Error al enviar mensaje:', error)
+    } finally {
+      setIsSending(false)
+    }
  }

+  const toggleField = (field: SelectedField) => {
+    setSelectedFields((prev) =>
+      prev.find((f) => f.key === field.key)
+        ? prev.filter((f) => f.key !== field.key)
+        : [...prev, field],
+    )
+  }
+
+  const availableFields = useMemo(() => {
+    if (!datosGenerales?.datos) return []
+    const estructuraProps =
+      datosGenerales?.estructuras_asignatura?.definicion?.properties || {}
+    return Object.keys(datosGenerales.datos).map((key) => ({
+      key,
+      label:
+        estructuraProps[key]?.title || key.replace(/_/g, ' ').toUpperCase(),
+      value: String(datosGenerales.datos[key] || ''),
+    }))
+  }, [datosGenerales])
+
+  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
+  }
+
+  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">
-      {/* PANEL DE CHAT PRINCIPAL */}
-      <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">
-        {/* Barra superior */}
-        <div className="shrink-0 border-b bg-white p-3">
-          <div className="flex flex-wrap items-center gap-2">
-            <span className="text-[10px] font-bold tracking-wider text-slate-400 uppercase">
-              IA de Asignatura
-            </span>
-          </div>
+    <div className="flex h-[calc(100vh-160px)] w-full gap-6 overflow-hidden p-4">
+      {/* PANEL IZQUIERDO */}
+      <div className="flex w-64 flex-col border-r pr-4">
+        <div className="mb-4 flex items-center justify-between px-2">
+          <h2 className="flex items-center gap-2 text-xs font-bold text-slate-500 uppercase">
+            <History size={14} /> Historial
+          </h2>
+          <Button
+            variant="ghost"
+            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={() =>
-                                onAcceptSuggestion(msg.sugerencia!)
-                              }
-                              className="h-8 bg-teal-600 text-xs hover:bg-teal-700"
+                              onClick={() => onAcceptSuggestion(msg.sugerencia)}
+                              className="h-8 bg-teal-600 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 && (
-                <div className="flex gap-2 p-4">
-                  <div className="h-2 w-2 animate-bounce 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 animate-bounce rounded-full bg-teal-400 [animation-delay:0.4s]" />
+              {isSending && (
+                <div className="flex animate-pulse gap-2 p-4">
+                  <div className="h-2 w-2 rounded-full bg-teal-400" />
+                  <div className="h-2 w-2 rounded-full bg-teal-400" />
+                  <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">
-                  Seleccionar campo de asignatura
+                <div className="border-b bg-slate-50 px-3 py-2 text-[10px] font-bold text-slate-500 uppercase">
+                  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">
-                        {field.label}
-                      </span>
+                      <span className="text-slate-700">{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={
-                    selectedFields.length > 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"
+                  placeholder='Escribe ":" para referenciar un campo...'
+                  className="max-h-[120px] min-h-[40px] flex-1 resize-none border-none bg-transparent 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">
-          <Lightbulb size={18} className="text-orange-500" /> Acciones rápidas
+        <h4 className="flex items-center gap-2 text-sm font-bold text-slate-800">
+          <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">
-                {preset.label}
-              </span>
+              <span className="font-medium text-slate-700">{preset.label}</span>
            </button>
          ))}
        </div>
--- a/src/components/planes/detalle/Ia/ImprovementCard.tsx
+++ b/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,
            })
          }
--- a/src/data/api/ai.api.ts
+++ b/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
-  const { data: conv, error: fetchError } = await supabase
-    .from('conversaciones_plan')
-    .select('conversacion_json')
-    .eq('id', conversacionId)
+  // 1. Obtener la propuesta actual de ese mensaje específico
+  const { data: msgData, error: fetchError } = await supabase
+    .from('plan_mensajes_ia')
+    .select('propuesta')
+    .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
-  // 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,
+  const propuestaActual = msgData.propuesta as any
+
+  // 2. Modificar el array de recommendations dentro de la propuesta
+  // Mantenemos el resto de la propuesta (prompt, respuesta, etc.) intacto
+  const nuevaPropuesta = {
+    ...propuestaActual,
+    recommendations: (propuestaActual.recommendations || []).map((rec: any) =>
+      rec.campo_afectado === campoAfectado ? { ...rec, aplicada: true } : rec,
    ),
  }
-    }
-    return msg
-  })

-  // 3. Actualizar la base de datos con el nuevo JSON
-  const { data, error: updateError } = await supabase
-    .from('conversaciones_plan')
-    .update({ conversacion_json: nuevoJson })
+  // 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
 }
--- a/src/data/api/document.api.ts
+++ b/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()
+}
--- a/src/data/api/subjects.api.ts
+++ b/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)
--- a/src/data/hooks/useAI.ts
+++ b/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 'crypto'
+import type { UUID } from 'node: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'] })
+    },
+  })
+}
--- a/src/routes/planes/$planId/_detalle/iaplan.tsx
+++ b/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,41 +152,33 @@ 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 || !activeChatData) return []
+    if (!activeChatId || !mensajesDelChat) return []

-    const json = (activeChatData.conversacion_json ||
-      []) as unknown as Array<ChatMessageJSON>
+    // flatMap nos permite devolver 2 elementos (pregunta y respuesta) por cada registro de la BD
+    return mensajesDelChat.flatMap((msg: any) => {
+      const messages = []

-    // 2. Verificamos que 'json' sea realmente un array antes de mapear
-    if (!Array.isArray(json)) return []
+      // 1. Mensaje del Usuario
+      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) => {
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      if (!msg?.user) {
-        return {
-          id: `err-${index}`,
+      // 2. Mensaje del Asistente (si hay respuesta)
+      if (msg.respuesta) {
+        // Extraemos las recomendaciones de la nueva estructura: msg.propuesta.recommendations
+        const rawRecommendations = msg.propuesta?.recommendations || []
+
+        messages.push({
+          id: `${msg.id}-ai`,
+          dbMessageId: msg.id,
          role: 'assistant',
-          content: '',
-          suggestions: [],
-        }
-      }
-
-      const isAssistant = msg.user === 'assistant'
-
-      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) => {
+          content: msg.respuesta,
+          isRefusal: msg.is_refusal,
+          suggestions: rawRecommendations.map((rec: any) => {
            const fieldConfig = availableFields.find(
              (f) => f.key === rec.campo_afectado,
            )
@@ -195,12 +190,13 @@ function RouteComponent() {
              newValue: rec.texto_mejora,
              applied: rec.aplicada,
            }
+          }),
        })
-            : [],
      }
-    })
-  }, [activeChatData, activeChatId, availableFields])

+      return messages
+    })
+  }, [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)
-    if (activeChatId && !isChatStillActive && !isCreationMode) {
+    // 1. Si el chat que teníamos seleccionado ya no existe (ej. se archivó)
+    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)
-    if (!activeChatId && activeChats.length > 0 && !isCreationMode) {
+    // 2. Auto-selección inicial: Solo si no hay ID, no estamos creando y hay chats
+    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,46 +398,63 @@ 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) {
-        payload.campos = currentFields.map((f) => f.key)
+    const currentFields = [...selectedFields]
+    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"
+      await Promise.all([
+        queryClient.invalidateQueries({
          queryKey: ['conversation-by-plan', planId],
-      })
-      setOptimisticMessage(null)
+        }),
+        queryClient.invalidateQueries({
+          queryKey: ['conversation-messages', response.conversacionId],
+        }),
+      ])
    } catch (error) {
-      console.error('Error en el chat:', error)
-      // Aquí sí podrías usar un toast o un mensaje de error temporal
+      console.error('Error:', error)
+      setOptimisticMessage(null)
    } finally {
-      // 5. CRÍTICO: Detener el estado de carga SIEMPRE
+      // 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 (
@@ -630,42 +657,56 @@ function RouteComponent() {
                </div>
              ) : (
                <>
-                  {chatMessages.map((msg: any) => (
+                  {chatMessages.map((msg: any) => {
+                    const isAI = msg.role === 'assistant'
+                    const isUser = msg.role === 'user'
+                    // IMPORTANTE: Asegúrate de que msg.id contenga la info de procesamiento o pásala en el map
+                    const isProcessing = msg.isProcessing
+
+                    return (
                      <div
                        key={msg.id}
                        className={`flex max-w-[85%] flex-col ${
-                        msg.role === 'user'
-                          ? 'ml-auto items-end'
-                          : 'items-start'
+                          isUser ? 'ml-auto items-end' : 'items-start'
                        }`}
                      >
                        <div
                          className={`relative rounded-2xl p-3 text-sm whitespace-pre-wrap shadow-sm transition-all duration-300 ${
-                          msg.role === 'user'
+                            isUser
                              ? 'rounded-tr-none bg-teal-600 text-white'
                              : `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 */}
+                          {/* 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 &&
-                          msg.suggestions &&
-                          msg.suggestions.length > 0 && (
+                          {/* Recomendaciones */}
+                          {isAI && 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}
@@ -677,9 +718,14 @@ function RouteComponent() {
                          )}
                        </div>
                      </div>
-                  ))}
+                    )
+                  })}

-                  {optimisticMessage && (
+                  {(isSending || isSyncing) &&
+                    optimisticMessage &&
+                    !chatMessages.some(
+                      (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}
@@ -687,7 +733,7 @@ function RouteComponent() {
                      </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>
--- a/src/routes/planes/$planId/asignaturas/$asignaturaId/documento.tsx
+++ b/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({
-        plan_estudio_id: planId,
+      const pdfBlob = await fetchAsignaturaPdf({
+        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({
-      plan_estudio_id: planId,
+    const pdfBlob = await fetchAsignaturaPdf({
+      asignatura_id: asignaturaId,
    })

    const url = window.URL.createObjectURL(pdfBlob)
--- a/src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx
+++ b/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) => {
Author	SHA1	Message	Date
Roberto.silva	a9f38e6d72	Se agrega realtime para chat de ia plan	2026-03-09 14:02:08 -06:00
Roberto.silva	772f3b6750	Se prepara chat asignaturas para ia	2026-03-06 13:33:38 -06:00
Roberto.silva	e84e0abe8d	Se agregan hooks para manejo de la ia en asignaturas	2026-03-05 09:09:39 -06:00
Roberto Silva Corona	896c694a85	Merge pull request 'Documento de asignaturas #155 ' (#156 ) from issue/155-documento-de-asignaturas into main Reviewed-on: #156	2026-03-04 17:05:49 +00:00
Roberto.silva	990daf5786	Documento de asignaturas fix #155	2026-03-04 11:04:30 -06:00
Roberto Silva Corona	c1197413db	Merge pull request 'Se corrige bueg en hook de asignaturas en columna version' (#154 ) from issue/152-ajuste-de-vista-para-las-tablas into main Reviewed-on: #154	2026-03-04 15:40:23 +00:00
Roberto.silva	bf2b8a9b6e	Se corrige bug en version en hook de asignaturas	2026-03-04 09:39:31 -06:00
Roberto Silva Corona	d6ecee7549	Merge pull request 'Ajuste de vista para las tablas #152 ' (#153 ) from issue/152-ajuste-de-vista-para-las-tablas into main Reviewed-on: #153	2026-03-04 15:25:44 +00:00
Roberto.silva	66bbf8ae17	Ajuste de vista para las tablas fix #152	2026-03-04 09:25:10 -06:00
Roberto.silva	6012d0ced8	Ajuste de vista para las tablas #152	2026-03-04 09:24:27 -06:00