Merge pull request 'Que haga la cuenta de cuántas referencias llevas #99' (#103) from issue/99-que-haga-la-cuenta-de-cuntas-referencias-llevas into main

Reviewed-on: #103

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

@@ -78,7 +78,6 @@ function RouteComponent() {
   >([])
   const [uploadedFiles, setUploadedFiles] = useState<Array<UploadedFile>>([])
 
-  // ESTADOS PRINCIPALES
   const [messages, setMessages] = useState<Array<any>>([
     {
       id: '1',
@@ -249,9 +248,13 @@ function RouteComponent() {
       content: finalPrompt,
     }
 
-    setMessages((prev) => [...prev, userMsg])
+    // setMessages((prev) => [...prev, userMsg])
     setInput('')
     setIsLoading(true)
+    // setSelectedFields([])
+    setSelectedArchivoIds([])
+    setSelectedRepositorioIds([])
+    setUploadedFiles([])
 
     setTimeout(() => {
       const suggestions = selectedFields.map((field) => ({
@@ -274,6 +277,16 @@ function RouteComponent() {
       setIsLoading(false)
     }, 1200)
   }
+
+  // ... debajo de tus otros hooks
+  const totalReferencias = useMemo(() => {
+    return (
+      selectedArchivoIds.length +
+      selectedRepositorioIds.length +
+      uploadedFiles.length
+    )
+  }, [selectedArchivoIds, selectedRepositorioIds, uploadedFiles])
+
   return (
     <div className="flex h-[calc(100vh-160px)] max-h-[calc(100vh-160px)] w-full gap-6 overflow-hidden p-4">
       {/* --- PANEL IZQUIERDO: HISTORIAL --- */}
@@ -376,9 +389,15 @@ function RouteComponent() {
             </span>
             <button
               onClick={() => setOpenIA(true)}
-              className="rounded-md bg-slate-100 px-2 py-1 text-xs transition hover:bg-slate-200"
+              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"
             >
+              <Archive size={14} className="text-slate-500" />
               Referencias
+              {totalReferencias > 0 && (
+                <span className="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>
@@ -404,6 +423,9 @@ function RouteComponent() {
                       <ImprovementCard
                         suggestions={msg.suggestions}
                         onApply={(key, val) => {
+                          setSelectedFields((prev) =>
+                            prev.filter((f) => f.key !== key),
+                          )
                           console.log(`Aplicando ${val} al campo ${key}`)
                           // Aquí llamarías a tu función de actualización de datos real
                         }}
@@ -546,6 +568,7 @@ function RouteComponent() {
         <DrawerContent className="fixed inset-0 h-screen w-screen max-w-none rounded-none">
           <div className="flex items-center justify-between border-b p-4">
             <h2 className="text-sm font-semibold">Referencias para la IA</h2>
+
             <button
               onClick={() => setOpenIA(false)}
               className="text-muted-foreground hover:text-foreground text-sm"