From cfdb251839512c8549e60196fbf953eb06327b39 Mon Sep 17 00:00:00 2001
From: "Samuele E. Locatelli" <samuele.locatelli@egalware.com>
Date: Fri, 5 Sep 2025 15:19:12 +0000
Subject: [PATCH] Fix modelli con filtro ricerca

---
 frontend/src/ChatLayout.jsx         |  12 ++--
 frontend/src/ModelOverview.jsx      |  33 ++++++---
 frontend/src/ModelOverview.jsx.orig | 106 ++++++++++++++++++++++++++++
 3 files changed, 137 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/ModelOverview.jsx.orig

diff --git a/frontend/src/ChatLayout.jsx b/frontend/src/ChatLayout.jsx
index 5795c82..85d5db3 100644
--- a/frontend/src/ChatLayout.jsx
+++ b/frontend/src/ChatLayout.jsx
@@ -55,7 +55,7 @@ export default function ChatLayout({
   };
 
   const closeModelsDetail = () => {
-    setShowModelPage(true);
+    setShowModelPage(false);
   };
 
   return (
@@ -85,17 +85,19 @@ export default function ChatLayout({
           </div>
 	)}
 
-        {/* INPUT SEMPRE IN BASSO */}
-        {sessionId ? (
+	{/* INPUT SEMPRE IN BASSO */}
+	{!showModelPage && (
+         sessionId ? (
           <ChatInput
   	    onSend={(message, modelName) => onSend(message, modelName)}
             onStop={onStop}
             loading={loading}
 	    sessionModelName={sessionModelName || ""}
           />
-        ) : (
+         ) : (
           <NoSessionBox onCreateSession={onCreateSession} />
-        )}
+         )
+	)}
       </div>
 
       {/* PANEL SESSIONI */}
diff --git a/frontend/src/ModelOverview.jsx b/frontend/src/ModelOverview.jsx
index bab35ef..d477ba5 100644
--- a/frontend/src/ModelOverview.jsx
+++ b/frontend/src/ModelOverview.jsx
@@ -5,6 +5,7 @@ import React, { useEffect, useState } from "react";
 export default function ModelOverview({ onBackToChat }) {
   const [defaultModel, setDefaultModel] = useState("");
   const [modelInfo, setModelInfo] = useState([]);
+  const [searchTerm, setSearchTerm] = useState("");
   const [loading, setLoading] = useState(false);
 
   const fetchModelData = async () => {
@@ -17,7 +18,7 @@ export default function ModelOverview({ onBackToChat }) {
       const defaultText = await defaultRes.text();
       const infoJson = await infoRes.json();
       setDefaultModel(defaultText);
-      setModelInfo(infoJson);
+      setModelInfo(Array.isArray(infoJson) ? infoJson : []);
     } catch (err) {
       console.error("Errore nel caricamento modelli", err);
     } finally {
@@ -28,10 +29,10 @@ export default function ModelOverview({ onBackToChat }) {
   const updateModelData = async () => {
     setLoading(true);
     try {
-      const res = await fetch("/v1/models-info/update", { method: "POST" });
+      const res = await fetch("/v1/model-info/update", { method: "POST" });
       if (res.ok) {
         const updated = await res.json();
-        setModelInfo(updated);
+        setModelInfo(Array.isArray(updated) ? updated : []);
       }
     } catch (err) {
       console.error("Errore nell'aggiornamento modelli", err);
@@ -44,6 +45,10 @@ export default function ModelOverview({ onBackToChat }) {
     fetchModelData();
   }, []);
 
+  const filteredModels = modelInfo.filter((model) =>
+    model.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
   return (
     <div className="container py-4">
       <div className="bg-light p-4 rounded shadow-sm mb-4">
@@ -62,6 +67,16 @@ export default function ModelOverview({ onBackToChat }) {
         </button>
       </div>
 
+      <div className="mb-3">
+        <input
+          type="text"
+          className="form-control"
+          placeholder="🔍 Cerca modello per nome..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
+      </div>
+
       <div className="table-responsive">
         <table className="table table-bordered table-hover align-middle">
           <thead className="table-light">
@@ -78,21 +93,21 @@ export default function ModelOverview({ onBackToChat }) {
                 <td colSpan="4" className="text-center">Caricamento…</td>
               </tr>
             )}
-            {!loading && modelInfo.length === 0 && (
+            {!loading && filteredModels.length === 0 && (
               <tr>
-                <td colSpan="4" className="text-center">Nessun modello disponibile</td>
+                <td colSpan="4" className="text-center">Nessun modello trovato</td>
               </tr>
             )}
-            {!loading && modelInfo.map((model) => (
+            {!loading && filteredModels.map((model) => (
               <tr key={model.name}>
                 <td>{model.name}</td>
                 <td>{model.description || "—"}</td>
                 <td>{model.year || "—"}</td>
                 <td>
                   <ul className="mb-0 small">
-                    {model.features?.map((f, i) => (
-                      <li key={i}>{f}</li>
-                    )) || <li>—</li>}
+                    {Array.isArray(model.features) && model.features.length > 0
+                      ? model.features.map((f, i) => <li key={i}>{f}</li>)
+                      : <li>—</li>}
                   </ul>
                 </td>
               </tr>
diff --git a/frontend/src/ModelOverview.jsx.orig b/frontend/src/ModelOverview.jsx.orig
new file mode 100644
index 0000000..bab35ef
--- /dev/null
+++ b/frontend/src/ModelOverview.jsx.orig
@@ -0,0 +1,106 @@
+// src/ModelOverview.jsx
+
+import React, { useEffect, useState } from "react";
+
+export default function ModelOverview({ onBackToChat }) {
+  const [defaultModel, setDefaultModel] = useState("");
+  const [modelInfo, setModelInfo] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const fetchModelData = async () => {
+    setLoading(true);
+    try {
+      const [defaultRes, infoRes] = await Promise.all([
+        fetch("/v1/default-model"),
+        fetch("/v1/models-info")
+      ]);
+      const defaultText = await defaultRes.text();
+      const infoJson = await infoRes.json();
+      setDefaultModel(defaultText);
+      setModelInfo(infoJson);
+    } catch (err) {
+      console.error("Errore nel caricamento modelli", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const updateModelData = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch("/v1/models-info/update", { method: "POST" });
+      if (res.ok) {
+        const updated = await res.json();
+        setModelInfo(updated);
+      }
+    } catch (err) {
+      console.error("Errore nell'aggiornamento modelli", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchModelData();
+  }, []);
+
+  return (
+    <div className="container py-4">
+      <div className="bg-light p-4 rounded shadow-sm mb-4">
+        <h3 className="mb-0">📌 Modello di default</h3>
+        <p className="lead text-muted mb-0">
+          {defaultModel || "Non disponibile"}
+        </p>
+      </div>
+
+      <div className="d-flex justify-content-between mb-3">
+        <button className="btn btn-outline-primary" onClick={onBackToChat}>
+          ⬅ Torna alla chat
+        </button>
+        <button className="btn btn-outline-success" onClick={updateModelData}>
+          🔄 Aggiorna dati modelli
+        </button>
+      </div>
+
+      <div className="table-responsive">
+        <table className="table table-bordered table-hover align-middle">
+          <thead className="table-light">
+            <tr>
+              <th>Nome</th>
+              <th>Descrizione</th>
+              <th>Anno</th>
+              <th>Caratteristiche</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading && (
+              <tr>
+                <td colSpan="4" className="text-center">Caricamento…</td>
+              </tr>
+            )}
+            {!loading && modelInfo.length === 0 && (
+              <tr>
+                <td colSpan="4" className="text-center">Nessun modello disponibile</td>
+              </tr>
+            )}
+            {!loading && modelInfo.map((model) => (
+              <tr key={model.name}>
+                <td>{model.name}</td>
+                <td>{model.description || "—"}</td>
+                <td>{model.year || "—"}</td>
+                <td>
+                  <ul className="mb-0 small">
+                    {model.features?.map((f, i) => (
+                      <li key={i}>{f}</li>
+                    )) || <li>—</li>}
+                  </ul>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+