refactor: rename Materia to Asignatura across the codebase
- Updated type definitions and interfaces to replace 'Materia' with 'Asignatura'. - Refactored components and routes to reflect the new naming convention. - Adjusted related types and constants for consistency. - Removed the old Materia type definition and added Asignatura type definition. - Ensured all references in UI components and logic are updated accordingly. fix #50
This commit is contained in:
409
src/components/asignaturas/detalle/IAAsignaturaTab.tsx
Normal file
409
src/components/asignaturas/detalle/IAAsignaturaTab.tsx
Normal file
@@ -0,0 +1,409 @@
|
||||
import { useRouterState } from '@tanstack/react-router'
|
||||
import {
|
||||
Sparkles,
|
||||
Send,
|
||||
Target,
|
||||
UserCheck,
|
||||
Lightbulb,
|
||||
FileText,
|
||||
GraduationCap,
|
||||
BookOpen,
|
||||
Check,
|
||||
X,
|
||||
} from 'lucide-react'
|
||||
import { useState, useEffect, useRef, useMemo } from 'react'
|
||||
|
||||
import type {
|
||||
IAMessage,
|
||||
IASugerencia,
|
||||
CampoEstructura,
|
||||
} 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 { 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
|
||||
value: string
|
||||
}
|
||||
|
||||
interface IAAsignaturaTabProps {
|
||||
campos: Array<CampoEstructura>
|
||||
datosGenerales: Record<string, any>
|
||||
messages: Array<IAMessage>
|
||||
onSendMessage: (message: string, campoId?: string) => void
|
||||
onAcceptSuggestion: (sugerencia: IASugerencia) => void
|
||||
onRejectSuggestion: (messageId: string) => void
|
||||
}
|
||||
|
||||
export function IAAsignaturaTab({
|
||||
campos,
|
||||
datosGenerales,
|
||||
messages,
|
||||
onSendMessage,
|
||||
onAcceptSuggestion,
|
||||
onRejectSuggestion,
|
||||
}: IAAsignaturaTabProps) {
|
||||
const routerState = useRouterState()
|
||||
|
||||
// ESTADOS PRINCIPALES (Igual que en Planes)
|
||||
const [input, setInput] = useState('')
|
||||
const [selectedFields, setSelectedFields] = useState<Array<SelectedField>>([])
|
||||
const [showSuggestions, setShowSuggestions] = useState(false)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const scrollRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
// 1. Transformar datos de la asignatura para el menú
|
||||
const availableFields = useMemo(() => {
|
||||
// Extraemos las claves directamente del objeto datosGenerales
|
||||
// ["nombre", "descripcion", "perfil_de_egreso", "fines_de_aprendizaje_o_formacion"]
|
||||
if (!datosGenerales.datos) return []
|
||||
return Object.keys(datosGenerales.datos).map((key) => {
|
||||
// Buscamos si existe un nombre amigable en la estructura de campos
|
||||
const estructuraCampo = campos.find((c) => c.id === key)
|
||||
|
||||
// Si existe en 'campos', usamos su nombre; si no, formateamos la clave (ej: perfil_de_egreso -> Perfil De Egreso)
|
||||
const labelAmigable =
|
||||
estructuraCampo?.nombre ||
|
||||
key.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())
|
||||
|
||||
return {
|
||||
key: key,
|
||||
label: labelAmigable,
|
||||
value: String(datosGenerales[key] || ''),
|
||||
}
|
||||
})
|
||||
}, [campos, datosGenerales])
|
||||
|
||||
// 2. Manejar el estado inicial si viene de "Datos de Asignatura" (Prefill)
|
||||
|
||||
useEffect(() => {
|
||||
const state = routerState.location.state as any
|
||||
|
||||
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()
|
||||
}
|
||||
|
||||
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)
|
||||
|
||||
setInput('')
|
||||
setSelectedFields([])
|
||||
|
||||
// Simular carga local para el feedback visual
|
||||
setTimeout(() => setIsLoading(false), 1200)
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
{/* 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) => (
|
||||
<div
|
||||
key={msg.id}
|
||||
className={`flex ${msg.role === 'user' ? 'flex-row-reverse' : 'flex-row'} items-start gap-3`}
|
||||
>
|
||||
<Avatar
|
||||
className={`h-8 w-8 shrink-0 border ${msg.role === 'assistant' ? 'bg-teal-50' : 'bg-slate-200'}`}
|
||||
>
|
||||
<AvatarFallback className="text-[10px]">
|
||||
{msg.role === 'assistant' ? (
|
||||
<Sparkles size={14} className="text-teal-600" />
|
||||
) : (
|
||||
<UserCheck size={14} />
|
||||
)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div
|
||||
className={`flex max-w-[85%] flex-col ${msg.role === 'user' ? 'items-end' : 'items-start'}`}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'rounded-2xl p-3 text-sm whitespace-pre-wrap shadow-sm',
|
||||
msg.role === 'user'
|
||||
? 'rounded-tr-none bg-teal-600 text-white'
|
||||
: 'rounded-tl-none border bg-white text-slate-700',
|
||||
)}
|
||||
>
|
||||
{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}
|
||||
</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}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
onAcceptSuggestion(msg.sugerencia!)
|
||||
}
|
||||
className="h-8 bg-teal-600 text-xs hover:bg-teal-700"
|
||||
>
|
||||
<Check size={14} className="mr-1" /> Aplicar
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => onRejectSuggestion(msg.id)}
|
||||
className="h-8 text-xs"
|
||||
>
|
||||
<X size={14} className="mr-1" /> Descartar
|
||||
</Button>
|
||||
</div>
|
||||
</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]" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
{/* INPUT FIJO AL FONDO */}
|
||||
<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>
|
||||
<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"
|
||||
>
|
||||
<span className="text-slate-700 group-hover:text-teal-700">
|
||||
{field.label}
|
||||
</span>
|
||||
{selectedFields.find((f) => f.key === field.key) && (
|
||||
<Check size={14} className="text-teal-600" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</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) => (
|
||||
<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"
|
||||
>
|
||||
<span className="opacity-70">Campo:</span> {field.label}
|
||||
<button
|
||||
onClick={() => toggleField(field)}
|
||||
className="ml-1 rounded-full p-0.5 transition-colors hover:bg-teal-200"
|
||||
>
|
||||
<X size={10} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-end gap-2">
|
||||
<Textarea
|
||||
value={input}
|
||||
onChange={handleInputChange}
|
||||
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"
|
||||
/>
|
||||
<Button
|
||||
onClick={() => handleSend()}
|
||||
disabled={
|
||||
(!input.trim() && selectedFields.length === 0) || isLoading
|
||||
}
|
||||
size="icon"
|
||||
className="mb-1 h-9 w-9 shrink-0 bg-teal-600 hover:bg-teal-700"
|
||||
>
|
||||
<Send size={16} className="text-white" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PANEL LATERAL (ACCIONES RÁPIDAS) */}
|
||||
<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>
|
||||
<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"
|
||||
>
|
||||
<div className="rounded-lg bg-slate-100 p-2 text-slate-500 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>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user