333 lines
14 KiB
TypeScript
333 lines
14 KiB
TypeScript
/*
|
|
┌──────────────────────────────────────────────────────────────────────────────┐
|
|
│ @author: Davidson Gomes │
|
|
│ @file: /app/documentation/components/A2AComplianceCard.tsx │
|
|
│ Developed by: Davidson Gomes │
|
|
│ Creation date: May 13, 2025 │
|
|
│ Contact: contato@evolution-api.com │
|
|
├──────────────────────────────────────────────────────────────────────────────┤
|
|
│ @copyright © Evolution API 2025. All rights reserved. │
|
|
│ Licensed under the Apache License, Version 2.0 │
|
|
│ │
|
|
│ You may not use this file except in compliance with the License. │
|
|
│ You may obtain a copy of the License at │
|
|
│ │
|
|
│ http://www.apache.org/licenses/LICENSE-2.0 │
|
|
│ │
|
|
│ Unless required by applicable law or agreed to in writing, software │
|
|
│ distributed under the License is distributed on an "AS IS" BASIS, │
|
|
│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. │
|
|
│ See the License for the specific language governing permissions and │
|
|
│ limitations under the License. │
|
|
├──────────────────────────────────────────────────────────────────────────────┤
|
|
│ @important │
|
|
│ For any future changes to the code in this file, it is recommended to │
|
|
│ include, together with the modification, the information of the developer │
|
|
│ who changed it and the date of modification. │
|
|
└──────────────────────────────────────────────────────────────────────────────┘
|
|
*/
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Progress } from "@/components/ui/progress";
|
|
import {
|
|
CheckCircle2,
|
|
Clock,
|
|
Shield,
|
|
Zap,
|
|
FileText,
|
|
Settings,
|
|
Network,
|
|
AlertCircle,
|
|
ExternalLink,
|
|
ChevronDown,
|
|
ChevronUp
|
|
} from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
export function A2AComplianceCard() {
|
|
const [showCoreFeatures, setShowCoreFeatures] = useState(false);
|
|
const [showAdvancedFeatures, setShowAdvancedFeatures] = useState(false);
|
|
|
|
const implementedFeatures = [
|
|
{
|
|
name: "JSON-RPC 2.0 Protocol",
|
|
status: "implemented",
|
|
icon: CheckCircle2,
|
|
description: "Full compliance with JSON-RPC 2.0 specification"
|
|
},
|
|
{
|
|
name: "message/send Method",
|
|
status: "implemented",
|
|
icon: CheckCircle2,
|
|
description: "Standard HTTP messaging with proper request/response format"
|
|
},
|
|
{
|
|
name: "message/stream Method",
|
|
status: "implemented",
|
|
icon: CheckCircle2,
|
|
description: "Real-time streaming via Server-Sent Events (SSE)"
|
|
},
|
|
{
|
|
name: "tasks/get Method",
|
|
status: "implemented",
|
|
icon: CheckCircle2,
|
|
description: "Task status querying and monitoring"
|
|
},
|
|
{
|
|
name: "tasks/cancel Method",
|
|
status: "implemented",
|
|
icon: CheckCircle2,
|
|
description: "Task cancellation support"
|
|
},
|
|
{
|
|
name: "agent/authenticatedExtendedCard",
|
|
status: "implemented",
|
|
icon: CheckCircle2,
|
|
description: "Agent discovery and capability enumeration"
|
|
},
|
|
{
|
|
name: "File Upload Support",
|
|
status: "implemented",
|
|
icon: CheckCircle2,
|
|
description: "Base64 file encoding with proper MIME type handling"
|
|
},
|
|
{
|
|
name: "UUID v4 Message IDs",
|
|
status: "implemented",
|
|
icon: CheckCircle2,
|
|
description: "Standards-compliant unique message identification"
|
|
},
|
|
{
|
|
name: "Authentication Methods",
|
|
status: "implemented",
|
|
icon: CheckCircle2,
|
|
description: "API Key and Bearer token authentication"
|
|
},
|
|
{
|
|
name: "Task State Management",
|
|
status: "implemented",
|
|
icon: CheckCircle2,
|
|
description: "Complete task lifecycle: submitted → working → completed/failed"
|
|
},
|
|
{
|
|
name: "Artifact Handling",
|
|
status: "implemented",
|
|
icon: CheckCircle2,
|
|
description: "Complex response data with structured artifacts"
|
|
},
|
|
{
|
|
name: "CORS Compliance",
|
|
status: "implemented",
|
|
icon: CheckCircle2,
|
|
description: "Proper cross-origin resource sharing configuration"
|
|
},
|
|
{
|
|
name: "tasks/pushNotificationConfig/set",
|
|
status: "implemented",
|
|
icon: CheckCircle2,
|
|
description: "Set push notification configuration for tasks"
|
|
},
|
|
{
|
|
name: "tasks/pushNotificationConfig/get",
|
|
status: "implemented",
|
|
icon: CheckCircle2,
|
|
description: "Get push notification configuration for tasks"
|
|
},
|
|
{
|
|
name: "tasks/resubscribe",
|
|
status: "implemented",
|
|
icon: CheckCircle2,
|
|
description: "Resubscribe to task updates and notifications"
|
|
}
|
|
];
|
|
|
|
const advancedFeatures = [
|
|
{
|
|
name: "Push Notifications",
|
|
status: "implemented",
|
|
icon: CheckCircle2,
|
|
description: "A2A pushNotificationConfig methods and webhook support"
|
|
},
|
|
{
|
|
name: "Multi-turn Conversations",
|
|
status: "implemented",
|
|
icon: CheckCircle2,
|
|
description: "Context preservation via contextId field as per A2A specification"
|
|
},
|
|
{
|
|
name: "Enhanced Error Diagnostics",
|
|
status: "implemented",
|
|
icon: AlertCircle,
|
|
description: "Comprehensive A2A error analysis and troubleshooting guidance"
|
|
}
|
|
];
|
|
|
|
const implementedCount = implementedFeatures.filter(f => f.status === 'implemented').length;
|
|
const totalFeatures = implementedFeatures.length + advancedFeatures.length;
|
|
const partialCount = advancedFeatures.filter(f => f.status === 'partial').length;
|
|
const advancedImplementedCount = advancedFeatures.filter(f => f.status === 'implemented').length;
|
|
const totalImplementedCount = implementedCount + advancedImplementedCount;
|
|
const completionPercentage = Math.round(((totalImplementedCount + (partialCount * 0.5)) / totalFeatures) * 100);
|
|
|
|
const getStatusColor = (status: string) => {
|
|
switch (status) {
|
|
case 'implemented': return 'text-green-400';
|
|
case 'partial': return 'text-yellow-400';
|
|
case 'planned': return 'text-blue-400';
|
|
default: return 'text-neutral-400';
|
|
}
|
|
};
|
|
|
|
const getStatusIcon = (status: string, IconComponent: any) => {
|
|
const colorClass = getStatusColor(status);
|
|
return <IconComponent className={`h-4 w-4 ${colorClass}`} />;
|
|
};
|
|
|
|
return (
|
|
<Card className="bg-gradient-to-br from-emerald-500/5 to-blue-500/5 border-emerald-500/20 text-white">
|
|
<CardHeader>
|
|
<CardTitle className="text-emerald-400 flex items-center">
|
|
<Network className="h-5 w-5 mr-2" />
|
|
A2A Specification Compliance
|
|
</CardTitle>
|
|
<div className="flex items-center space-x-4">
|
|
<div className="flex-1">
|
|
<div className="flex justify-between text-sm mb-1">
|
|
<span className="text-neutral-300">Implementation Progress</span>
|
|
<span className="text-emerald-400 font-medium">{completionPercentage}%</span>
|
|
</div>
|
|
<Progress value={completionPercentage} className="h-2" />
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<button
|
|
onClick={() => {
|
|
const shouldExpand = !showCoreFeatures || !showAdvancedFeatures;
|
|
setShowCoreFeatures(shouldExpand);
|
|
setShowAdvancedFeatures(shouldExpand);
|
|
}}
|
|
className="text-xs text-neutral-400 hover:text-white transition-colors px-2 py-1 rounded border border-neutral-600 hover:border-neutral-400"
|
|
>
|
|
{showCoreFeatures && showAdvancedFeatures ? 'Collapse All' : 'Expand All'}
|
|
</button>
|
|
<Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30">
|
|
v0.2.0 Compatible
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="flex justify-center">
|
|
<a
|
|
href="https://google.github.io/A2A/specification"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center bg-blue-500/10 hover:bg-blue-500/20 px-4 py-2 rounded-lg border border-blue-500/20 transition-colors"
|
|
>
|
|
<FileText className="h-4 w-4 mr-2 text-blue-400" />
|
|
<span className="text-blue-400">View Official Specification</span>
|
|
<ExternalLink className="h-3 w-3 ml-2 text-blue-400" />
|
|
</a>
|
|
</div>
|
|
|
|
<div>
|
|
<div
|
|
className="flex items-center justify-between cursor-pointer hover:bg-[#222]/30 p-2 rounded-lg transition-colors mb-4 border border-transparent hover:border-[#333]"
|
|
onClick={() => setShowCoreFeatures(!showCoreFeatures)}
|
|
>
|
|
<h3 className="text-white font-semibold flex items-center">
|
|
<CheckCircle2 className="h-4 w-4 mr-2 text-green-400" />
|
|
Core Features
|
|
<span className="ml-2 text-green-400 text-sm">({implementedCount}/{implementedFeatures.length} implemented)</span>
|
|
</h3>
|
|
<div className="flex items-center space-x-2">
|
|
<span className="text-xs text-neutral-500">
|
|
{showCoreFeatures ? 'Hide details' : 'Show details'}
|
|
</span>
|
|
{showCoreFeatures ? (
|
|
<ChevronUp className="h-4 w-4 text-neutral-400 hover:text-white transition-colors" />
|
|
) : (
|
|
<ChevronDown className="h-4 w-4 text-neutral-400 hover:text-white transition-colors" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{showCoreFeatures && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
{implementedFeatures.map((feature, index) => (
|
|
<div key={index} className="flex items-start space-x-3 bg-[#222]/50 p-3 rounded-lg border border-[#333]">
|
|
{getStatusIcon(feature.status, feature.icon)}
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-white truncate">{feature.name}</p>
|
|
<p className="text-xs text-neutral-400">{feature.description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<div
|
|
className="flex items-center justify-between cursor-pointer hover:bg-[#222]/30 p-2 rounded-lg transition-colors mb-4 border border-transparent hover:border-[#333]"
|
|
onClick={() => setShowAdvancedFeatures(!showAdvancedFeatures)}
|
|
>
|
|
<h3 className="text-white font-semibold flex items-center">
|
|
<Settings className="h-4 w-4 mr-2 text-blue-400" />
|
|
Advanced Features
|
|
<span className="ml-2 text-blue-400 text-sm">({advancedImplementedCount}/{advancedFeatures.length} implemented)</span>
|
|
</h3>
|
|
<div className="flex items-center space-x-2">
|
|
<span className="text-xs text-neutral-500">
|
|
{showAdvancedFeatures ? 'Hide details' : 'Show details'}
|
|
</span>
|
|
{showAdvancedFeatures ? (
|
|
<ChevronUp className="h-4 w-4 text-neutral-400 hover:text-white transition-colors" />
|
|
) : (
|
|
<ChevronDown className="h-4 w-4 text-neutral-400 hover:text-white transition-colors" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{showAdvancedFeatures && (
|
|
<div className="space-y-3">
|
|
{advancedFeatures.map((feature, index) => (
|
|
<div key={index} className="flex items-start space-x-3 bg-[#222]/50 p-3 rounded-lg border border-[#333]">
|
|
{getStatusIcon(feature.status, feature.icon)}
|
|
<div className="flex-1">
|
|
<div className="flex items-center space-x-2">
|
|
<p className="text-sm font-medium text-white">{feature.name}</p>
|
|
<Badge
|
|
variant="outline"
|
|
className={`text-xs ${
|
|
feature.status === 'implemented' ? 'border-green-500 text-green-400' :
|
|
feature.status === 'partial' ? 'border-yellow-500 text-yellow-400' :
|
|
'border-blue-500 text-blue-400'
|
|
}`}
|
|
>
|
|
{feature.status}
|
|
</Badge>
|
|
</div>
|
|
<p className="text-xs text-neutral-400 mt-1">{feature.description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="bg-emerald-500/10 border border-emerald-500/20 rounded-lg p-4">
|
|
<div className="flex items-start space-x-2">
|
|
<Shield className="h-4 w-4 text-emerald-400 mt-0.5" />
|
|
<div className="text-sm">
|
|
<p className="text-emerald-400 font-medium">✓ 100% A2A v0.2.0 Compliance Achieved</p>
|
|
<p className="text-emerald-300 mt-1">
|
|
All 8 official RPC methods implemented • Complete protocol data objects • Full workflow support • Enterprise security ready
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|