wehub-resource-sync
239 lines
8.8 KiB
TypeScript
239 lines
8.8 KiB
TypeScript
"use client";
|
|
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { useState } from "react";
|
|
import type { Node } from "@xyflow/react";
|
|
|
|
interface ConnectionMapperModalProps {
|
|
sourceNode: Node | null;
|
|
targetNode: Node | null;
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onConnect: (mapping: Record<string, string>) => void;
|
|
}
|
|
|
|
export default function ConnectionMapperModal({
|
|
sourceNode,
|
|
targetNode,
|
|
isOpen,
|
|
onClose,
|
|
onConnect,
|
|
}: ConnectionMapperModalProps) {
|
|
const [mapping, setMapping] = useState<Record<string, string>>({});
|
|
|
|
if (!sourceNode || !targetNode) return null;
|
|
|
|
const sourceData = sourceNode.data as any;
|
|
const targetData = targetNode.data as any;
|
|
|
|
// Get output keys from source node
|
|
const getOutputKeys = (node: Node): string[] => {
|
|
const data = node.data as any;
|
|
const keys: string[] = [];
|
|
|
|
// Check if there's an outputSchema defined
|
|
if (data.outputSchema && Array.isArray(data.outputSchema)) {
|
|
keys.push(...data.outputSchema.map((field: any) => field.name));
|
|
}
|
|
|
|
// Check if JSON output with schema
|
|
if (data.jsonOutputSchema) {
|
|
try {
|
|
const schema = JSON.parse(data.jsonOutputSchema);
|
|
if (schema.properties) {
|
|
keys.push(...Object.keys(schema.properties));
|
|
}
|
|
} catch (e) {
|
|
// Invalid JSON
|
|
}
|
|
}
|
|
|
|
// Add default keys based on node type
|
|
const nodeType = data.nodeType;
|
|
if (nodeType === 'mcp' || nodeType === 'firecrawl') {
|
|
const outputField = data.outputField || 'full';
|
|
if (outputField === 'markdown') keys.push('markdown');
|
|
else if (outputField === 'html') keys.push('html');
|
|
else if (outputField === 'metadata') keys.push('metadata', 'metadata.title', 'metadata.description');
|
|
else if (outputField === 'results') keys.push('results[]', 'results[0]');
|
|
else if (outputField === 'urls') keys.push('urls[]');
|
|
else if (outputField === 'json') keys.push('json');
|
|
else keys.push('*');
|
|
}
|
|
|
|
// If no specific keys, add common ones
|
|
if (keys.length === 0) {
|
|
keys.push('message', 'data', 'result');
|
|
}
|
|
|
|
return keys;
|
|
};
|
|
|
|
// Get input keys from target node (from arguments)
|
|
const getInputKeys = (node: Node): string[] => {
|
|
const data = node.data as any;
|
|
|
|
if (data.arguments && Array.isArray(data.arguments)) {
|
|
return data.arguments.map((arg: any) => arg.name);
|
|
}
|
|
|
|
return ['input'];
|
|
};
|
|
|
|
const sourceKeys = getOutputKeys(sourceNode);
|
|
const targetKeys = getInputKeys(targetNode);
|
|
|
|
const handleConnect = () => {
|
|
onConnect(mapping);
|
|
onClose();
|
|
};
|
|
|
|
const handleQuickConnect = () => {
|
|
// Auto-map matching field names
|
|
const autoMapping: Record<string, string> = {};
|
|
|
|
targetKeys.forEach(targetKey => {
|
|
// Try to find exact match
|
|
const exactMatch = sourceKeys.find(sk => sk === targetKey);
|
|
if (exactMatch) {
|
|
autoMapping[targetKey] = exactMatch;
|
|
return;
|
|
}
|
|
|
|
// Try partial match
|
|
const partialMatch = sourceKeys.find(sk =>
|
|
sk.toLowerCase().includes(targetKey.toLowerCase()) ||
|
|
targetKey.toLowerCase().includes(sk.toLowerCase())
|
|
);
|
|
if (partialMatch) {
|
|
autoMapping[targetKey] = partialMatch;
|
|
}
|
|
});
|
|
|
|
setMapping(autoMapping);
|
|
};
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{isOpen && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 bg-black-alpha-48 z-[200] flex items-center justify-center p-20"
|
|
onClick={onClose}
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0.95, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
exit={{ scale: 0.95, opacity: 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="bg-accent-white rounded-16 shadow-2xl max-w-600 w-full max-h-[80vh] overflow-y-auto"
|
|
>
|
|
{/* Header */}
|
|
<div className="p-24 border-b border-border-faint">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-title-h3 text-accent-black">Map Connection</h2>
|
|
<p className="text-body-small text-black-alpha-48 mt-4">
|
|
{sourceData.nodeName} → {targetData.nodeName}
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="w-32 h-32 rounded-6 hover:bg-black-alpha-4 transition-colors flex items-center justify-center"
|
|
>
|
|
<svg className="w-16 h-16 text-black-alpha-48" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-24 space-y-20">
|
|
{/* Quick Auto-Map */}
|
|
<button
|
|
onClick={handleQuickConnect}
|
|
className="w-full px-16 py-10 bg-heat-4 hover:bg-heat-8 border border-heat-100 rounded-8 text-body-medium text-heat-100 transition-colors flex items-center justify-center gap-8"
|
|
>
|
|
<svg className="w-16 h-16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
Auto-Map Fields
|
|
</button>
|
|
|
|
{/* Mapping Grid */}
|
|
<div className="space-y-12">
|
|
<div className="grid grid-cols-2 gap-12 pb-12 border-b border-border-faint">
|
|
<p className="text-label-small text-black-alpha-48">From ({sourceData.nodeName})</p>
|
|
<p className="text-label-small text-black-alpha-48">To ({targetData.nodeName})</p>
|
|
</div>
|
|
|
|
{targetKeys.map((targetKey) => (
|
|
<div key={targetKey} className="grid grid-cols-2 gap-12 items-center">
|
|
<select
|
|
value={mapping[targetKey] || ''}
|
|
onChange={(e) => setMapping({ ...mapping, [targetKey]: e.target.value })}
|
|
className="px-12 py-8 bg-background-base border border-border-faint rounded-6 text-body-small text-accent-black font-mono focus:outline-none focus:border-heat-100 transition-colors"
|
|
>
|
|
<option value="">-- Select source --</option>
|
|
<option value="__full__">Full Output</option>
|
|
{sourceKeys.map((sourceKey) => (
|
|
<option key={sourceKey} value={sourceKey}>
|
|
{sourceKey}
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
<div className="flex items-center gap-8">
|
|
<svg className="w-12 h-12 text-heat-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
<code className="text-body-small text-accent-black font-mono">{targetKey}</code>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Preview */}
|
|
{Object.keys(mapping).length > 0 && (
|
|
<div className="p-16 bg-blue-50 rounded-12 border border-blue-200">
|
|
<h3 className="text-label-small text-blue-900 mb-8 font-medium">Connection Preview</h3>
|
|
<div className="space-y-4 text-body-small text-blue-800 font-mono">
|
|
{Object.entries(mapping).map(([target, source]) => (
|
|
<div key={target}>
|
|
{target} = {source === '__full__' ? 'entire output' : source}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="p-24 border-t border-border-faint flex items-center justify-between">
|
|
<button
|
|
onClick={() => {
|
|
setMapping({});
|
|
onConnect({});
|
|
}}
|
|
className="px-20 py-10 text-body-medium text-black-alpha-48 hover:text-accent-black transition-colors"
|
|
>
|
|
Skip Mapping
|
|
</button>
|
|
<button
|
|
onClick={handleConnect}
|
|
className="px-24 py-10 bg-heat-100 hover:bg-heat-200 text-white rounded-8 transition-all active:scale-[0.98] text-body-medium font-medium"
|
|
>
|
|
Connect
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|