108 lines
3.7 KiB
TypeScript
108 lines
3.7 KiB
TypeScript
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||
import { AppIcon } from "./PixelIcons";
|
||
import { Card, Tag, Loading } from "./ui";
|
||
import { api } from "../lib/api";
|
||
|
||
type Props = {
|
||
symbol: string;
|
||
scope: "stock" | "company" | "fund";
|
||
title?: string;
|
||
auto?: boolean;
|
||
aiFocus: { symbol: string; subPage: string; label: string; cardTitle?: string };
|
||
};
|
||
|
||
function verdictTone(v?: string): "up" | "down" | "gold" {
|
||
if (v === "偏正面") return "up";
|
||
if (v === "謹慎") return "down";
|
||
return "gold";
|
||
}
|
||
|
||
export default function AiSummaryCard({ symbol, scope, title = "AI 今日總結", auto = true, aiFocus }: Props) {
|
||
const qc = useQueryClient();
|
||
const q = useQuery({
|
||
queryKey: ["ai-summary", symbol, scope],
|
||
queryFn: () => api.aiSummary(symbol, scope, auto),
|
||
enabled: !!symbol && auto,
|
||
staleTime: 12 * 3600_000,
|
||
retry: 1,
|
||
});
|
||
|
||
const syncMut = useMutation({
|
||
mutationFn: () => api.syncAiSummary(symbol, scope),
|
||
onSuccess: (data) => {
|
||
qc.setQueryData(["ai-summary", symbol, scope], data);
|
||
},
|
||
});
|
||
|
||
const summary = q.data?.summary;
|
||
const loading = q.isLoading || syncMut.isPending;
|
||
|
||
return (
|
||
<Card
|
||
className="mt"
|
||
title={title}
|
||
ico={<AppIcon name="scroll" size={22} framed variant="hero" />}
|
||
ai
|
||
aiFocus={{ ...aiFocus, cardTitle: title }}
|
||
onRefresh={() => syncMut.mutate()}
|
||
refreshing={loading}
|
||
refreshLabel="重新分析"
|
||
>
|
||
<div className="ai-summary-toolbar">
|
||
<span className="small muted">
|
||
{q.data?.cached
|
||
? `今日已分析 · ${q.data?.summary?.day || ""} · 讀資料庫（省 token）`
|
||
: q.data?.mcpUsed
|
||
? "MCP + 本機資料已送 AI 總結"
|
||
: "整合本機財報／公司研究；可串 MCP 補充"}
|
||
</span>
|
||
</div>
|
||
|
||
{loading && !summary ? (
|
||
<Loading label="MCP 取資料並產生總結…" />
|
||
) : summary ? (
|
||
<>
|
||
<div className="fund-verdict-row">
|
||
{summary.verdict ? <Tag tone={verdictTone(summary.verdict)}>{summary.verdict}</Tag> : null}
|
||
{summary.provider ? <span className="small muted">via {summary.provider}</span> : null}
|
||
</div>
|
||
<div className="interpret-box">
|
||
<div className="interpret-label">AI 總結</div>
|
||
<p>{summary.summaryZh}</p>
|
||
{summary.bullets?.length ? (
|
||
<ul className="interpret-bullets">
|
||
{summary.bullets.map((b, i) => (
|
||
<li key={i}>{b}</li>
|
||
))}
|
||
</ul>
|
||
) : null}
|
||
</div>
|
||
{summary.risks?.length ? (
|
||
<div className="ai-summary-risks mt-s">
|
||
<h4 className="small" style={{ color: "var(--crimson)", margin: "0 0 6px" }}>
|
||
風險／待確認
|
||
</h4>
|
||
<ul className="interpret-bullets">
|
||
{summary.risks.map((r, i) => (
|
||
<li key={i}>{r}</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
) : null}
|
||
{summary.sources?.length ? (
|
||
<p className="small muted mt-s">來源：{summary.sources.join(" · ")}</p>
|
||
) : null}
|
||
{q.data?.skipReason ? <p className="small muted">{q.data.skipReason}</p> : null}
|
||
{q.data?.aiError ? <p className="small muted">AI 略過：{q.data.aiError}（已用規則備援）</p> : null}
|
||
</>
|
||
) : (
|
||
<p className="muted">
|
||
尚無今日總結。
|
||
<button type="button" className="btn-primary" style={{ marginLeft: 8 }} disabled={loading} onClick={() => syncMut.mutate()}>
|
||
產生 AI 總結
|
||
</button>
|
||
</p>
|
||
)}
|
||
</Card>
|
||
);
|
||
} |