108 lines
3.8 KiB
React
108 lines
3.8 KiB
React
"use client";
|
|
|
|
import { useState, useRef } from "react";
|
|
import ReconstructionView from "@/components/reconstruction-view";
|
|
import DiagnosticsView from "@/components/diagnostics-view";
|
|
|
|
const MAX_LENGTH = 10000;
|
|
|
|
export default function ScenarioForm() {
|
|
const [scenario, setScenario] = useState("");
|
|
const [status, setStatus] = useState("idle"); // idle | loading | error | success
|
|
const [result, setResult] = useState(null);
|
|
const textareaRef = useRef(null);
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
setStatus("loading");
|
|
setResult(null);
|
|
|
|
try {
|
|
const res = await fetch("/api/analyse", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ scenario }),
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (res.ok && data.validationStatus === "valid") {
|
|
setStatus("success");
|
|
setResult(data);
|
|
} else {
|
|
setStatus("error");
|
|
setResult(data);
|
|
}
|
|
} catch (err) {
|
|
setStatus("error");
|
|
setResult({ error: err.message || "Network request failed" });
|
|
}
|
|
};
|
|
|
|
// Always show diagnostics when there's a result (even if validation failed)
|
|
const hasDiagnostics = result && (result.reconstruction || result.modelName || result.responseDurationMs !== undefined);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<textarea
|
|
ref={textareaRef}
|
|
value={scenario}
|
|
onChange={(e) => setScenario(e.target.value)}
|
|
placeholder="Describe the scenario you want analysed..."
|
|
rows={10}
|
|
className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400"
|
|
/>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs text-gray-400">{scenario.length}/{MAX_LENGTH}</span>
|
|
<button
|
|
type="submit"
|
|
disabled={status === "loading" || !scenario.trim()}
|
|
className="rounded-lg bg-gray-900 px-6 py-2.5 text-sm font-medium text-white transition hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-40"
|
|
>
|
|
{status === "loading" ? "Analysing..." : "Analyse"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
{status === "error" && (
|
|
<div className="space-y-3">
|
|
{result?.error && (
|
|
<div className="rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700 whitespace-pre-wrap">
|
|
Error: {result.error}
|
|
</div>
|
|
)}
|
|
{hasDiagnostics && result?.modelName && (
|
|
<dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-sm">
|
|
<dt className="text-gray-500">Model</dt>
|
|
<dd>{result.modelName}</dd>
|
|
<dt className="text-gray-500">Duration</dt>
|
|
<dd>{result.responseDurationMs != null ? `${result.responseDurationMs}ms` : "?"}</dd>
|
|
</dl>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{status === "success" && result?.reconstruction && (
|
|
<div className="space-y-4">
|
|
<ReconstructionView reconstruction={result.reconstruction} />
|
|
<DiagnosticsView result={result} />
|
|
</div>
|
|
)}
|
|
|
|
{status === "error" && result?.reconstruction && (
|
|
<div className="space-y-3">
|
|
<div className="rounded-lg border border-yellow-300 bg-yellow-50 px-4 py-2 text-sm text-yellow-800">
|
|
⚠ Partial result — some fields failed validation. Showing what was accepted.
|
|
</div>
|
|
<ReconstructionView reconstruction={result.reconstruction} partial />
|
|
</div>
|
|
)}
|
|
|
|
{status === "loading" && (
|
|
<div className="py-12 text-center text-sm text-gray-400">Waiting for model response...</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|