Merge pull request 'Que haya chat de la IA #149' (#159) from issue/149-que-haya-chat-de-la-ia into main

Reviewed-on: #159

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 || {}
+  // --- AUTO-SCROLL ---
+  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) => {
-      const estructuraCampo = estructuraProps[key]
+  // --- FILTRADO DE CHATS ---
+  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 =
-        estructuraCampo?.title ||
-        key.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())
-
-      return {
-        key,
-        label: labelAmigable,
-        value: String(datosGenerales.datos[key] || ''),
+  // --- 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,
+        })
       }
+      return msgs
     })
-  }, [datosGenerales])
-
-  // 2. Manejar el estado inicial si viene de "Datos de Asignatura" (Prefill)
+  }, [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)
+    if (activeChats.length > 0 && !loadingConv) {
+      setActiveChatId(activeChats[0].id)
+      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)) {
-        setSelectedFields([field])
-        // Sincronizamos el texto inicial con el campo pre-seleccionado
-        setInput(`Mejora el campo ${field.label}: `)
+    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
+      })
+
+      // 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
-  useEffect(() => {
-    if (scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
-    }
-  }, [messages, isLoading])
+      setInput('')
+      setSelectedFields([])
 
-  // 3. Lógica para el disparador ":"
-  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const val = e.target.value
-    setInput(val)
-    setShowSuggestions(val.endsWith(':'))
+      // 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) => {
-      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)
+    setSelectedFields((prev) =>
+      prev.find((f) => f.key === field.key)
+        ? prev.filter((f) => f.key !== field.key)
+        : [...prev, field],
+    )
   }
 
-  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()
-  }
-
-  const handleSend = async (promptOverride?: string) => {
-    const rawText = promptOverride || input
-    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 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([])
-
-    // Simular carga local para el feedback visual
-    setTimeout(() => setIsLoading(false), 1200)
+    // 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>

src/data/api/ai.api.ts

@@ -247,3 +247,115 @@ export async function update_recommendation_applied_status(
 
   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 (error) throw error
+  return data
+}

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,
@@ -13,10 +13,16 @@ import {
   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 })
@@ -90,22 +96,58 @@ export function useConversationByPlan(planId: string | null) {
 }
 
 export function useMessagesByChat(conversationId: string | null) {
-  return useQuery({
-    // La queryKey debe ser única; incluimos el ID para que se refresque al cambiar de chat
-    queryKey: ['conversation-messages', conversationId],
+  const queryClient = useQueryClient()
+  const supabase = supabaseBrowser()
 
-    // Solo ejecutamos la función si el ID no es null o undefined
+  const query = useQuery({
+    queryKey: ['conversation-messages', conversationId],
     queryFn: () => {
       if (!conversationId) throw new Error('Conversation ID is required')
       return getMessagesByConversation(conversationId)
     },
-
-    // Importante: 'enabled' controla que no se dispare la petición si no hay ID
     enabled: !!conversationId,
-
-    // Opcional: Mantener los datos previos mientras se carga la nueva conversación
     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() {
@@ -137,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 })
 }
@@ -157,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/routes/planes/$planId/_detalle/iaplan.tsx

@@ -98,14 +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)
+    useMessagesByChat(activeChatId ?? null) // Si es undefined, pasa null
   const [selectedArchivoIds, setSelectedArchivoIds] = useState<Array<string>>(
     [],
   )
@@ -152,10 +152,6 @@ function RouteComponent() {
     )
   }, [availableFields, filterQuery, selectedFields])
 
-  const activeChatData = useMemo(() => {
-    return lastConversation?.find((chat: any) => chat.id === activeChatId)
-  }, [lastConversation, activeChatId])
-
   const chatMessages = useMemo(() => {
     if (!activeChatId || !mensajesDelChat) return []
 
@@ -274,6 +270,7 @@ function RouteComponent() {
     isSending,
     messages.length,
     chatMessages.length,
+    messages,
   ])
 
   useEffect(() => {
@@ -288,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
@@ -404,17 +401,16 @@ function RouteComponent() {
     if (isSending || (!rawText.trim() && selectedFields.length === 0)) return
 
     const currentFields = [...selectedFields]
+    const finalContent = buildPrompt(rawText, currentFields)
     setIsSending(true)
-    setOptimisticMessage(rawText)
-
-    // Limpiar input inmediatamente para feedback visual
+    setOptimisticMessage(finalContent)
     setInput('')
     setSelectedFields([])
 
     try {
       const payload = {
-        planId,
-        content: buildPrompt(rawText, currentFields),
+        planId: planId as any,
+        content: finalContent,
         conversacionId: activeChatId,
         campos:
           currentFields.length > 0
@@ -423,13 +419,12 @@ function RouteComponent() {
       }
 
       const response = await sendChat(payload)
-
-      // IMPORTANTE: Si es un chat nuevo, actualizar el ID antes de invalidar
+      setIsSyncing(true)
       if (response.conversacionId && response.conversacionId !== activeChatId) {
         setActiveChatId(response.conversacionId)
       }
 
-      // Invalidar ambas para asegurar que la lista de la izquierda y los mensajes se
+      // ESPERAMOS a que la caché se actualice antes de quitar el "isSending"
       await Promise.all([
         queryClient.invalidateQueries({
           queryKey: ['conversation-by-plan', planId],
@@ -440,12 +435,27 @@ function RouteComponent() {
       ])
     } catch (error) {
       console.error('Error:', error)
-    } finally {
-      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 +
@@ -647,42 +657,55 @@ function RouteComponent() {
                 </div>
               ) : (
                 <>
-                  {chatMessages.map((msg: any) => (
-                    <div
-                      key={msg.id}
-                      className={`flex max-w-[85%] flex-col ${
-                        msg.role === 'user'
-                          ? 'ml-auto items-end'
-                          : 'items-start'
-                      }`}
-                    >
+                  {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
-                        className={`relative rounded-2xl p-3 text-sm whitespace-pre-wrap shadow-sm transition-all duration-300 ${
-                          msg.role === 'user'
-                            ? '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'
-                              }`
+                        key={msg.id}
+                        className={`flex max-w-[85%] flex-col ${
+                          isUser ? 'ml-auto items-end' : 'items-start'
                         }`}
                       >
-                        {/* Icono opcional de advertencia si es 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>
-                        )}
+                        <div
+                          className={`relative rounded-2xl p-3 text-sm whitespace-pre-wrap shadow-sm transition-all duration-300 ${
+                            isUser
+                              ? 'rounded-tr-none bg-teal-600 text-white'
+                              : `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 &&
-                          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}
@@ -693,19 +716,24 @@ function RouteComponent() {
                               />
                             </div>
                           )}
+                        </div>
                       </div>
-                    </div>
-                  ))}
+                    )
+                  })}
 
-                  {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}
+                  {(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}
+                        </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">
@@ -715,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>