Merge pull request 'Se homologa vista y funcionalidades de chat de asignatura ( Guardar cambios o mejora es decir aplicar mejora, crear conversaciones, renombrar conversaciones, archivar conversaciones visualizar modal de referencias)' (#172) from issue/160-chats-de-ia-en-segundo-plano-para-asignaturas into main

Reviewed-on: #172

src/components/asignaturas/detalle/IAAsignaturaTab.tsx

@@ -13,14 +13,19 @@ import {
   X,
   MessageSquarePlus,
   Archive,
-  History, // Agregado
+  History,
+  Edit2, // Agregado
 } from 'lucide-react'
 import { useState, useEffect, useRef, useMemo } from 'react'
 
+import { ImprovementCard } from './SaveAsignatura/ImprovementCardProps'
+
 import type { IASugerencia } from '@/types/asignatura'
 
+import ReferenciasParaIA from '@/components/planes/wizard/PasoDetallesPanel/ReferenciasParaIA'
 import { Avatar, AvatarFallback } from '@/components/ui/avatar'
 import { Button } from '@/components/ui/button'
+import { Drawer, DrawerContent } from '@/components/ui/drawer'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Textarea } from '@/components/ui/textarea'
 import {
@@ -28,6 +33,7 @@ import {
   useConversationBySubject,
   useMessagesBySubjectChat,
   useSubject,
+  useUpdateSubjectConversationName,
   useUpdateSubjectConversationStatus,
 } from '@/data'
 import { cn } from '@/lib/utils'
@@ -75,6 +81,24 @@ export function IAAsignaturaTab({
   const { mutate: updateStatus } = useUpdateSubjectConversationStatus()
   const [isCreatingNewChat, setIsCreatingNewChat] = useState(false)
   const hasInitialSelected = useRef(false)
+  const { mutate: updateName } = useUpdateSubjectConversationName()
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [tempName, setTempName] = useState('')
+  const [openIA, setOpenIA] = useState(false)
+
+  const [selectedArchivoIds, setSelectedArchivoIds] = useState<Array<string>>(
+    [],
+  )
+  const [selectedRepositorioIds, setSelectedRepositorioIds] = useState<
+    Array<string>
+  >([])
+  const [uploadedFiles, setUploadedFiles] = useState<Array<File>>([])
+
+  // Cálculo del total para el Badge del botón
+  const totalReferencias =
+    selectedArchivoIds.length +
+    selectedRepositorioIds.length +
+    uploadedFiles.length
 
   const isAiThinking = useMemo(() => {
     if (isSending) return true
@@ -106,38 +130,62 @@ export function IAAsignaturaTab({
     }
   }, [todasConversaciones])
 
+  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])
+
+  // --- PROCESAMIENTO DE MENSAJES ---
   // --- PROCESAMIENTO DE MENSAJES ---
   const messages = useMemo(() => {
-    if (!rawMessages) return []
-    return rawMessages.flatMap((m) => {
-      const msgs = []
+    const msgs: Array<any> = []
 
-      // 1. Mensaje del usuario
-      msgs.push({ id: `${m.id}-user`, role: 'user', content: m.mensaje })
+    // 1. Mensajes existentes de la DB
+    if (rawMessages) {
+      rawMessages.forEach((m) => {
+        // Mensaje del usuario
+        msgs.push({ id: `${m.id}-user`, role: 'user', content: m.mensaje })
 
-      // 2. Respuesta de la IA
-      if (m.respuesta) {
-        // Mapeamos TODAS las recomendaciones del array
-        const sugerencias =
-          m.propuesta?.recommendations?.map((rec: any, index: number) => ({
-            id: `${m.id}-sug-${index}`, // ID único por sugerencia
-            messageId: m.id,
-            campoKey: rec.campo_afectado,
-            campoNombre: rec.campo_afectado.replace(/_/g, ' '),
-            valorSugerido: rec.texto_mejora,
-            aceptada: rec.aplicada,
-          })) || []
+        // Respuesta de la IA (si existe)
+        if (m.respuesta) {
+          const sugerencias =
+            m.propuesta?.recommendations?.map((rec: any, index: number) => ({
+              id: `${m.id}-sug-${index}`,
+              messageId: m.id,
+              campoKey: rec.campo_afectado,
+              campoNombre: rec.campo_afectado.replace(/_/g, ' '),
+              valorSugerido: rec.texto_mejora,
+              aceptada: rec.aplicada,
+            })) || []
 
-        msgs.push({
-          id: `${m.id}-ai`,
-          role: 'assistant',
-          content: m.respuesta,
-          sugerencias: sugerencias, // Ahora es un plural (array)
-        })
-      }
-      return msgs
-    })
-  }, [rawMessages])
+          msgs.push({
+            id: `${m.id}-ai`,
+            role: 'assistant',
+            content: m.respuesta,
+            sugerencias: sugerencias,
+          })
+        }
+      })
+    }
+
+    // 2. INYECCIÓN OPTIMISTA: Si estamos enviando, mostramos el texto actual del input como mensaje de usuario
+    if (isSending && input.trim()) {
+      msgs.push({
+        id: 'optimistic-user-msg',
+        role: 'user',
+        content: input,
+      })
+    }
+
+    return msgs
+  }, [rawMessages, isSending, input])
 
   // Auto-selección inicial
   useEffect(() => {
@@ -150,6 +198,58 @@ export function IAAsignaturaTab({
     }
   }, [activeChats, loadingConv])
 
+  const filteredFields = useMemo(() => {
+    if (!showSuggestions) return availableFields
+
+    // Extraemos lo que hay después del último ':' para filtrar
+    const lastColonIndex = input.lastIndexOf(':')
+    const query = input.slice(lastColonIndex + 1).toLowerCase()
+
+    return availableFields.filter(
+      (f) =>
+        f.label.toLowerCase().includes(query) ||
+        f.key.toLowerCase().includes(query),
+    )
+  }, [availableFields, input, showSuggestions])
+
+  // 2. Efecto para cerrar con ESC
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setShowSuggestions(false)
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [])
+
+  // 3. Función para insertar el campo y limpiar el prompt
+  const handleSelectField = (field: SelectedField) => {
+    // 1. Agregamos al array de objetos (para tu lógica de API)
+    if (!selectedFields.find((f) => f.key === field.key)) {
+      setSelectedFields((prev) => [...prev, field])
+    }
+
+    // 2. Lógica de autocompletado en el texto
+    const lastColonIndex = input.lastIndexOf(':')
+    if (lastColonIndex !== -1) {
+      // Tomamos lo que había antes del ":" + el Nombre del Campo + un espacio
+      const nuevoTexto = input.slice(0, lastColonIndex) + `${field.label} `
+      setInput(nuevoTexto)
+    }
+
+    // 3. Cerramos el buscador y devolvemos el foco al textarea
+    setShowSuggestions(false)
+
+    // Opcional: Si tienes una ref del textarea, puedes hacer:
+    // textareaRef.current?.focus()
+  }
+
+  const handleSaveName = (id: string) => {
+    if (tempName.trim()) {
+      updateName({ id, nombre: tempName })
+    }
+    setEditingId(null)
+  }
+
   const handleSend = async (promptOverride?: string) => {
     const text = promptOverride || input
     if (!text.trim() && selectedFields.length === 0) return
@@ -190,18 +290,6 @@ export function IAAsignaturaTab({
     )
   }
 
-  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('')
@@ -273,45 +361,86 @@ export function IAAsignaturaTab({
 
         <ScrollArea className="flex-1">
           <div className="space-y-1 pr-3">
+            {/* CORRECCIÓN: Mapear ambos casos */}
             {(showArchived ? archivedChats : activeChats).map((chat: any) => (
-              // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
               <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',
+                  'group relative flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-all',
                   activeChatId === chat.id
-                    ? 'bg-teal-50 font-medium text-teal-900'
+                    ? 'bg-teal-50 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>
+
+                {editingId === chat.id ? (
+                  <div className="flex flex-1 items-center gap-1">
+                    <input
+                      autoFocus
+                      className="w-full rounded bg-white px-1 text-xs ring-1 ring-teal-400 outline-none"
+                      value={tempName}
+                      onChange={(e) => setTempName(e.target.value)}
+                      onBlur={() => handleSaveName(chat.id)} // Guardar al hacer clic fuera
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') handleSaveName(chat.id)
+                        if (e.key === 'Escape') setEditingId(null)
+                      }}
+                    />
+                  </div>
+                ) : (
+                  <>
+                    <span
+                      onClick={() => setActiveChatId(chat.id)}
+                      className="flex-1 cursor-pointer truncate"
+                    >
+                      {/* CORRECCIÓN: Usar 'nombre' si así se llama en tu DB */}
+                      {chat.nombre || chat.titulo || 'Conversación'}
+                    </span>
+
+                    <div className="flex opacity-0 transition-opacity group-hover:opacity-100">
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          setEditingId(chat.id)
+                          setTempName(chat.nombre || chat.titulo || '')
+                        }}
+                        className="p-1 hover:text-teal-600"
+                      >
+                        <Edit2 size={12} />
+                      </button>
+
+                      {/* Botón para Archivar/Desarchivar dinámico */}
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          // Si el estado actual es ACTIVA, mandamos ARCHIVADA. Si no, viceversa.
+                          const nuevoEstado =
+                            chat.estado === 'ACTIVA' ? 'ARCHIVADA' : 'ACTIVA'
+                          updateStatus({ id: chat.id, estado: nuevoEstado })
+                        }}
+                        className={cn(
+                          'p-1 transition-colors',
+                          chat.estado === 'ACTIVA'
+                            ? 'hover:text-red-500'
+                            : 'hover:text-teal-600',
+                        )}
+                        title={
+                          chat.estado === 'ACTIVA'
+                            ? 'Archivar chat'
+                            : 'Desarchivar chat'
+                        }
+                      >
+                        {chat.estado === 'ACTIVA' ? (
+                          <Archive size={12} />
+                        ) : (
+                          /* Icono de Desarchivar */
+                          <History size={12} className="scale-x-[-1]" />
+                        )}
+                      </button>
+                    </div>
+                  </>
+                )}
               </div>
             ))}
           </div>
@@ -320,10 +449,22 @@ export function IAAsignaturaTab({
 
       {/* 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">
+        <div className="flex shrink-0 items-center justify-between border-b bg-white p-3">
           <span className="text-[10px] font-bold tracking-wider text-slate-400 uppercase">
             Asistente IA
           </span>
+          <button
+            onClick={() => setOpenIA(true)}
+            className="flex items-center gap-2 rounded-md bg-slate-100 px-3 py-1.5 text-xs font-medium transition hover:bg-slate-200"
+          >
+            <FileText size={14} className="text-slate-500" />
+            Referencias
+            {totalReferencias > 0 && (
+              <span className="animate-in zoom-in flex h-4 min-w-[16px] items-center justify-center rounded-full bg-teal-600 px-1 text-[10px] text-white">
+                {totalReferencias}
+              </span>
+            )}
+          </button>
         </div>
 
         <div className="relative min-h-0 flex-1">
@@ -386,62 +527,40 @@ export function IAAsignaturaTab({
                             <p className="mb-1 text-[10px] font-bold text-slate-400 uppercase">
                               Mejoras disponibles:
                             </p>
-                            {msg.sugerencias.map((sug: any) =>
-                              sug.aceptada ? (
-                                /* --- ESTADO: YA APLICADO (Basado en tu última imagen) --- */
-                                <div
-                                  key={sug.id}
-                                  className="group flex flex-col rounded-xl border border-slate-100 bg-white p-3 shadow-sm transition-all"
-                                >
-                                  <div className="mb-3 flex items-center justify-between gap-4">
-                                    <span className="text-sm font-bold text-slate-800">
-                                      {sug.campoNombre}
-                                    </span>
-
-                                    {/* Badge de Aplicado */}
-                                    <div className="flex items-center gap-1.5 rounded-full border border-slate-100 bg-slate-50 px-3 py-1 text-xs font-medium text-slate-400">
-                                      <Check size={14} />
-                                      Aplicado
-                                    </div>
-                                  </div>
-
-                                  <div className="rounded-lg border border-teal-100 bg-teal-50/30 p-3 text-xs leading-relaxed text-slate-500">
-                                    "{sug.valorSugerido}"
-                                  </div>
-                                </div>
-                              ) : (
-                                /* --- ESTADO: PENDIENTE POR APLICAR --- */
-                                <div
-                                  key={sug.id}
-                                  className="group flex flex-col rounded-xl border border-teal-100 bg-white p-3 shadow-sm transition-all hover:border-teal-200"
-                                >
-                                  <div className="mb-3 flex items-center justify-between gap-4">
-                                    <span className="max-w-[150px] truncate rounded-lg border border-teal-100 bg-teal-50/50 px-2.5 py-1 text-[10px] font-bold tracking-wider text-teal-700 uppercase">
-                                      {sug.campoNombre}
-                                    </span>
-
-                                    <Button
-                                      size="sm"
-                                      className="h-8 w-auto bg-teal-600 px-4 text-xs font-semibold shadow-sm transition-colors hover:bg-teal-700"
-                                      onClick={() => onAcceptSuggestion(sug)}
-                                    >
-                                      <Check size={14} className="mr-1.5" />
-                                      Aplicar mejora
-                                    </Button>
-                                  </div>
-
-                                  <div className="line-clamp-4 rounded-lg border border-dashed border-slate-200 bg-slate-50/50 p-3 text-xs leading-relaxed text-slate-600 italic">
-                                    "{sug.valorSugerido}"
-                                  </div>
-                                </div>
-                              ),
-                            )}
+                            {msg.sugerencias.map((sug: any) => (
+                              <ImprovementCard
+                                key={sug.id}
+                                sug={sug}
+                                asignaturaId={asignaturaId}
+                              />
+                            ))}
                           </div>
                         )}
                     </div>
                   </div>
                 </div>
               ))}
+              {isAiThinking && (
+                <div className="animate-in fade-in slide-in-from-bottom-2 flex gap-4">
+                  <Avatar className="h-9 w-9 shrink-0 border bg-teal-600 text-white shadow-sm">
+                    <AvatarFallback>
+                      <Sparkles size={16} className="animate-pulse" />
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex flex-col items-start gap-2">
+                    <div className="rounded-2xl rounded-tl-none border border-slate-200 bg-white p-4 shadow-sm">
+                      <div className="flex gap-1">
+                        <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400 [animation-delay:-0.3s]"></span>
+                        <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400 [animation-delay:-0.15s]"></span>
+                        <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400"></span>
+                      </div>
+                    </div>
+                    <span className="text-[10px] font-medium text-slate-400 italic">
+                      La IA está analizando tu solicitud...
+                    </span>
+                  </div>
+                </div>
+              )}
               {/* Espacio extra al final para que el scroll no tape el último mensaje */}
               <div className="h-4" />
             </div>
@@ -452,39 +571,53 @@ export function IAAsignaturaTab({
         <div className="shrink-0 border-t bg-white p-4">
           <div className="relative mx-auto max-w-4xl">
             {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 text-slate-500 uppercase">
-                  Campos de Asignatura
+              <div className="animate-in fade-in slide-in-from-bottom-2 absolute bottom-full left-0 z-50 mb-2 w-72 overflow-hidden rounded-xl border bg-white shadow-2xl">
+                <div className="flex justify-between border-b bg-slate-50 px-3 py-2 text-[10px] font-bold text-slate-500 uppercase">
+                  <span>Filtrando campos...</span>
+                  <span className="rounded bg-slate-200 px-1 text-[9px] text-slate-400">
+                    ESC para cerrar
+                  </span>
                 </div>
-                <div className="max-h-64 overflow-y-auto p-1">
-                  {availableFields.map((field) => (
-                    <button
-                      key={field.key}
-                      onClick={() => toggleField(field)}
-                      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">{field.label}</span>
-                      {selectedFields.find((f) => f.key === field.key) && (
-                        <Check size={14} className="text-teal-600" />
-                      )}
-                    </button>
-                  ))}
+                <div className="max-h-60 overflow-y-auto p-1">
+                  {filteredFields.length > 0 ? (
+                    filteredFields.map((field) => (
+                      <button
+                        key={field.key}
+                        onClick={() => handleSelectField(field)}
+                        className="flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-teal-50"
+                      >
+                        <div className="flex flex-col">
+                          <span className="font-medium text-slate-700">
+                            {field.label}
+                          </span>
+                        </div>
+                        {selectedFields.find((f) => f.key === field.key) && (
+                          <Check size={14} className="text-teal-600" />
+                        )}
+                      </button>
+                    ))
+                  ) : (
+                    <div className="p-4 text-center text-xs text-slate-400 italic">
+                      No se encontraron coincidencias
+                    </div>
+                  )}
                 </div>
               </div>
             )}
 
             <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">
               {selectedFields.length > 0 && (
-                <div className="flex flex-wrap gap-2 px-2 pt-1">
+                <div className="flex flex-wrap gap-1.5 px-2 pt-1">
                   {selectedFields.map((field) => (
                     <div
                       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"
+                      className="animate-in zoom-in-95 flex items-center gap-1 rounded-md border border-teal-200 bg-teal-50 px-2 py-0.5 text-[11px] font-bold text-teal-700 shadow-sm"
                     >
+                      <Target size={10} />
                       {field.label}
                       <button
                         onClick={() => toggleField(field)}
-                        className="ml-1 rounded-full p-0.5 hover:bg-teal-200"
+                        className="ml-1 rounded-full p-0.5 transition-colors hover:bg-teal-200/50"
                       >
                         <X size={10} />
                       </button>
@@ -547,6 +680,41 @@ export function IAAsignaturaTab({
           ))}
         </div>
       </div>
+      {/* --- DRAWER DE REFERENCIAS --- */}
+      <Drawer open={openIA} onOpenChange={setOpenIA}>
+        <DrawerContent className="fixed inset-x-0 bottom-0 mx-auto mb-4 flex h-[80vh] w-full max-w-2xl flex-col overflow-hidden rounded-2xl border bg-white shadow-2xl">
+          <div className="flex items-center justify-between border-b bg-slate-50/50 px-4 py-3">
+            <h2 className="text-xs font-bold tracking-wider text-slate-500 uppercase">
+              Referencias para la IA
+            </h2>
+            <button
+              onClick={() => setOpenIA(false)}
+              className="text-slate-400 hover:text-slate-600"
+            >
+              <X size={18} />
+            </button>
+          </div>
+
+          <div className="flex-1 overflow-y-auto p-4">
+            <ReferenciasParaIA
+              selectedArchivoIds={selectedArchivoIds}
+              selectedRepositorioIds={selectedRepositorioIds}
+              uploadedFiles={uploadedFiles}
+              onToggleArchivo={(id, checked) => {
+                setSelectedArchivoIds((prev) =>
+                  checked ? [...prev, id] : prev.filter((a) => a !== id),
+                )
+              }}
+              onToggleRepositorio={(id, checked) => {
+                setSelectedRepositorioIds((prev) =>
+                  checked ? [...prev, id] : prev.filter((r) => r !== id),
+                )
+              }}
+              onFilesChange={(files) => setUploadedFiles(files)}
+            />
+          </div>
+        </DrawerContent>
+      </Drawer>
     </div>
   )
 }

src/components/asignaturas/detalle/SaveAsignatura/ImprovementCardProps.tsx

@@ -0,0 +1,109 @@
+import { Check, Loader2 } from 'lucide-react'
+import { useState } from 'react'
+
+import type { IASugerencia } from '@/types/asignatura'
+
+import { Button } from '@/components/ui/button'
+import {
+  useUpdateAsignatura,
+  useSubject,
+  useUpdateSubjectRecommendation, // Importamos tu nuevo hook
+} from '@/data'
+
+interface ImprovementCardProps {
+  sug: IASugerencia
+  asignaturaId: string
+}
+
+export function ImprovementCard({ sug, asignaturaId }: ImprovementCardProps) {
+  const { data: asignatura } = useSubject(asignaturaId)
+  const updateAsignatura = useUpdateAsignatura()
+
+  // Hook para marcar en la base de datos que la sugerencia fue aceptada
+  const updateRecommendation = useUpdateSubjectRecommendation()
+
+  const [isApplying, setIsApplying] = useState(false)
+
+  const handleApply = async () => {
+    if (!asignatura?.datos) return
+
+    setIsApplying(true)
+    try {
+      // 1. Actualizar el contenido real de la asignatura (JSON datos)
+      const nuevosDatos = {
+        ...asignatura.datos,
+        [sug.campoKey]: sug.valorSugerido,
+      }
+
+      await updateAsignatura.mutateAsync({
+        asignaturaId: asignaturaId as any,
+        patch: {
+          datos: nuevosDatos,
+        } as any,
+      })
+
+      // 2. Marcar la sugerencia como "aplicada: true" en la tabla de mensajes
+      // Usamos los datos que vienen en el objeto 'sug'
+      await updateRecommendation.mutateAsync({
+        mensajeId: sug.messageId,
+        campoAfectado: sug.campoKey,
+      })
+
+      // Al terminar, React Query invalidará 'subject-messages'
+      // y la card pasará automáticamente al estado "Aplicado" (gris)
+    } catch (error) {
+      console.error('Error al aplicar mejora:', error)
+    } finally {
+      setIsApplying(false)
+    }
+  }
+
+  // --- ESTADO APLICADO ---
+  if (sug.aceptada) {
+    return (
+      <div className="flex flex-col rounded-xl border border-slate-100 bg-white p-3 shadow-sm">
+        <div className="mb-3 flex items-center justify-between gap-4">
+          <span className="text-sm font-bold text-slate-800">
+            {sug.campoNombre}
+          </span>
+          <div className="flex items-center gap-1.5 rounded-full border border-slate-100 bg-slate-50 px-3 py-1 text-xs font-medium text-slate-400">
+            <Check size={14} />
+            Aplicado
+          </div>
+        </div>
+        <div className="rounded-lg border border-teal-100 bg-teal-50/30 p-3 text-xs leading-relaxed text-slate-500">
+          "{sug.valorSugerido}"
+        </div>
+      </div>
+    )
+  }
+
+  // --- ESTADO PENDIENTE ---
+  return (
+    <div className="group flex flex-col rounded-xl border border-teal-100 bg-white p-3 shadow-sm transition-all hover:border-teal-200">
+      <div className="mb-3 flex items-center justify-between gap-4">
+        <span className="max-w-[150px] truncate rounded-lg border border-teal-100 bg-teal-50/50 px-2.5 py-1 text-[10px] font-bold tracking-wider text-teal-700 uppercase">
+          {sug.campoNombre}
+        </span>
+
+        <Button
+          size="sm"
+          disabled={isApplying || !asignatura}
+          className="h-8 w-auto bg-teal-600 px-4 text-xs font-semibold shadow-sm hover:bg-teal-700"
+          onClick={handleApply}
+        >
+          {isApplying ? (
+            <Loader2 size={14} className="mr-1.5 animate-spin" />
+          ) : (
+            <Check size={14} className="mr-1.5" />
+          )}
+          {isApplying ? 'Aplicando...' : 'Aplicar mejora'}
+        </Button>
+      </div>
+
+      <div className="line-clamp-4 rounded-lg border border-dashed border-slate-200 bg-slate-50/50 p-3 text-xs leading-relaxed text-slate-600 italic">
+        "{sug.valorSugerido}"
+      </div>
+    </div>
+  )
+}

src/data/api/ai.api.ts

@@ -359,3 +359,19 @@ export async function update_subject_conversation_status(
   if (error) throw error
   return data
 }
+
+export async function update_subject_conversation_name(
+  conversacionId: string,
+  nuevoNombre: string,
+) {
+  const supabase = supabaseBrowser()
+  const { data, error } = await supabase
+    .from('conversaciones_asignatura')
+    .update({ nombre: nuevoNombre }) // Asumiendo que la columna es 'titulo' según tu código previo, o cambia a 'nombre'
+    .eq('id', conversacionId)
+    .select()
+    .single()
+
+  if (error) throw error
+  return data
+}

src/data/hooks/useAI.ts

@@ -19,6 +19,7 @@ import {
   getConversationBySubject,
   ai_subject_chat_v2,
   create_subject_conversation,
+  update_subject_conversation_name,
 } from '../api/ai.api'
 import { supabaseBrowser } from '../supabase/client'
 
@@ -320,3 +321,17 @@ export function useUpdateSubjectConversationStatus() {
     },
   })
 }
+
+export function useUpdateSubjectConversationName() {
+  const qc = useQueryClient()
+
+  return useMutation({
+    mutationFn: (payload: { id: string; nombre: string }) =>
+      update_subject_conversation_name(payload.id, payload.nombre),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['conversation-by-subject'] })
+      // También invalidamos los mensajes si el título se muestra en la cabecera
+      qc.invalidateQueries({ queryKey: ['subject-messages'] })
+    },
+  })
+}