feat: polish intelligent answer interactions
This commit is contained in:
@@ -0,0 +1,29 @@
|
||||
import { CircleCheck, CircleHelp, CircleX, TriangleAlert } from "lucide-react";
|
||||
import { Badge } from "@/shared/ui/badge";
|
||||
|
||||
const resultStatuses = {
|
||||
success: { label: "成功", icon: CircleCheck, color: "text-[var(--status-success-foreground)]" },
|
||||
partial: { label: "部分完成", icon: TriangleAlert, color: "text-[var(--status-warning-foreground)]" },
|
||||
unconfirmed: { label: "未确认", icon: CircleHelp, color: "text-muted-foreground" },
|
||||
error: { label: "失败", icon: CircleX, color: "text-destructive" }
|
||||
};
|
||||
|
||||
/** A summary of recorded evidence, never an executable operation or approval. */
|
||||
export function AnswerResult({ title, summary, status, source }: {
|
||||
title: string;
|
||||
summary: string;
|
||||
status: keyof typeof resultStatuses;
|
||||
source: string | null;
|
||||
}) {
|
||||
const { label, icon: Icon, color } = resultStatuses[status];
|
||||
return <section data-answer-result data-result-status={status} role="group" aria-label={title}
|
||||
className="min-w-0 rounded-lg border border-border bg-card px-3.5 py-3 text-card-foreground">
|
||||
<div className="flex flex-wrap items-start gap-x-2 gap-y-1.5">
|
||||
<Icon className={`mt-1 size-4 shrink-0 ${color}`} aria-hidden />
|
||||
<h3 className="min-w-0 flex-1 text-sm font-medium leading-6">{title}</h3>
|
||||
<Badge variant="outline" className="mt-0.5 shrink-0 px-1.5 py-0 text-[11px] font-normal shadow-none">{label}</Badge>
|
||||
</div>
|
||||
<p className="mt-2 whitespace-pre-wrap text-base leading-7">{summary}</p>
|
||||
{source ? <p className="mt-2 whitespace-pre-wrap text-xs leading-5 text-muted-foreground">依据:{source}</p> : null}
|
||||
</section>;
|
||||
}
|
||||
Reference in New Issue
Block a user