wehub-resource-sync
207 lines
8.6 KiB
TypeScript
207 lines
8.6 KiB
TypeScript
"use client";
|
|
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { useState, useEffect } from "react";
|
|
|
|
interface ExtractNodePanelProps {
|
|
nodeData: any;
|
|
onUpdate: (nodeId: string, updates: any) => void;
|
|
onClose: () => void;
|
|
onAddMCP: () => void;
|
|
}
|
|
|
|
export default function ExtractNodePanel({
|
|
nodeData,
|
|
onUpdate,
|
|
onClose,
|
|
onAddMCP,
|
|
}: ExtractNodePanelProps) {
|
|
const [instructions, setInstructions] = useState(nodeData?.instructions || 'Extract information from the input');
|
|
const [model, setModel] = useState(nodeData?.model || 'gpt-4o');
|
|
const [customModel, setCustomModel] = useState('');
|
|
const [jsonSchema, setJsonSchema] = useState(
|
|
nodeData?.jsonSchema || JSON.stringify({
|
|
type: "object",
|
|
properties: {
|
|
title: { type: "string", description: "The title" },
|
|
summary: { type: "string", description: "A brief summary" },
|
|
},
|
|
required: ["title"]
|
|
}, null, 2)
|
|
);
|
|
const [schemaError, setSchemaError] = useState('');
|
|
|
|
// Validate JSON schema
|
|
useEffect(() => {
|
|
try {
|
|
JSON.parse(jsonSchema);
|
|
setSchemaError('');
|
|
} catch (e) {
|
|
setSchemaError('Invalid JSON');
|
|
}
|
|
}, [jsonSchema]);
|
|
|
|
useEffect(() => {
|
|
onUpdate(nodeData?.id, {
|
|
instructions,
|
|
model,
|
|
jsonSchema,
|
|
nodeType: 'extract',
|
|
});
|
|
}, [instructions, model, jsonSchema, nodeData?.id, onUpdate]);
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
<motion.aside
|
|
initial={{ x: 400, opacity: 0 }}
|
|
animate={{ x: 0, opacity: 1 }}
|
|
exit={{ x: 400, opacity: 0 }}
|
|
transition={{ duration: 0.3 }}
|
|
className="fixed right-20 top-80 h-[calc(100vh-100px)] w-[calc(100vw-240px)] max-w-480 bg-accent-white border border-border-faint shadow-lg overflow-hidden z-50 rounded-16 flex flex-col"
|
|
>
|
|
{/* Header */}
|
|
<div className="p-20 border-b border-border-faint flex-shrink-0">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-title-h3 text-accent-black">Extract (Schema)</h2>
|
|
<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>
|
|
<p className="text-body-small text-black-alpha-48 mt-4">
|
|
Use LLM to extract structured data with a JSON schema
|
|
</p>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-y-auto p-20 space-y-24">
|
|
{/* Instructions */}
|
|
<div>
|
|
<label className="block text-label-small text-black-alpha-48 mb-8">
|
|
Extraction Instructions
|
|
</label>
|
|
<textarea
|
|
value={instructions}
|
|
onChange={(e) => setInstructions(e.target.value)}
|
|
placeholder="What information should be extracted?"
|
|
rows={4}
|
|
className="w-full px-12 py-10 bg-background-base border border-border-faint rounded-8 text-body-medium text-accent-black focus:outline-none focus:border-heat-100 transition-colors resize-none"
|
|
/>
|
|
<p className="text-body-small text-black-alpha-32 mt-6">
|
|
The LLM will extract data matching the schema below
|
|
</p>
|
|
</div>
|
|
|
|
{/* Model Selection */}
|
|
<div>
|
|
<label className="block text-label-small text-black-alpha-48 mb-8">
|
|
Model
|
|
</label>
|
|
<select
|
|
value={model}
|
|
onChange={(e) => setModel(e.target.value)}
|
|
className="w-full px-12 py-10 bg-background-base border border-border-faint rounded-8 text-body-medium text-accent-black focus:outline-none focus:border-heat-100 transition-colors"
|
|
>
|
|
<optgroup label="Anthropic">
|
|
<option value="anthropic/claude-sonnet-4-5-20250929">Claude Sonnet 4.5</option>
|
|
<option value="anthropic/claude-haiku-4-5-20251001">Claude Haiku 4.5</option>
|
|
</optgroup>
|
|
<optgroup label="OpenAI">
|
|
<option value="gpt-4o">GPT-5</option>
|
|
<option value="gpt-4o-mini">GPT-5 Mini</option>
|
|
</optgroup>
|
|
<optgroup label="Groq">
|
|
<option value="groq/openai/gpt-oss-120b">GPT OSS 120B</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
|
|
{/* JSON Schema */}
|
|
<div>
|
|
<label className="block text-label-small text-black-alpha-48 mb-8">
|
|
Output Schema (JSON Schema)
|
|
</label>
|
|
<textarea
|
|
value={jsonSchema}
|
|
onChange={(e) => setJsonSchema(e.target.value)}
|
|
rows={12}
|
|
className={`w-full px-12 py-10 bg-background-base border rounded-8 text-body-small text-accent-black font-mono focus:outline-none focus:border-heat-100 transition-colors resize-none ${
|
|
schemaError ? 'border-red-500' : 'border-border-faint'
|
|
}`}
|
|
/>
|
|
{schemaError && (
|
|
<p className="text-body-small text-accent-black mt-6">{schemaError}</p>
|
|
)}
|
|
<p className="text-body-small text-black-alpha-32 mt-6">
|
|
Define the structure of data to extract
|
|
</p>
|
|
</div>
|
|
|
|
{/* MCP Tools */}
|
|
<div>
|
|
<div className="flex items-center justify-between mb-8">
|
|
<label className="block text-label-small text-black-alpha-48">
|
|
MCP Tools (Optional)
|
|
</label>
|
|
<button
|
|
onClick={onAddMCP}
|
|
className="px-10 py-6 bg-background-base hover:bg-black-alpha-4 border border-border-faint rounded-6 text-body-small text-accent-black transition-colors flex items-center gap-6"
|
|
>
|
|
<svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
Add MCP
|
|
</button>
|
|
</div>
|
|
|
|
{nodeData?.mcpTools && nodeData.mcpTools.length > 0 ? (
|
|
<div className="space-y-8">
|
|
{nodeData.mcpTools.map((mcp: any, index: number) => (
|
|
<div key={index} className="p-12 bg-background-base rounded-8 border border-border-faint">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1">
|
|
<p className="text-body-small text-accent-black font-medium">{mcp.name}</p>
|
|
<p className="text-body-small text-black-alpha-48 font-mono text-xs truncate mt-4">
|
|
{mcp.url}
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
const newTools = nodeData.mcpTools.filter((_: any, i: number) => i !== index);
|
|
onUpdate(nodeData.id, { mcpTools: newTools });
|
|
}}
|
|
className="w-24 h-24 rounded-4 hover:bg-black-alpha-4 transition-colors flex items-center justify-center group"
|
|
>
|
|
<svg className="w-12 h-12 text-black-alpha-48 group-hover:text-accent-black" 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>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="p-16 bg-background-base rounded-8 border border-border-faint text-center">
|
|
<p className="text-body-small text-black-alpha-48">
|
|
No MCP tools - the agent will only use the LLM
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Info Box */}
|
|
<div className="p-16 bg-accent-white rounded-12 border border-border-faint">
|
|
<p className="text-body-small text-accent-black">
|
|
<strong>How it works:</strong> The LLM analyzes the input and extracts data matching your JSON schema. Use MCP tools to give the agent access to external data sources like web search.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</motion.aside>
|
|
</AnimatePresence>
|
|
);
|
|
}
|