Fix modelli con filtro ricerca
This commit is contained in:
@@ -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 */}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user