Redirección de IA #2 terminado

src/routes/planes/$planId/_detalle/datos.tsx

@@ -1,12 +1,13 @@
-import { usePlan } from '@/data'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
-import { createFileRoute } 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 { 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)
@@ -66,11 +68,17 @@ function DatosGeneralesPage() {
     // toast.success('Cambios guardados localmente')
   }
 
-  const handleIARequest = (id: string) => {
+  const handleIARequest = (descripcion: string) => {
-    //toast.info('La IA está analizando el campo ' + id)
+    navigate({
-    // Aquí conectarías con tu endpoint de IA
+      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>

src/routes/planes/$planId/_detalle/iaplan.tsx

@@ -1,23 +1,23 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, useRouterState } from '@tanstack/react-router'
-import { useState, useEffect, useRef } from 'react'
 import {
   Sparkles,
   Send,
-  Paperclip,
   Target,
   UserCheck,
   Lightbulb,
   FileText,
-  Users,
   GraduationCap,
   BookOpen,
   Check,
   X,
 } from 'lucide-react'
-import { Button } from '@/components/ui/button'
+import { useState, useEffect, useRef, useMemo } from 'react'
-import { Textarea } from '@/components/ui/textarea'
+
-import { ScrollArea } from '@/components/ui/scroll-area'
 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<{
+  const [pendingSuggestion, setPendingSuggestion] = useState<any>(null)
-    field: string
-    text: string
-  } | null>(null)
 
   const scrollRef = useRef<HTMLDivElement>(null)
 
-  // Función de scroll corregida para Radix
+  // 1. Transformar datos de la API para el menú de selección
-  const scrollToBottom = () => {
+  const availableFields = useMemo(() => {
-    const viewport = scrollRef.current?.querySelector(
+    if (!data?.datos) return []
-      '[data-radix-scroll-area-viewport]',
+    return Object.entries(data.datos).map(([key, value]) => ({
-    )
+      key,
-    if (viewport) {
+      label: formatLabel(key),
-      viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' })
+      value: String(value || ''),
-    }
+    }))
-  }
+  }, [data])
 
+  // 2. Manejar el estado inicial si viene de "Datos Generales"
   useEffect(() => {
-    const timer = setTimeout(scrollToBottom, 100)
+    const state = routerState.location.state as any
-    return () => clearTimeout(timer)
+    if (state?.prefill && availableFields.length > 0) {
-  }, [messages, isLoading])
+      // 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) => {
+  // 3. Lógica para el disparador ":"
-    const messageText = prompt || input
+  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    if (!messageText.trim()) return
+    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...'
+        'Sugerencia generada basada en los campos seleccionados...'
-      const aiResponse: Message = {
+      setMessages((prev) => [
-        id: (Date.now() + 1).toString(),
+        ...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?`,
+          content: `He analizado ${selectedFields.length > 0 ? selectedFields.map((f) => f.label).join(', ') : 'tu solicitud'}. Aquí tienes una propuesta:\n\n${mockText}`,
-      }
+        },
-      setMessages((prev) => [...prev, aiResponse])
+      ])
-      setPendingSuggestion({ field: 'seccion-plan', text: 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) */}
+        {/* NUEVO: Barra superior de campos seleccionados */}
-        <div className="flex shrink-0 items-center justify-between border-b bg-white p-4">
+        <div className="shrink-0 border-b bg-white p-3">
-          <div className="flex flex-col">
+          <div className="flex flex-wrap items-center gap-2">
-            <h3 className="flex items-center gap-2 text-sm font-bold text-slate-700">
+            <span className="text-[10px] font-bold text-slate-400 uppercase">
-              <Sparkles className="h-4 w-4 text-teal-600" />
+              Campos a mejorar:
-              Asistente de Diseño Curricular
+            </span>
-            </h3>
+            {selectedFields.map((field) => (
-            <p className="text-left text-[11px] text-slate-500">
+              <div
-              Optimizado con IA
+                key={field.key}
-            </p>
+                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: 
+        {/* CONTENIDO DEL CHAT */}
-          El ScrollArea debe tener 'flex-1' y 'h-full'. 
-          Esto obliga al componente a colapsar su altura y activar el scroll.
-        */}
         <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í..."
+                  placeholder={
-                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"
+                    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...'
-}