Que pueda generar el contenido temático Y el sistema de evaluación fix #174

fix #163 fix # 173
2026-03-12 16:04:53 -06:00
parent 577daaff03
commit a55910c226
3 changed files with 177 additions and 35 deletions
--- a/src/components/asignaturas/detalle/IAAsignaturaTab.tsx
+++ b/src/components/asignaturas/detalle/IAAsignaturaTab.tsx
@@ -131,15 +131,45 @@ export function IAAsignaturaTab({
  }, [todasConversaciones])

  const availableFields = useMemo(() => {
-    if (!datosGenerales?.datos) return []
+    // 1. Obtenemos los campos dinámicos de la DB
+    const dynamicFields = datosGenerales?.datos
+      ? Object.keys(datosGenerales.datos).map((key) => {
          const estructuraProps =
            datosGenerales?.estructuras_asignatura?.definicion?.properties || {}
-    return Object.keys(datosGenerales.datos).map((key) => ({
+          return {
            key,
            label:
-        estructuraProps[key]?.title || key.replace(/_/g, ' ').toUpperCase(),
+              estructuraProps[key]?.title ||
+              key.replace(/_/g, ' ').toUpperCase(),
            value: String(datosGenerales.datos[key] || ''),
-    }))
+          }
+        })
+      : []
+
+    // 2. Definimos tus campos manuales (hardcoded)
+    const hardcodedFields = [
+      {
+        key: 'contenido_tematico',
+        label: 'Contenido temático',
+        value: '', // Puedes dejarlo vacío o buscarlo en datosGenerales si existiera
+      },
+      {
+        key: 'criterios_de_evaluacion',
+        label: 'Criterios de evaluación',
+        value: '',
+      },
+    ]
+
+    // 3. Unimos ambos, filtrando duplicados por si acaso el backend ya los envía
+    const combined = [...dynamicFields]
+
+    hardcodedFields.forEach((hf) => {
+      if (!combined.some((f) => f.key === hf.key)) {
+        combined.push(hf)
+      }
+    })
+
+    return combined
  }, [datosGenerales])

  // --- PROCESAMIENTO DE MENSAJES ---
@@ -269,7 +299,7 @@ export function IAAsignaturaTab({
      }

      setInput('')
-      setSelectedFields([])
+      // setSelectedFields([])

      // Invalidamos la lista de conversaciones para que el nuevo chat aparezca en el historial (panel izquierdo)
      queryClient.invalidateQueries({
@@ -511,6 +541,7 @@ export function IAAsignaturaTab({
                    >
                      {/* Texto del mensaje principal */}
                      <div
+                        style={{ whiteSpace: 'pre-line' }}
                        className={cn(
                          'text-sm leading-relaxed',
                          msg.role === 'assistant' && 'p-4',
@@ -532,6 +563,18 @@ export function IAAsignaturaTab({
                                key={sug.id}
                                sug={sug}
                                asignaturaId={asignaturaId}
+                                onApplied={(campoFinalizado) => {
+                                  // Filtramos el array para conservar todos MENOS el que se aplicó
+                                  console.log(campoFinalizado)
+                                  console.log('campos:', selectedFields)
+
+                                  setSelectedFields((prev) =>
+                                    prev.filter((fieldObj) => {
+                                      // Accedemos a .key porque fieldObj es { key: "...", label: "..." }
+                                      return fieldObj.key !== campoFinalizado
+                                    }),
+                                  )
+                                }}
                              />
                            ))}
                          </div>
--- a/src/components/asignaturas/detalle/SaveAsignatura/ImprovementCardProps.tsx
+++ b/src/components/asignaturas/detalle/SaveAsignatura/ImprovementCardProps.tsx
@@ -1,4 +1,4 @@
-import { Check, Loader2 } from 'lucide-react'
+import { Check, Loader2, BookOpen, Clock, ListChecks } from 'lucide-react'
 import { useState } from 'react'

 import type { IASugerencia } from '@/types/asignatura'
@@ -7,50 +7,65 @@ import { Button } from '@/components/ui/button'
 import {
  useUpdateAsignatura,
  useSubject,
-  useUpdateSubjectRecommendation, // Importamos tu nuevo hook
+  useUpdateSubjectRecommendation,
 } from '@/data'
+import { cn } from '@/lib/utils'

 interface ImprovementCardProps {
  sug: IASugerencia
  asignaturaId: string
+  onApplied: (campoKey: string) => void
 }

-export function ImprovementCard({ sug, asignaturaId }: ImprovementCardProps) {
+export function ImprovementCard({
+  sug,
+  asignaturaId,
+  onApplied,
+}: 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
+    if (!asignatura) return

    setIsApplying(true)
    try {
-      // 1. Actualizar el contenido real de la asignatura (JSON datos)
-      const nuevosDatos = {
+      // 1. Identificar a qué columna debe ir el guardado
+      let patchData = {}
+
+      if (sug.campoKey === 'contenido_tematico') {
+        // Se guarda directamente en la columna contenido_tematico
+        patchData = { contenido_tematico: sug.valorSugerido }
+      } else if (sug.campoKey === 'criterios_de_evaluacion') {
+        // Se guarda directamente en la columna criterios_de_evaluacion
+        patchData = { criterios_de_evaluacion: sug.valorSugerido }
+      } else {
+        // Otros campos (ciclo, fines, etc.) se siguen guardando en el JSON de la columna 'datos'
+        patchData = {
+          datos: {
            ...asignatura.datos,
            [sug.campoKey]: sug.valorSugerido,
+          },
+        }
      }

+      // 2. Ejecutar la actualización con la estructura correcta
      await updateAsignatura.mutateAsync({
        asignaturaId: asignaturaId as any,
-        patch: {
-          datos: nuevosDatos,
-        } as any,
+        patch: patchData as any,
      })

-      // 2. Marcar la sugerencia como "aplicada: true" en la tabla de mensajes
-      // Usamos los datos que vienen en el objeto 'sug'
+      // 3. Marcar la recomendación como aplicada
      await updateRecommendation.mutateAsync({
        mensajeId: sug.messageId,
        campoAfectado: sug.campoKey,
      })
+      console.log(sug.campoKey)

-      // Al terminar, React Query invalidará 'subject-messages'
-      // y la card pasará automáticamente al estado "Aplicado" (gris)
+      onApplied(sug.campoKey)
    } catch (error) {
      console.error('Error al aplicar mejora:', error)
    } finally {
@@ -58,10 +73,89 @@ export function ImprovementCard({ sug, asignaturaId }: ImprovementCardProps) {
    }
  }

+  // --- FUNCIÓN PARA RENDERIZAR EL CONTENIDO DE FORMA SEGURA ---
+  const renderContenido = (valor: any) => {
+    // Si no es un array, es texto simple
+    if (!Array.isArray(valor)) {
+      return <p className="italic">"{String(valor)}"</p>
+    }
+
+    // --- CASO 1: CONTENIDO TEMÁTICO (Detectamos si el primer objeto tiene 'unidad') ---
+    if (valor[0]?.hasOwnProperty('unidad')) {
+      return (
+        <div className="space-y-3">
+          {valor.map((u: any, idx: number) => (
+            <div
+              key={idx}
+              className="rounded-md border border-teal-100 bg-white p-2 shadow-sm"
+            >
+              <div className="mb-1 flex items-center gap-2 border-b border-slate-50 pb-1 text-[11px] font-bold text-teal-800">
+                <BookOpen size={12} /> Unidad {u.unidad}: {u.titulo}
+              </div>
+              <ul className="space-y-1">
+                {u.temas?.map((t: any, tidx: number) => (
+                  <li
+                    key={tidx}
+                    className="flex items-start justify-between gap-2 text-[10px] text-slate-600"
+                  >
+                    <span className="leading-tight">• {t.nombre}</span>
+                    <span className="flex shrink-0 items-center gap-0.5 font-mono text-slate-400">
+                      <Clock size={10} /> {t.horasEstimadas}h
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      )
+    }
+
+    // --- CASO 2: CRITERIOS DE EVALUACIÓN (Detectamos si tiene 'criterio') ---
+    if (valor[0]?.hasOwnProperty('criterio')) {
+      return (
+        <div className="space-y-2">
+          <div className="mb-1 flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase">
+            <ListChecks size={12} /> Desglose de evaluación
+          </div>
+          {valor.map((c: any, idx: number) => (
+            <div
+              key={idx}
+              className="flex items-center justify-between gap-3 rounded-md border border-slate-100 bg-white p-2 shadow-sm"
+            >
+              <span className="text-[11px] leading-tight text-slate-700">
+                {c.criterio}
+              </span>
+              <div className="flex shrink-0 items-center gap-1 rounded-full border border-orange-100 bg-orange-50 px-2 py-0.5 text-[10px] font-bold text-orange-600">
+                {c.porcentaje}%
+              </div>
+            </div>
+          ))}
+          {/* Opcional: Suma total para verificar que de 100% */}
+          <div className="pt-1 text-right text-[9px] font-medium text-slate-400">
+            Total:{' '}
+            {valor.reduce(
+              (acc: number, curr: any) => acc + (curr.porcentaje || 0),
+              0,
+            )}
+            %
+          </div>
+        </div>
+      )
+    }
+
+    // Caso por defecto (Array genérico)
+    return (
+      <pre className="text-[10px]">
+        {/* JSON.stringify(valor, null, 2)*/ 'hola'}
+      </pre>
+    )
+  }
+
  // --- 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="flex flex-col rounded-xl border border-slate-100 bg-white p-3 opacity-80 shadow-sm">
        <div className="mb-3 flex items-center justify-between gap-4">
          <span className="text-sm font-bold text-slate-800">
            {sug.campoNombre}
@@ -72,7 +166,7 @@ export function ImprovementCard({ sug, asignaturaId }: ImprovementCardProps) {
          </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}"
+          {renderContenido(sug.valorSugerido)}
        </div>
      </div>
    )
@@ -101,8 +195,13 @@ export function ImprovementCard({ sug, asignaturaId }: ImprovementCardProps) {
        </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
+        className={cn(
+          'rounded-lg border border-dashed border-slate-200 bg-slate-50/50 p-3 text-xs leading-relaxed text-slate-600',
+          !Array.isArray(sug.valorSugerido) && 'line-clamp-4 italic',
+        )}
+      >
+        {renderContenido(sug.valorSugerido)}
      </div>
    </div>
  )
--- a/src/routes/planes/$planId/_detalle/iaplan.tsx
+++ b/src/routes/planes/$planId/_detalle/iaplan.tsx
@@ -227,7 +227,7 @@ function RouteComponent() {
    scrollToBottom()
  }, [chatMessages, isLoading])

-  useEffect(() => {
+  /* useEffect(() => {
    // Verificamos cuáles campos de la lista "selectedFields" ya no están presentes en el texto del input
    const camposActualizados = selectedFields.filter((field) =>
      input.includes(field.label),
@@ -237,7 +237,7 @@ function RouteComponent() {
    if (camposActualizados.length !== selectedFields.length) {
      setSelectedFields(camposActualizados)
    }
-  }, [input, selectedFields])
+  }, [input, selectedFields]) */

  useEffect(() => {
    if (isLoadingConv || isSending) return
@@ -297,7 +297,7 @@ function RouteComponent() {
      },
    ])
    setInput('')
-    setSelectedFields([])
+    // setSelectedFields([])
  }

  const archiveChat = (e: React.MouseEvent, id: string) => {
@@ -405,7 +405,7 @@ function RouteComponent() {
    setIsSending(true)
    setOptimisticMessage(finalContent)
    setInput('')
-    setSelectedFields([])
+    // setSelectedFields([])

    try {
      const payload = {