File size: 1,377 Bytes
1187b53 6132f30 c2a37bc 6132f30 1187b53 6132f30 1187b53 6132f30 c2a37bc 6132f30 1187b53 6132f30 1187b53 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | import React from "react";
import type { ResponseMessageShell } from "../utils/responseShell";
export default function ResponseShellCard({ shell, compact = false }: { shell: ResponseMessageShell; compact?: boolean }) {
const textSize = compact ? "text-xs" : "text-sm";
return (
<div className={`rounded-xl border border-slate-200 bg-slate-50 p-3 ${textSize} text-slate-800`}>
<div>
<span className="font-semibold text-slate-900">Result:</span> {shell.result}
</div>
{shell.why.length ? (
<details className="mt-2 rounded-lg bg-white/70 p-2 ring-1 ring-slate-200">
<summary className="cursor-pointer text-sm font-semibold text-slate-700">Why</summary>
<ul className="mt-2 list-disc pl-5">
{shell.why.map((line, idx) => (
<li key={`${line}-${idx}`}>{line}</li>
))}
</ul>
</details>
) : null}
{shell.next_action.length ? (
<details className="mt-2 rounded-lg bg-white/70 p-2 ring-1 ring-slate-200">
<summary className="cursor-pointer text-sm font-semibold text-slate-700">Next action</summary>
<ul className="mt-2 list-disc pl-5">
{shell.next_action.map((line, idx) => (
<li key={`${line}-${idx}`}>{line}</li>
))}
</ul>
</details>
) : null}
</div>
);
}
|