Fix modelli con filtro ricerca

This commit is contained in:
Samuele E. Locatelli
2025-09-05 15:19:12 +00:00
parent bad7ce68f6
commit cfdb251839
3 changed files with 137 additions and 14 deletions
+7 -5
View File
@@ -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 */}
+24 -9
View File
@@ -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>
+106
View File
@@ -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>
);
}