364 lines
14 KiB
TypeScript
364 lines
14 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import {
|
|
Search,
|
|
Download,
|
|
X,
|
|
Loader2,
|
|
AlertCircle,
|
|
Eye,
|
|
Check,
|
|
Globe,
|
|
FileJson,
|
|
} from "lucide-react";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Card, CardContent, CardFooter } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { api, type GitHubAgentFile, type AgentExport } from "@/lib/api";
|
|
import { AGENT_ICONS, type AgentIconName } from "./CCAgents";
|
|
interface GitHubAgentBrowserProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onImportSuccess: () => void;
|
|
}
|
|
|
|
interface AgentPreview {
|
|
file: GitHubAgentFile;
|
|
data: AgentExport | null;
|
|
loading: boolean;
|
|
error: string | null;
|
|
}
|
|
|
|
export const GitHubAgentBrowser: React.FC<GitHubAgentBrowserProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
onImportSuccess,
|
|
}) => {
|
|
const [agents, setAgents] = useState<GitHubAgentFile[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [selectedAgent, setSelectedAgent] = useState<AgentPreview | null>(null);
|
|
const [importing, setImporting] = useState(false);
|
|
const [importedAgents, setImportedAgents] = useState<Set<string>>(new Set());
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
fetchAgents();
|
|
}
|
|
}, [isOpen]);
|
|
|
|
const fetchAgents = async () => {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
const agentFiles = await api.fetchGitHubAgents();
|
|
setAgents(agentFiles);
|
|
} catch (err) {
|
|
console.error("Failed to fetch GitHub agents:", err);
|
|
setError("Failed to fetch agents from GitHub. Please check your internet connection.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handlePreviewAgent = async (file: GitHubAgentFile) => {
|
|
setSelectedAgent({
|
|
file,
|
|
data: null,
|
|
loading: true,
|
|
error: null,
|
|
});
|
|
|
|
try {
|
|
const agentData = await api.fetchGitHubAgentContent(file.download_url);
|
|
setSelectedAgent({
|
|
file,
|
|
data: agentData,
|
|
loading: false,
|
|
error: null,
|
|
});
|
|
} catch (err) {
|
|
console.error("Failed to fetch agent content:", err);
|
|
setSelectedAgent({
|
|
file,
|
|
data: null,
|
|
loading: false,
|
|
error: "Failed to load agent details",
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleImportAgent = async () => {
|
|
if (!selectedAgent?.file) return;
|
|
|
|
try {
|
|
setImporting(true);
|
|
await api.importAgentFromGitHub(selectedAgent.file.download_url);
|
|
|
|
// Mark as imported
|
|
setImportedAgents(prev => new Set(prev).add(selectedAgent.file.name));
|
|
|
|
// Close preview
|
|
setSelectedAgent(null);
|
|
|
|
// Notify parent
|
|
onImportSuccess();
|
|
} catch (err) {
|
|
console.error("Failed to import agent:", err);
|
|
alert(`Failed to import agent: ${err instanceof Error ? err.message : "Unknown error"}`);
|
|
} finally {
|
|
setImporting(false);
|
|
}
|
|
};
|
|
|
|
const filteredAgents = agents.filter(agent =>
|
|
agent.name.toLowerCase().includes(searchQuery.toLowerCase())
|
|
);
|
|
|
|
const getAgentDisplayName = (fileName: string) => {
|
|
return fileName.replace(".claudia.json", "").replace(/-/g, " ")
|
|
.split(" ")
|
|
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
|
|
.join(" ");
|
|
};
|
|
|
|
const renderIcon = (iconName: string) => {
|
|
const Icon = AGENT_ICONS[iconName as AgentIconName] || AGENT_ICONS.bot;
|
|
return <Icon className="h-8 w-8" />;
|
|
};
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
<DialogContent className="max-w-4xl max-h-[80vh] overflow-hidden flex flex-col">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<Globe className="h-5 w-5" />
|
|
Import Agent from GitHub
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="flex-1 overflow-hidden flex flex-col">
|
|
{/* Search Bar */}
|
|
<div className="mb-4">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Search agents..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="pl-10"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-y-auto">
|
|
{loading ? (
|
|
<div className="flex items-center justify-center h-64">
|
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : error ? (
|
|
<div className="flex flex-col items-center justify-center h-64 text-center">
|
|
<AlertCircle className="h-12 w-12 text-destructive mb-4" />
|
|
<p className="text-sm text-muted-foreground mb-4">{error}</p>
|
|
<Button onClick={fetchAgents} variant="outline" size="sm">
|
|
Try Again
|
|
</Button>
|
|
</div>
|
|
) : filteredAgents.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center h-64 text-center">
|
|
<FileJson className="h-12 w-12 text-muted-foreground mb-4" />
|
|
<p className="text-sm text-muted-foreground">
|
|
{searchQuery ? "No agents found matching your search" : "No agents available"}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 pb-4">
|
|
<AnimatePresence mode="popLayout">
|
|
{filteredAgents.map((agent, index) => (
|
|
<motion.div
|
|
key={agent.sha}
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 0.9 }}
|
|
transition={{ duration: 0.2, delay: index * 0.05 }}
|
|
>
|
|
<Card className="h-full hover:shadow-lg transition-shadow cursor-pointer"
|
|
onClick={() => handlePreviewAgent(agent)}>
|
|
<CardContent className="p-4">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<h3 className="text-sm font-semibold line-clamp-2">
|
|
{getAgentDisplayName(agent.name)}
|
|
</h3>
|
|
{importedAgents.has(agent.name) && (
|
|
<Badge variant="secondary" className="ml-2">
|
|
<Check className="h-3 w-3 mr-1" />
|
|
Imported
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
{(agent.size / 1024).toFixed(1)} KB
|
|
</p>
|
|
</CardContent>
|
|
<CardFooter className="p-4 pt-0">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="w-full"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handlePreviewAgent(agent);
|
|
}}
|
|
>
|
|
<Eye className="h-3 w-3 mr-2" />
|
|
Preview
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</motion.div>
|
|
))}
|
|
</AnimatePresence>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
|
|
{/* Agent Preview Dialog */}
|
|
<AnimatePresence>
|
|
{selectedAgent && (
|
|
<Dialog open={!!selectedAgent} onOpenChange={() => setSelectedAgent(null)}>
|
|
<DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center justify-between">
|
|
<span>Agent Preview</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setSelectedAgent(null)}
|
|
className="h-8 w-8"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="flex-1 overflow-y-auto">
|
|
{selectedAgent.loading ? (
|
|
<div className="flex items-center justify-center h-64">
|
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : selectedAgent.error ? (
|
|
<div className="flex flex-col items-center justify-center h-64 text-center">
|
|
<AlertCircle className="h-12 w-12 text-destructive mb-4" />
|
|
<p className="text-sm text-muted-foreground">{selectedAgent.error}</p>
|
|
</div>
|
|
) : selectedAgent.data ? (
|
|
<div className="space-y-4">
|
|
{/* Agent Info */}
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-3 rounded-lg bg-primary/10 text-primary">
|
|
{renderIcon(selectedAgent.data.agent.icon)}
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-lg font-semibold">
|
|
{selectedAgent.data.agent.name}
|
|
</h3>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<Badge variant="outline">{selectedAgent.data.agent.model}</Badge>
|
|
{selectedAgent.data.agent.sandbox_enabled && (
|
|
<Badge variant="secondary">Sandbox</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* System Prompt */}
|
|
<div>
|
|
<h4 className="text-sm font-medium mb-2">System Prompt</h4>
|
|
<div className="bg-muted rounded-lg p-3 max-h-48 overflow-y-auto">
|
|
<pre className="text-xs whitespace-pre-wrap font-mono">
|
|
{selectedAgent.data.agent.system_prompt}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Default Task */}
|
|
{selectedAgent.data.agent.default_task && (
|
|
<div>
|
|
<h4 className="text-sm font-medium mb-2">Default Task</h4>
|
|
<div className="bg-muted rounded-lg p-3">
|
|
<p className="text-sm">{selectedAgent.data.agent.default_task}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Permissions */}
|
|
<div>
|
|
<h4 className="text-sm font-medium mb-2">Permissions</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Badge variant={selectedAgent.data.agent.enable_file_read ? "default" : "secondary"}>
|
|
File Read: {selectedAgent.data.agent.enable_file_read ? "Yes" : "No"}
|
|
</Badge>
|
|
<Badge variant={selectedAgent.data.agent.enable_file_write ? "default" : "secondary"}>
|
|
File Write: {selectedAgent.data.agent.enable_file_write ? "Yes" : "No"}
|
|
</Badge>
|
|
<Badge variant={selectedAgent.data.agent.enable_network ? "default" : "secondary"}>
|
|
Network: {selectedAgent.data.agent.enable_network ? "Yes" : "No"}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Metadata */}
|
|
<div className="text-xs text-muted-foreground">
|
|
<p>Version: {selectedAgent.data.version}</p>
|
|
<p>Exported: {new Date(selectedAgent.data.exported_at).toLocaleDateString()}</p>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
{selectedAgent.data && (
|
|
<div className="flex justify-end gap-2 mt-4 pt-4 border-t">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setSelectedAgent(null)}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
onClick={handleImportAgent}
|
|
disabled={importing || importedAgents.has(selectedAgent.file.name)}
|
|
>
|
|
{importing ? (
|
|
<>
|
|
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
|
Importing...
|
|
</>
|
|
) : importedAgents.has(selectedAgent.file.name) ? (
|
|
<>
|
|
<Check className="h-4 w-4 mr-2" />
|
|
Already Imported
|
|
</>
|
|
) : (
|
|
<>
|
|
<Download className="h-4 w-4 mr-2" />
|
|
Import Agent
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
)}
|
|
</AnimatePresence>
|
|
</Dialog>
|
|
);
|
|
};
|