Guillermo.Arrieta/acad-ia-2
1
0
Fork 0
Code Issues 13 Pull Requests Actions Wiki Activity

Redirección de IA #2 terminado

Browse Source
This commit is contained in:
Roberto Silva Corona
2026-01-20 12:10:45 -06:00
parent 3399889cef
commit 25acb9aeaa
2 changed files with 221 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/routes/planes/$planId/_detalle/datos.tsx
View File

@@ -1,12 +1,13 @@
import { usePlan } from '@/data'
import { createFileRoute } from '@tanstack/react-router'
import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { Pencil, Check, X, Sparkles, AlertCircle } from 'lucide-react'
import { useState, useEffect } from 'react'
import type { DatosGeneralesField } from '@/types/plan'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
import { Pencil, Check, X, Sparkles, AlertCircle } from 'lucide-react'
//import { toast } from 'sonner' // Asegúrate de tener sonner instalado o quita la línea
import { usePlan } from '@/data'
// import { toast } from 'sonner' // Asegúrate de tener sonner instalado o quita la línea
export const Route = createFileRoute('/planes/$planId/_detalle/datos')({
component: DatosGeneralesPage,
})
@@ -18,9 +19,9 @@ const formatLabel = (key: string) => {
function DatosGeneralesPage() {
const { data } = usePlan('0e0aea4d-b8b4-4e75-8279-6224c3ac769f')
const navigate = useNavigate()
// Inicializamos campos como un arreglo vacío
const [campos, setCampos] = useState<DatosGeneralesField[]>([])
const [campos, setCampos] = useState<Array<DatosGeneralesField>>([])
const [editingId, setEditingId] = useState<string | null>(null)
const [editValue, setEditValue] = useState('')
@@ -30,7 +31,7 @@ function DatosGeneralesPage() {
const sourceData = data?.datos
if (sourceData && typeof sourceData === 'object') {
const datosTransformados: DatosGeneralesField[] = Object.entries(
const datosTransformados: Array<DatosGeneralesField> = Object.entries(
sourceData,
).map(([key, value], index) => ({
id: (index + 1).toString(),
@@ -43,6 +44,7 @@ function DatosGeneralesPage() {
setCampos(datosTransformados)
}
console.log(data)
}, [data])
// 3. Manejadores de acciones (Ahora como funciones locales)
@@ -63,14 +65,20 @@ function DatosGeneralesPage() {
)
setEditingId(null)
setEditValue('')
//toast.success('Cambios guardados localmente')
// toast.success('Cambios guardados localmente')
}
const handleIARequest = (id: string) => {
//toast.info('La IA está analizando el campo ' + id)
// Aquí conectarías con tu endpoint de IA
const handleIARequest = (descripcion: string) => {
navigate({
to: '/planes/$planId/iaplan',
params: {
planId: '1', // o dinámico
},
state: {
prefill: descripcion,
} as any,
})
}
return (
<div className="animate-in fade-in container mx-auto px-6 py-6 duration-500">
<div className="mb-6">
@@ -112,7 +120,7 @@ function DatosGeneralesPage() {
variant="ghost"
size="icon"
className="h-8 w-8 text-teal-600"
onClick={() => handleIARequest(campo.id)}
onClick={() => handleIARequest(campo.value)}
>
<Sparkles size={14} />
</Button>

270
src/routes/planes/$planId/_detalle/iaplan.tsx
View File

@@ -1,23 +1,23 @@
import { createFileRoute } from '@tanstack/react-router'
import { useState, useEffect, useRef } from 'react'
import { createFileRoute, useRouterState } from '@tanstack/react-router'
import {
Sparkles,
Send,
Paperclip,
Target,
UserCheck,
Lightbulb,
FileText,
Users,
GraduationCap,
BookOpen,
Check,
X,
} from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
import { ScrollArea } from '@/components/ui/scroll-area'
import { useState, useEffect, useRef, useMemo } from 'react'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Textarea } from '@/components/ui/textarea'
import { usePlan } from '@/data/hooks/usePlans'
const PRESETS = [
{
@@ -46,100 +46,154 @@ const PRESETS = [
},
]
// --- Tipado y Helpers ---
interface SelectedField {
key: string
label: string
value: string
}
const formatLabel = (key: string) => {
const result = key.replace(/_/g, ' ')
return result.charAt(0).toUpperCase() + result.slice(1)
}
export const Route = createFileRoute('/planes/$planId/_detalle/iaplan')({
component: RouteComponent,
})
interface Message {
id: string
role: 'user' | 'assistant'
content: string
}
function RouteComponent() {
const [messages, setMessages] = useState<Message[]>([
const { planId } = Route.useParams()
// Usamos el ID dinámico del plan o el hardcoded según tu necesidad
const { data } = usePlan('0e0aea4d-b8b4-4e75-8279-6224c3ac769f')
const routerState = useRouterState()
// ESTADOS PRINCIPALES
const [messages, setMessages] = useState<Array<any>>([
{
id: '1',
role: 'assistant',
content: '¡Hola! Soy tu asistente de IA. ¿En qué puedo ayudarte hoy?',
content:
'¡Hola! Soy tu asistente de IA. ¿Qué campos deseas mejorar? Puedes escribir ":" para seleccionar uno.',
},
])
const [input, setInput] = useState('')
const [selectedFields, setSelectedFields] = useState<Array<SelectedField>>([])
const [showSuggestions, setShowSuggestions] = useState(false)
const [isLoading, setIsLoading] = useState(false)
const [pendingSuggestion, setPendingSuggestion] = useState<{
field: string
text: string
} | null>(null)
const [pendingSuggestion, setPendingSuggestion] = useState<any>(null)
const scrollRef = useRef<HTMLDivElement>(null)
// Función de scroll corregida para Radix
const scrollToBottom = () => {
const viewport = scrollRef.current?.querySelector(
'[data-radix-scroll-area-viewport]',
)
if (viewport) {
viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' })
}
}
// 1. Transformar datos de la API para el menú de selección
const availableFields = useMemo(() => {
if (!data?.datos) return []
return Object.entries(data.datos).map(([key, value]) => ({
key,
label: formatLabel(key),
value: String(value || ''),
}))
}, [data])
// 2. Manejar el estado inicial si viene de "Datos Generales"
useEffect(() => {
const timer = setTimeout(scrollToBottom, 100)
return () => clearTimeout(timer)
}, [messages, isLoading])
const state = routerState.location.state as any
if (state?.prefill && availableFields.length > 0) {
// Intentamos encontrar qué campo es por su valor o si mandaste el fieldKey
const field = availableFields.find(
(f) => f.value === state.prefill || f.key === state.fieldKey,
)
if (field && !selectedFields.find((sf) => sf.key === field.key)) {
setSelectedFields([field])
}
setInput(`Mejora este campo: `)
}
}, [availableFields])
const handleSend = async (prompt?: string) => {
const messageText = prompt || input
if (!messageText.trim()) return
// 3. Lógica para el disparador ":"
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const val = e.target.value
setInput(val)
if (val.endsWith(':')) {
setShowSuggestions(true)
} else {
setShowSuggestions(false)
}
}
const userMessage: Message = {
const toggleField = (field: SelectedField) => {
setSelectedFields((prev) =>
prev.find((f) => f.key === field.key)
? prev.filter((f) => f.key !== field.key)
: [...prev, field],
)
if (input.endsWith(':')) setInput(input.slice(0, -1))
setShowSuggestions(false)
}
const handleSend = async (promptOverride?: string) => {
const textToSend = promptOverride || input
if (!textToSend.trim() && selectedFields.length === 0) return
const userMsg = {
id: Date.now().toString(),
role: 'user',
content: messageText,
content: textToSend,
}
setMessages((prev) => [...prev, userMessage])
setMessages((prev) => [...prev, userMsg])
setInput('')
setIsLoading(true)
// Aquí simularías la llamada a la API enviando 'selectedFields' como contexto
setTimeout(() => {
const mockText =
'He analizado tu solicitud. Basado en los estándares actuales, sugiero fortalecer las competencias técnicas...'
const aiResponse: Message = {
id: (Date.now() + 1).toString(),
'Sugerencia generada basada en los campos seleccionados...'
setMessages((prev) => [
...prev,
{
id: Date.now().toString(),
role: 'assistant',
content: `He analizado tu solicitud. Aquí está mi sugerencia:\n\n"${mockText}"\n\n¿Te gustaría aplicar este texto al plan?`,
}
setMessages((prev) => [...prev, aiResponse])
setPendingSuggestion({ field: 'seccion-plan', text: mockText })
content: `He analizado ${selectedFields.length > 0 ? selectedFields.map((f) => f.label).join(', ') : 'tu solicitud'}. Aquí tienes una propuesta:\n\n${mockText}`,
},
])
setPendingSuggestion({ text: mockText })
setIsLoading(false)
}, 1200)
}
return (
/* CAMBIO CLAVE 1:
Aseguramos que el contenedor padre ocupe el espacio disponible pero NO MÁS.
'max-h-full' y 'flex-1' evitan que el chat empuje el layout hacia abajo.
*/
<div className="flex h-[calc(100vh-160px)] max-h-[calc(100vh-160px)] w-full gap-6 overflow-hidden p-4">
{/* PANEL DE CHAT */}
{/* 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">
{/* Header Fijo (shrink-0 es vital para que no se aplaste) */}
<div className="flex shrink-0 items-center justify-between border-b bg-white p-4">
<div className="flex flex-col">
<h3 className="flex items-center gap-2 text-sm font-bold text-slate-700">
<Sparkles className="h-4 w-4 text-teal-600" />
Asistente de Diseño Curricular
</h3>
<p className="text-left text-[11px] text-slate-500">
Optimizado con IA
</p>
{/* NUEVO: Barra superior de campos seleccionados */}
<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 text-slate-400 uppercase">
Campos a mejorar:
</span>
{selectedFields.map((field) => (
<div
key={field.key}
className="animate-in zoom-in-95 flex items-center gap-1.5 rounded-lg border border-teal-100 bg-teal-50 px-2 py-1 text-xs font-medium text-teal-700"
>
{field.label}
<button
onClick={() => toggleField(field)}
className="hover:text-red-500"
>
<X size={12} />
</button>
</div>
))}
{selectedFields.length === 0 && (
<span className="text-xs text-slate-400 italic">
Escribe ":" para añadir campos
</span>
)}
</div>
</div>
{/* CAMBIO CLAVE 2:
El ScrollArea debe tener 'flex-1' y 'h-full'.
Esto obliga al componente a colapsar su altura y activar el scroll.
*/}
{/* 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">
@@ -162,16 +216,11 @@ function RouteComponent() {
<div
className={`flex max-w-[85%] flex-col ${msg.role === 'user' ? 'items-end' : 'items-start'}`}
>
{msg.role === 'assistant' && (
<span className="mb-1 ml-1 text-[9px] font-bold text-teal-700 uppercase">
Asistente IA
</span>
)}
<div
className={`rounded-2xl p-3 text-left text-sm whitespace-pre-wrap shadow-sm ${
className={`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 border-slate-200 bg-white text-slate-700'
: 'rounded-tl-none border bg-white text-slate-700'
}`}
>
{msg.content}
@@ -189,9 +238,9 @@ function RouteComponent() {
</div>
</ScrollArea>
{/* Barra de aplicación flotante (dentro del contenedor relativo del scroll) */}
{/* Botones flotantes de aplicación */}
{pendingSuggestion && !isLoading && (
<div className="animate-in fade-in slide-in-from-bottom-2 absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-2 rounded-full border bg-white p-1.5 shadow-2xl">
<div className="animate-in fade-in slide-in-from-bottom-2 absolute bottom-4 left-1/2 z-10 flex -translate-x-1/2 gap-2 rounded-full border bg-white p-1.5 shadow-2xl">
<Button
variant="ghost"
size="sm"
@@ -202,7 +251,6 @@ function RouteComponent() {
</Button>
<Button
size="sm"
onClick={() => {}}
className="h-8 rounded-full bg-teal-600 text-xs text-white hover:bg-teal-700"
>
<Check className="mr-1 h-3 w-3" /> Aplicar cambios
@@ -211,27 +259,82 @@ function RouteComponent() {
)}
</div>
{/* INPUT FIJO AL FONDO */}
{/* INPUT FIJO AL FONDO CON SUGERENCIAS : */}
{/* INPUT FIJO AL FONDO CON SUGERENCIAS : */}
<div className="shrink-0 border-t bg-white p-4">
<div className="relative mx-auto max-w-4xl">
<div className="flex items-end 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">
{/* MENÚ DE SUGERENCIAS FLOTANTE (Se mantiene igual) */}
{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 para IA
</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 TRANSFORMADO */}
<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">
{/* 1. Visualización de campos dentro del input (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>
)}
{/* 2. Área de escritura */}
<div className="flex items-end gap-2">
<Textarea
value={input}
onChange={(e) => setInput(e.target.value)}
onChange={handleInputChange}
onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault()
handleSend()
}
}}
placeholder="Escribe tu solicitud aquí..."
className="max-h-[120px] min-h-[40px] flex-1 resize-none border-none bg-transparent py-2 text-left text-sm focus-visible:ring-0"
placeholder={
selectedFields.length > 0
? 'Escribe instrucciones adicionales...'
: '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() || isLoading}
disabled={
(!input.trim() && selectedFields.length === 0) || isLoading
}
size="icon"
className="h-9 w-9 shrink-0 bg-teal-600 hover:bg-teal-700"
className="mb-1 h-9 w-9 shrink-0 bg-teal-600 hover:bg-teal-700"
>
<Send size={16} className="text-white" />
</Button>
@@ -239,8 +342,9 @@ function RouteComponent() {
</div>
</div>
</div>
</div>
{/* PANEL LATERAL */}
{/* PANEL LATERAL (PRESETS) - SE MANTIENE COMO LO TENÍAS */}
<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
@@ -265,7 +369,3 @@ function RouteComponent() {
</div>
)
}
function generateMockResponse(prompt: string) {
return 'Mock response content...'
}