439 lines
16 KiB
TypeScript
439 lines
16 KiB
TypeScript
/**
|
||
* Agent Flow Diagram Component
|
||
* Visualizes the complete data flow through all 12 agents
|
||
*/
|
||
"use client";
|
||
|
||
import { Card } from "@/components/ui/card";
|
||
import {
|
||
ArrowDown,
|
||
Database,
|
||
MessageSquare,
|
||
Newspaper,
|
||
DollarSign,
|
||
TrendingUp,
|
||
TrendingDown,
|
||
Shield,
|
||
ShieldAlert,
|
||
ShieldCheck,
|
||
Users,
|
||
Target,
|
||
BarChart3
|
||
} from "lucide-react";
|
||
import { useLanguage } from "@/contexts/LanguageContext";
|
||
|
||
export function AgentFlowDiagram() {
|
||
const { t } = useLanguage();
|
||
|
||
return (
|
||
<div className="w-full max-w-7xl mx-auto space-y-6">
|
||
{/* Data Sources Layer */}
|
||
<div>
|
||
<h3 className="text-center text-sm font-semibold text-gray-500 dark:text-gray-400 mb-4">
|
||
📥 {t.flowDiagram.layer1}
|
||
</h3>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
<DataSourceCard
|
||
icon={<Database className="w-5 h-5" />}
|
||
name="yfinance"
|
||
description={t.flowDiagram.stockData}
|
||
color="blue"
|
||
/>
|
||
<DataSourceCard
|
||
icon={<MessageSquare className="w-5 h-5" />}
|
||
name="Reddit API"
|
||
description={t.flowDiagram.socialSentiment}
|
||
color="orange"
|
||
/>
|
||
<DataSourceCard
|
||
icon={<Newspaper className="w-5 h-5" />}
|
||
name="RSS Feed"
|
||
description={t.flowDiagram.newsInfo}
|
||
color="green"
|
||
/>
|
||
<DataSourceCard
|
||
icon={<DollarSign className="w-5 h-5" />}
|
||
name="Alpha Vantage / FinMind"
|
||
description={t.flowDiagram.financialData}
|
||
color="purple"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Arrow */}
|
||
<FlowArrow label={t.flowDiagram.dataFetch} color="blue" />
|
||
|
||
{/* Analysts Layer - 4 agents */}
|
||
<div>
|
||
<h3 className="text-center text-sm font-semibold text-gray-500 dark:text-gray-400 mb-4">
|
||
🤖 {t.flowDiagram.layer2}
|
||
</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||
<AgentCard
|
||
name={t.agents.market_analyst}
|
||
icon={<BarChart3 className="w-5 h-5" />}
|
||
gradient="from-blue-500 to-cyan-500"
|
||
description={t.flowDiagram.technicalAnalysis}
|
||
tasks={[t.flowDiagram.rsiIndicator, t.flowDiagram.macdMomentum, t.flowDiagram.priceTrend]}
|
||
/>
|
||
<AgentCard
|
||
name={t.agents.social_analyst}
|
||
icon={<MessageSquare className="w-5 h-5" />}
|
||
gradient="from-orange-500 to-red-500"
|
||
description={t.flowDiagram.sentimentAnalysis}
|
||
tasks={[t.flowDiagram.nlpSentiment, t.flowDiagram.discussionHeat, t.flowDiagram.investorConfidence]}
|
||
/>
|
||
<AgentCard
|
||
name={t.agents.news_analyst}
|
||
icon={<Newspaper className="w-5 h-5" />}
|
||
gradient="from-green-500 to-emerald-500"
|
||
description={t.flowDiagram.newsAnalysis}
|
||
tasks={[t.flowDiagram.newsSummary, t.flowDiagram.eventAssessment, t.flowDiagram.impactPrediction]}
|
||
/>
|
||
<AgentCard
|
||
name={t.agents.fundamentals_analyst}
|
||
icon={<DollarSign className="w-5 h-5" />}
|
||
gradient="from-purple-500 to-pink-500"
|
||
description={t.flowDiagram.fundamentalsAnalysis}
|
||
tasks={[t.flowDiagram.financialAnalysis, t.flowDiagram.valuationMetrics, t.flowDiagram.profitEvaluation]}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Arrow */}
|
||
<FlowArrow label={t.flowDiagram.reportIntegration} color="purple" />
|
||
|
||
{/* Researchers Layer - 2 agents */}
|
||
<div>
|
||
<h3 className="text-center text-sm font-semibold text-gray-500 dark:text-gray-400 mb-4">
|
||
🔍 {t.flowDiagram.layer3}
|
||
</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-4xl mx-auto">
|
||
<AgentCard
|
||
name={t.agents.bull_researcher}
|
||
icon={<TrendingUp className="w-5 h-5" />}
|
||
gradient="from-green-500 to-emerald-500"
|
||
description={t.flowDiagram.bullishResearch}
|
||
tasks={[t.flowDiagram.positiveFactors, t.flowDiagram.growthOpportunities, t.flowDiagram.buyReasons]}
|
||
/>
|
||
<AgentCard
|
||
name={t.agents.bear_researcher}
|
||
icon={<TrendingDown className="w-5 h-5" />}
|
||
gradient="from-red-500 to-rose-500"
|
||
description={t.flowDiagram.bearishResearch}
|
||
tasks={[t.flowDiagram.negativeFactors, t.flowDiagram.riskAssessment, t.flowDiagram.sellReasons]}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Arrow */}
|
||
<FlowArrow label={t.flowDiagram.researchPrep} color="green" />
|
||
|
||
{/* Research Manager */}
|
||
<div className="max-w-md mx-auto">
|
||
<ManagerCard
|
||
name={t.flowDiagram.researchManager}
|
||
icon={<Users className="w-6 h-6" />}
|
||
gradient="from-indigo-500 to-purple-500"
|
||
description={t.flowDiagram.integrateViews}
|
||
tasks={[t.flowDiagram.balanceArguments, t.flowDiagram.comprehensiveAdvice, t.flowDiagram.preliminaryStrategy]}
|
||
/>
|
||
</div>
|
||
|
||
{/* Arrow */}
|
||
<FlowArrow label={t.flowDiagram.riskDebate} color="orange" />
|
||
|
||
{/* Risk Debators Layer - 3 agents */}
|
||
<div>
|
||
<h3 className="text-center text-sm font-semibold text-gray-500 dark:text-gray-400 mb-4">
|
||
⚖️ {t.flowDiagram.layer4}
|
||
</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<AgentCard
|
||
name={t.agents.aggressive_debator}
|
||
icon={<ShieldAlert className="w-5 h-5" />}
|
||
gradient="from-red-500 to-orange-500"
|
||
description={t.flowDiagram.highRiskReward}
|
||
tasks={[t.flowDiagram.aggressiveStrategy, t.flowDiagram.maximizeReturns, t.flowDiagram.calculatedRisk]}
|
||
/>
|
||
<AgentCard
|
||
name={t.agents.neutral_debator}
|
||
icon={<Shield className="w-5 h-5" />}
|
||
gradient="from-blue-500 to-indigo-500"
|
||
description={t.flowDiagram.balancedRisk}
|
||
tasks={[t.flowDiagram.prudentStrategy, t.flowDiagram.riskBalance, t.flowDiagram.rationalDecision]}
|
||
/>
|
||
<AgentCard
|
||
name={t.agents.conservative_debator}
|
||
icon={<ShieldCheck className="w-5 h-5" />}
|
||
gradient="from-green-500 to-teal-500"
|
||
description={t.flowDiagram.lowRiskVol}
|
||
tasks={[t.flowDiagram.conservativeStrategy, t.flowDiagram.capitalProtection, t.flowDiagram.riskReduction]}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Arrow */}
|
||
<FlowArrow label={t.flowDiagram.riskDebate} color="red" />
|
||
|
||
{/* Risk Manager */}
|
||
<div className="max-w-md mx-auto">
|
||
<ManagerCard
|
||
name={t.flowDiagram.riskManager}
|
||
icon={<Shield className="w-6 h-6" />}
|
||
gradient="from-red-500 to-pink-500"
|
||
description={t.flowDiagram.integrateRisk}
|
||
tasks={[t.flowDiagram.riskRating, t.flowDiagram.stopLossSettings, t.flowDiagram.finalRiskControl]}
|
||
/>
|
||
</div>
|
||
|
||
{/* Arrow */}
|
||
<FlowArrow label={t.flowDiagram.finalDecision} color="green" />
|
||
|
||
{/* Trader */}
|
||
<div className="max-w-md mx-auto">
|
||
<TraderCard
|
||
name={t.flowDiagram.trader}
|
||
icon={<Target className="w-7 h-7" />}
|
||
gradient="from-blue-600 via-purple-600 to-pink-600"
|
||
description={t.flowDiagram.executeTrade}
|
||
outputs={[t.flowDiagram.tradeSignal, t.flowDiagram.targetPrice, t.flowDiagram.tradeQuantity, t.flowDiagram.riskParams]}
|
||
/>
|
||
</div>
|
||
|
||
{/* Final Arrow */}
|
||
<FlowArrow label={t.flowDiagram.generateReport} color="blue" />
|
||
|
||
{/* Output Layer */}
|
||
<div>
|
||
<h3 className="text-center text-sm font-semibold text-gray-500 dark:text-gray-400 mb-4">
|
||
📊 {t.flowDiagram.finalOutput}
|
||
</h3>
|
||
<Card className="bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 dark:from-blue-600/20 dark:via-purple-600/20 dark:to-pink-600/20 border-2 border-dashed border-blue-300 dark:border-blue-700 p-6">
|
||
<div className="text-center mb-4">
|
||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 text-white shadow-lg mb-3">
|
||
<BarChart3 className="w-8 h-8" />
|
||
</div>
|
||
<h4 className="font-bold text-lg mb-2 gradient-text-primary">{t.flowDiagram.completeReportSet}</h4>
|
||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||
{t.flowDiagram.comprehensiveSupport}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||
<ReportSection
|
||
title={t.flowDiagram.analystReports}
|
||
items={[t.flowDiagram.technicalReport, t.flowDiagram.sentimentReport, t.flowDiagram.newsReport, t.flowDiagram.fundamentalsReport]}
|
||
color="blue"
|
||
/>
|
||
<ReportSection
|
||
title={t.flowDiagram.researchReports}
|
||
items={[t.flowDiagram.bullReport, t.flowDiagram.bearReport, t.flowDiagram.researchManagerReport]}
|
||
color="green"
|
||
/>
|
||
<ReportSection
|
||
title={t.flowDiagram.riskTrading}
|
||
items={[t.flowDiagram.aggressiveEval, t.flowDiagram.balancedEval, t.flowDiagram.conservativeEval, t.flowDiagram.riskManagerReport, t.flowDiagram.finalTradeDecision]}
|
||
color="red"
|
||
/>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function DataSourceCard({
|
||
icon,
|
||
name,
|
||
description,
|
||
color,
|
||
}: {
|
||
icon: React.ReactNode;
|
||
name: string;
|
||
description: string;
|
||
color: "blue" | "orange" | "green" | "purple";
|
||
}) {
|
||
const colorClasses = {
|
||
blue: "from-blue-500 to-cyan-500 border-blue-300 dark:border-blue-700",
|
||
orange: "from-orange-500 to-red-500 border-orange-300 dark:border-orange-700",
|
||
green: "from-green-500 to-emerald-500 border-green-300 dark:border-green-700",
|
||
purple: "from-purple-500 to-pink-500 border-purple-300 dark:border-purple-700",
|
||
};
|
||
|
||
return (
|
||
<Card className={`p-3 hover-lift animate-slide-up border-2 ${colorClasses[color]}`}>
|
||
<div className="flex flex-col items-center justify-center">
|
||
<div className={`inline-flex items-center justify-center w-10 h-10 rounded-full bg-gradient-to-br ${colorClasses[color].split(' ')[0]} ${colorClasses[color].split(' ')[1]} text-white mb-2 shadow-lg`}>
|
||
{icon}
|
||
</div>
|
||
<h4 className="font-semibold text-xs mb-0.5">{name}</h4>
|
||
<p className="text-xs text-gray-600 dark:text-gray-400">{description}</p>
|
||
</div>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
function AgentCard({
|
||
name,
|
||
icon,
|
||
gradient,
|
||
description,
|
||
tasks,
|
||
}: {
|
||
name: string;
|
||
icon: React.ReactNode;
|
||
gradient: string;
|
||
description: string;
|
||
tasks: string[];
|
||
}) {
|
||
return (
|
||
<Card className="p-4 hover-lift animate-scale-up relative overflow-hidden group">
|
||
<div className={`absolute inset-0 bg-gradient-to-br ${gradient} opacity-0 group-hover:opacity-10 transition-opacity duration-300`} />
|
||
|
||
<div className="relative z-10">
|
||
<div className="text-center mb-3">
|
||
<div className={`inline-flex items-center justify-center w-10 h-10 rounded-full bg-gradient-to-br ${gradient} text-white mb-2 shadow-lg`}>
|
||
{icon}
|
||
</div>
|
||
<h4 className="font-bold text-sm mb-0.5">{name}</h4>
|
||
<p className="text-xs text-gray-500 dark:text-gray-400">{description}</p>
|
||
</div>
|
||
|
||
<div className="space-y-0.5">
|
||
{tasks.map((task, index) => (
|
||
<div key={index} className="flex items-start text-xs text-gray-600 dark:text-gray-400">
|
||
<span className="mr-1">•</span>
|
||
<span>{task}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
function ManagerCard({
|
||
name,
|
||
icon,
|
||
gradient,
|
||
description,
|
||
tasks,
|
||
}: {
|
||
name: string;
|
||
icon: React.ReactNode;
|
||
gradient: string;
|
||
description: string;
|
||
tasks: string[];
|
||
}) {
|
||
return (
|
||
<Card className={`p-5 hover-lift relative overflow-hidden border-2 bg-gradient-to-br ${gradient} bg-opacity-5`}>
|
||
<div className="text-center mb-3">
|
||
<div className={`inline-flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-br ${gradient} text-white mb-2 shadow-xl`}>
|
||
{icon}
|
||
</div>
|
||
<h4 className="font-bold text-base mb-1">{name}</h4>
|
||
<p className="text-sm text-gray-600 dark:text-gray-400">{description}</p>
|
||
</div>
|
||
|
||
<div className="space-y-1">
|
||
{tasks.map((task, index) => (
|
||
<div key={index} className="flex items-start text-sm text-gray-700 dark:text-gray-300">
|
||
<span className="mr-2">✓</span>
|
||
<span>{task}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
function TraderCard({
|
||
name,
|
||
icon,
|
||
gradient,
|
||
description,
|
||
outputs,
|
||
}: {
|
||
name: string;
|
||
icon: React.ReactNode;
|
||
gradient: string;
|
||
description: string;
|
||
outputs: string[];
|
||
}) {
|
||
return (
|
||
<Card className={`p-6 hover-lift relative overflow-hidden border-4 border-double bg-gradient-to-br ${gradient}`}>
|
||
<div className="absolute inset-0 bg-white dark:bg-gray-900 opacity-95" />
|
||
|
||
<div className="relative z-10">
|
||
<div className="text-center mb-4">
|
||
<div className={`inline-flex items-center justify-center w-14 h-14 rounded-full bg-gradient-to-br ${gradient} text-white mb-3 shadow-2xl animate-pulse-slow`}>
|
||
{icon}
|
||
</div>
|
||
<h4 className="font-bold text-lg mb-1 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">{name}</h4>
|
||
<p className="text-sm text-gray-600 dark:text-gray-400 font-medium">{description}</p>
|
||
</div>
|
||
|
||
<div className="space-y-2 bg-gray-50 dark:bg-gray-800/50 p-3 rounded-lg">
|
||
<div className="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2">最終輸出:</div>
|
||
{outputs.map((output, index) => (
|
||
<div key={index} className="flex items-start text-sm font-medium text-gray-700 dark:text-gray-300">
|
||
<span className="mr-2 text-green-600 dark:text-green-400">▸</span>
|
||
<span>{output}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
function FlowArrow({ label, color }: { label: string; color: string }) {
|
||
const colorClasses = {
|
||
blue: "text-blue-500 dark:text-blue-400",
|
||
purple: "text-purple-500 dark:text-purple-400",
|
||
green: "text-green-500 dark:text-green-400",
|
||
orange: "text-orange-500 dark:text-orange-400",
|
||
red: "text-red-500 dark:text-red-400",
|
||
};
|
||
|
||
return (
|
||
<div className="flex justify-center">
|
||
<div className="flex flex-col items-center">
|
||
<div className="text-xs text-gray-500 dark:text-gray-400 mb-1 font-medium">{label}</div>
|
||
<ArrowDown className={`w-7 h-7 ${colorClasses[color as keyof typeof colorClasses]} animate-bounce`} />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ReportSection({
|
||
title,
|
||
items,
|
||
color,
|
||
}: {
|
||
title: string;
|
||
items: string[];
|
||
color: "blue" | "green" | "red";
|
||
}) {
|
||
const colorClasses = {
|
||
blue: "bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-800",
|
||
green: "bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800",
|
||
red: "bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800",
|
||
};
|
||
|
||
return (
|
||
<div className={`p-3 rounded-lg border ${colorClasses[color]}`}>
|
||
<h5 className="font-semibold text-xs mb-2 text-gray-800 dark:text-gray-200">{title}</h5>
|
||
<div className="space-y-1">
|
||
{items.map((item, index) => (
|
||
<div key={index} className="text-xs text-gray-600 dark:text-gray-400 flex items-start">
|
||
<span className="mr-1">•</span>
|
||
<span>{item}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|