mptyl/ThothII
1
0
Fork 0
Code Issues 25 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: improve memory markdown layout

Browse Source
This commit is contained in:
marcopan
2026-07-23 23:01:29 +02:00
parent 3c75edfd47
commit 6ca4275ff2
2 changed files with 26 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/widgets/MultiselectWidget.test.tsx
+4 -4
View File
@@ -57,8 +57,8 @@ test("shows the exact content and provenance for every memory option", () => {
id: "mem-42", id: "mem-42",
label: "paziente attivo", label: "paziente attivo",
detail: "flag_attivo = TRUE", detail: "flag_attivo = TRUE",
rationale: "Confermato dal reviewer", rationale: "*Confermato* dal reviewer",
meta: { question_context: "Conta i pazienti attivi" }, meta: { question_context: "Conta i **pazienti attivi**" },
}, },
], ],
}} }}
@@ -67,8 +67,8 @@ test("shows the exact content and provenance for every memory option", () => {
); );
expect(screen.getByText("flag_attivo = TRUE")).toBeInTheDocument(); expect(screen.getByText("flag_attivo = TRUE")).toBeInTheDocument();
expect(screen.getByText(/Confermato dal reviewer/)).toBeInTheDocument(); expect(screen.getByText("Confermato").tagName).toBe("EM");
expect(screen.getByText(/Conta i pazienti attivi/)).toBeInTheDocument(); expect(screen.getByText("pazienti attivi").tagName).toBe("STRONG");
}); });
test("renders memory detail as human-friendly Markdown", () => { test("renders memory detail as human-friendly Markdown", () => {
frontend/src/widgets/MultiselectWidget.tsx
+22 -10
View File
@@ -58,24 +58,36 @@ export function MultiselectWidget({ descriptor, onRespond }: WidgetProps) {
checked={checked.has(o.id)} checked={checked.has(o.id)}
onChange={() => toggle(o.id)} onChange={() => toggle(o.id)}
/> />
<span className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<span className="block font-medium">{o.label}</span> <div className="font-medium leading-snug">{o.label}</div>
{o.detail && ( {o.detail && (
<div className="thot-prose mt-1 text-sm text-muted-foreground"> <div className="thot-prose mt-2 text-sm leading-relaxed text-muted-foreground">
<ReactMarkdown remarkPlugins={[remarkGfm]}>{o.detail}</ReactMarkdown> <ReactMarkdown remarkPlugins={[remarkGfm]}>{o.detail}</ReactMarkdown>
</div> </div>
)} )}
{o.rationale && ( {o.rationale && (
<span className="mt-1 block text-xs text-foreground/80"> <div className="mt-3 border-l-2 border-border/70 pl-3 text-xs text-foreground/80">
Motivo: {o.rationale} <div className="mb-1 font-semibold uppercase tracking-wide text-muted-foreground">
</span> Motivo
</div>
<div className="thot-prose leading-relaxed [&>p:first-child]:mt-0 [&>p:last-child]:mb-0">
<ReactMarkdown remarkPlugins={[remarkGfm]}>{o.rationale}</ReactMarkdown>
</div>
</div>
)} )}
{typeof o.meta?.question_context === "string" && o.meta.question_context && ( {typeof o.meta?.question_context === "string" && o.meta.question_context && (
<span className="mt-1 block text-xs text-muted-foreground"> <div className="mt-3 border-l-2 border-border/50 pl-3 text-xs text-muted-foreground">
Domanda di contesto: {o.meta.question_context} <div className="mb-1 font-semibold uppercase tracking-wide">
</span> Domanda di contesto
</div>
<div className="thot-prose leading-relaxed [&>p:first-child]:mt-0 [&>p:last-child]:mb-0">
<ReactMarkdown remarkPlugins={[remarkGfm]}>
{o.meta.question_context}
</ReactMarkdown>
</div>
</div>
)} )}
</span> </div>
</label> </label>
))} ))}
</div> </div>