feat: evolve investigation into guided conversation
This commit is contained in:
@@ -63,7 +63,7 @@ function ActivitySpinner() {
|
||||
function SituationCard({ centralStatement }) {
|
||||
if (!centralStatement) return null;
|
||||
return (
|
||||
<div className="rounded-lg border border-gray-200 bg-white p-5">
|
||||
<div className="investigation-card rounded-lg border border-gray-200 bg-white p-5">
|
||||
<h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-gray-500">
|
||||
Your situation
|
||||
</h2>
|
||||
@@ -76,9 +76,9 @@ function SituationCard({ centralStatement }) {
|
||||
function CurrentUnderstanding({ currentSummary }) {
|
||||
if (currentSummary) {
|
||||
return (
|
||||
<div className="rounded-lg border border-gray-200 bg-white p-5">
|
||||
<div className="investigation-card rounded-lg border border-gray-200 bg-white p-5">
|
||||
<h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500">
|
||||
Current understanding
|
||||
What we've established
|
||||
</h2>
|
||||
<p className="text-sm leading-relaxed text-gray-700">{currentSummary}</p>
|
||||
</div>
|
||||
@@ -86,7 +86,7 @@ function CurrentUnderstanding({ currentSummary }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border border-gray-200 bg-white p-5">
|
||||
<div className="investigation-card rounded-lg border border-gray-200 bg-white p-5">
|
||||
<p className="text-sm leading-relaxed text-gray-600">
|
||||
We have started to separate what is known from what still needs checking.
|
||||
</p>
|
||||
@@ -94,110 +94,87 @@ function CurrentUnderstanding({ currentSummary }) {
|
||||
);
|
||||
}
|
||||
|
||||
// ── Current focus card ────────────────────────────────────────
|
||||
function CurrentFocus({ graph }) {
|
||||
if (!graph?.activeUnknownNodeId || !graph.nodes?.length) return null;
|
||||
|
||||
const activeNode = graph.nodes.find(
|
||||
(n) => n.id === graph.activeUnknownNodeId
|
||||
);
|
||||
if (!activeNode) return null;
|
||||
|
||||
// Find the unknown label that maps to activeUnknownNodeId from selectedQuestion or nodes
|
||||
const statusText =
|
||||
activeNode.status === "resolved" ? "Answered" : "Under investigation";
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border border-gray-200 bg-white p-5">
|
||||
<h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-gray-500">
|
||||
What we are working out
|
||||
</h2>
|
||||
<p className="text-base font-medium text-gray-900">{activeNode.label}</p>
|
||||
{activeNode.description && activeNode.description !== activeNode.label && (
|
||||
<p className="mt-1 text-sm text-gray-600">Why it matters: {activeNode.description}</p>
|
||||
)}
|
||||
<span className="mt-2 inline-block rounded-full border border-gray-200 bg-gray-50 px-2.5 py-0.5 text-xs font-medium text-gray-600">
|
||||
{statusText}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Next question card (prominent) ────────────────────────────
|
||||
function NextQuestionCard({ selectedQuestion }) {
|
||||
// ── Current investigation card (prominent) ─────────────────────
|
||||
function CurrentInvestigationCard({ selectedQuestion }) {
|
||||
if (!selectedQuestion) return null;
|
||||
|
||||
const q = typeof selectedQuestion === "string" ? selectedQuestion : selectedQuestion.question;
|
||||
if (!q) return null;
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border-2 border-green-300 bg-green-50 p-6">
|
||||
<div className="investigation-card rounded-lg border-2 border-green-300 bg-green-50 p-6 transition-opacity duration-300">
|
||||
<h2 className="mb-2 text-sm font-bold uppercase tracking-wide text-green-700">
|
||||
Next question
|
||||
Current investigation
|
||||
</h2>
|
||||
<p className="text-xl font-semibold leading-snug text-gray-900">{q}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Reasoning progress card ────────────────────────────────────
|
||||
function ReasoningProgress({ graph }) {
|
||||
// ── Investigation progress card ──────────────────────────────
|
||||
function InvestigationProgress({ graph, noQuestionReason: rwNoQuestionReason }) {
|
||||
if (!graph?.nodes?.length) return null;
|
||||
|
||||
const resolvedIds = new Set(graph.resolvedNodeIds || []);
|
||||
const unknowns = graph.nodes.filter((n) => n.kind === "unknown");
|
||||
const remainingCount = unknowns.filter((u) => u.status !== "resolved").length;
|
||||
const remainingCount = unknowns.filter(
|
||||
(u) => u.status !== "resolved" && !resolvedIds.has(u.id),
|
||||
).length;
|
||||
const activeNode = graph.activeUnknownNodeId
|
||||
? graph.nodes.find((n) => n.id === graph.activeUnknownNodeId)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border border-gray-200 bg-white px-5 py-4">
|
||||
<h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-gray-500">
|
||||
Reasoning progress
|
||||
</h2>
|
||||
{remainingCount > 0 ? (
|
||||
<p className="mb-3 text-sm leading-relaxed text-gray-700">
|
||||
We have identified {remainingCount} area{remainingCount === 1 ? "" : "s"} that still need investigation.
|
||||
<div className="investigation-card rounded-lg border border-gray-200 bg-white px-5 py-4">
|
||||
{remainingCount > 0 && !rwNoQuestionReason ? (
|
||||
<p className="text-sm leading-relaxed text-gray-700">
|
||||
We are still building confidence about your situation.{" "}
|
||||
{remainingCount === 1
|
||||
? "One area remains."
|
||||
: `${remainingCount} areas remain.`}
|
||||
</p>
|
||||
) : (
|
||||
<p className="mb-3 text-sm leading-relaxed text-gray-700">
|
||||
<p className="text-sm leading-relaxed text-gray-700">
|
||||
All areas under investigation are now complete.
|
||||
</p>
|
||||
)}
|
||||
{graph.activeUnknownNodeId && (() => {
|
||||
const activeNode = graph.nodes.find((n) => n.id === graph.activeUnknownNodeId);
|
||||
if (!activeNode) return null;
|
||||
return (
|
||||
<>
|
||||
<h3 className="mb-1 text-xs font-medium uppercase tracking-wide text-gray-400">
|
||||
Current focus
|
||||
</h3>
|
||||
<p className="text-sm font-medium text-gray-900">{activeNode.label}</p>
|
||||
{activeNode.description && activeNode.description !== activeNode.label && (
|
||||
<p className="mt-1 text-xs text-gray-500">Why this matters: {activeNode.description}</p>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
{!graph.activeUnknownNodeId && remainingCount === 0 && (
|
||||
<p className="text-sm text-gray-500">There is no active area of investigation at the moment.</p>
|
||||
{activeNode && (
|
||||
<>
|
||||
<h3 className="mt-3 mb-1 text-xs font-medium uppercase tracking-wide text-gray-400">
|
||||
Current focus
|
||||
</h3>
|
||||
<p className="text-sm font-medium text-gray-900">{activeNode.label}</p>
|
||||
{activeNode.description && activeNode.description !== activeNode.label && (
|
||||
<p className="mt-1 text-xs text-gray-500">Why it matters: {activeNode.description}</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{!activeNode && remainingCount === 0 && (
|
||||
<p className="mt-3 text-sm text-gray-500">There is nothing further to investigate at this time.</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── No question state ─────────────────────────────────────────
|
||||
function NoQuestionMessage({ noQuestionReason }) {
|
||||
let message = "There is no next question at the moment.";
|
||||
// ── Investigation complete state ───────────────────────────────
|
||||
function InvestigationCompleteMessage({ noQuestionReason }) {
|
||||
let message = "We have established enough for now.";
|
||||
if (noQuestionReason) {
|
||||
const reason = String(noQuestionReason);
|
||||
if (reason.toLowerCase().includes("satisfied") || reason.toLowerCase().includes("complete")) {
|
||||
message += " The situation has been fully investigated.";
|
||||
if (
|
||||
reason.toLowerCase().includes("resolved") ||
|
||||
reason.toLowerCase().includes("satisfied") ||
|
||||
reason.toLowerCase().includes("complete")
|
||||
) {
|
||||
message = "You have provided enough information. The situation has been fully investigated.";
|
||||
} else if (reason.toLowerCase().includes("insufficient")) {
|
||||
message += " We need more information to determine the next step.";
|
||||
message = "There is not yet enough evidence to guide the next step. Your original situation will remain our focus when new information becomes available.";
|
||||
} else {
|
||||
message += " " + reason;
|
||||
message = reason;
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className="rounded-lg border border-gray-200 bg-gray-50 px-5 py-4 text-center">
|
||||
<div className="rounded-lg border border-gray-200 bg-gray-50 px-5 py-4 text-center transition-opacity duration-300">
|
||||
<p className="text-sm text-gray-600">{message}</p>
|
||||
</div>
|
||||
);
|
||||
@@ -313,22 +290,21 @@ export default function ReasoningWorkspace({
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* When analysis succeeded but there's no question to answer */}
|
||||
{/* When investigation has nothing further to ask */}
|
||||
{status === "success" && !canAnswer && graph && (
|
||||
<NoQuestionMessage noQuestionReason={noQuestionReason} />
|
||||
<InvestigationCompleteMessage noQuestionReason={noQuestionReason} />
|
||||
)}
|
||||
{graph && <SituationCard centralStatement={graph.centralStatement} />}
|
||||
{graph && <CurrentUnderstanding currentSummary={graph.currentSummary} />}
|
||||
{graph && <CurrentFocus graph={graph} />}
|
||||
{canAnswer && <NextQuestionCard selectedQuestion={selectedQ} />}
|
||||
{graph && <ReasoningProgress graph={graph} />}
|
||||
{canAnswer && <CurrentInvestigationCard selectedQuestion={selectedQ} />}
|
||||
{graph && <InvestigationProgress graph={graph} noQuestionReason={noQuestionReason} />}
|
||||
|
||||
{/* ── Answer form ──────────────────────────────── */}
|
||||
{canAnswer && (
|
||||
<form onSubmit={onAnswerSubmit} className="space-y-4 rounded-lg border border-gray-200 bg-white p-5">
|
||||
<div>
|
||||
<label htmlFor="rw-answer" className="mb-2 block text-sm font-medium text-gray-700">
|
||||
Your answer
|
||||
Your response
|
||||
</label>
|
||||
<textarea
|
||||
id="rw-answer"
|
||||
|
||||
Reference in New Issue
Block a user