45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import type { AnalysisResponse } from '@ftb/shared';
|
|
import { AnalysisChart } from './AnalysisChart';
|
|
import { AnalysisReport } from './AnalysisReport';
|
|
import { FollowUpActions } from './FollowUpActions';
|
|
import { InsightCard } from './InsightCard';
|
|
|
|
export function AnalysisResultBlock({
|
|
response,
|
|
onAsk,
|
|
}: {
|
|
response: AnalysisResponse;
|
|
onAsk: (prompt: string) => void;
|
|
}) {
|
|
if (!response.ok) {
|
|
return (
|
|
<div className="rounded-[28px] border border-[#e2e8f0] bg-white/80 p-5 text-[14px] leading-7 text-[#334155] shadow-sm backdrop-blur-xl">
|
|
<p className="font-medium text-[#0f172a]">{response.message}</p>
|
|
{response.clarificationOptions && (
|
|
<div className="mt-3 flex flex-wrap gap-2">
|
|
{response.clarificationOptions.map((option) => (
|
|
<button
|
|
key={option.prompt}
|
|
type="button"
|
|
onClick={() => onAsk(option.prompt)}
|
|
className="rounded-full border border-[#dbe3ef] bg-white/70 px-3 py-2 text-[13px] text-[#334155] hover:bg-white"
|
|
>
|
|
{option.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<InsightCard insight={response.insight} />
|
|
<AnalysisChart spec={response.chart} />
|
|
<AnalysisReport report={response.report} />
|
|
<FollowUpActions followUps={response.followUps} onAsk={onAsk} />
|
|
</div>
|
|
);
|
|
}
|