File size: 2,294 Bytes
84983c9 3c11192 84983c9 3c11192 84983c9 3c11192 84983c9 3c11192 84983c9 3c11192 | 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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | import type { AnalysisRow } from "../api/chat";
import { Icon } from "./Icon";
type Props = {
rows: AnalysisRow[];
heading?: string;
};
function RightCol({
text,
style,
}: {
text: string;
style?: string;
}) {
const muted = style === "muted";
const success = style === "success";
return (
<span
className={`font-semibold ${
success
? "text-[#10B981]"
: muted
? "text-secondary opacity-50"
: "text-on-surface"
}`}
>
{text}
</span>
);
}
export function AnalysisCard({
rows,
heading = "Analyzing request & catalog match",
}: Props) {
return (
<div className="flex justify-start">
<div className="flex items-start gap-3 w-full">
<div className="w-8 h-8 rounded-full bg-secondary-container flex items-center justify-center shrink-0">
<Icon
name="smart_toy"
className="text-on-secondary-container text-sm"
/>
</div>
<div className="flex-1 max-w-[85%]">
<div className="bg-surface-container p-4 rounded-2xl border border-outline-variant">
<div className="flex items-center gap-2 mb-3">
<span className="w-2 h-2 rounded-full bg-[#10B981] animate-pulse" />
<span className="font-label-caps text-label-caps text-secondary uppercase">
{heading}
</span>
</div>
<div className="space-y-3">
{rows.map((row, i) => (
<div
key={`${row.left}-${i}`}
className="flex items-center justify-between gap-3 text-body-sm font-body-sm text-on-surface p-2 bg-white rounded border border-outline-variant"
>
<div className="flex items-start gap-2 min-w-0">
<Icon
name={(row.icon as string) || "inventory_2"}
className="text-primary text-sm shrink-0 mt-0.5"
/>
<span className="break-words">{row.left}</span>
</div>
<RightCol text={row.right} style={row.right_style} />
</div>
))}
</div>
</div>
</div>
</div>
</div>
);
}
|