Spaces:
Sleeping
Sleeping
File size: 4,416 Bytes
fd52f31 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 |
import React from 'react';
import { Handle, Position } from 'reactflow';
import {
FaKeyboard,
FaRobot,
FaLightbulb,
FaBell,
FaYoutube,
FaBrain,
FaMicrophone,
FaSlidersH,
FaSearch,
FaBookReader
} from 'react-icons/fa';
import { BiPodcast } from 'react-icons/bi';
import './CustomNodes.css';
const nodeIcons = {
input: FaKeyboard,
researcher: FaSearch,
agent: FaRobot,
insights: FaBrain,
notify: FaBell,
publish: FaYoutube,
default: BiPodcast
};
// Base node component
const BaseNode = ({ data, nodeType, icon: IconComponent, color, showSourceHandle = true, showTargetHandle = true }) => {
// Use CSS variable through inline style object without TypeScript complaints
const nodeStyle = {
borderColor: color,
// Additional inline styles can be added here
};
// Check if this is an input node with a prompt
const hasPrompt = nodeType === 'input-node' && data.prompt;
return (
<div className={`custom-node ${nodeType}-node ${data.prompt ? 'has-prompt' : ''}`} style={nodeStyle}>
{showTargetHandle && (
<Handle
type="target"
position={Position.Left}
className="custom-handle"
style={{ backgroundColor: color }}
/>
)}
<div className="node-content">
<div className="node-header">
<div className="node-icon" style={{ backgroundColor: color }}>
<IconComponent />
</div>
<div className="node-title">{data.label}</div>
</div>
{data.description && (
<div className="node-description">{data.description}</div>
)}
{data.prompt && nodeType === 'input-node' && (
<div className="node-prompt">
<div className="prompt-indicator">Prompt set ✓</div>
</div>
)}
</div>
{showSourceHandle && (
<Handle
type="source"
position={Position.Right}
className="custom-handle"
style={{ backgroundColor: color }}
/>
)}
</div>
);
};
// Specific node types
export const InputNode = (props) => {
// Input nodes only have source handles (output)
return (
<BaseNode
{...props}
nodeType="input"
icon={FaKeyboard}
color="#6366F1"
showTargetHandle={false}
/>
);
};
// Specialized Researcher node (a type of agent)
export const ResearcherNode = (props) => {
return (
<BaseNode
{...props}
nodeType="researcher"
icon={FaSearch}
color="#4C1D95" // Deep purple
/>
);
};
export const AgentNode = (props) => {
return (
<BaseNode
{...props}
nodeType="agent"
icon={FaRobot}
color="#10B981"
/>
);
};
export const InsightsNode = (props) => {
return (
<BaseNode
{...props}
nodeType="insights"
icon={FaBrain}
color="#F59E0B"
/>
);
};
export const NotifyNode = (props) => {
return (
<BaseNode
{...props}
nodeType="notify"
icon={FaBell}
color="#EF4444"
/>
);
};
export const PublishNode = (props) => {
// Output nodes only have target handles (input)
return (
<BaseNode
{...props}
nodeType="publish"
icon={FaYoutube}
color="#DC2626"
showSourceHandle={false}
/>
);
};
// Default node for any other types
export const DefaultNode = (props) => {
return (
<BaseNode
{...props}
nodeType="default"
icon={BiPodcast}
color="#8B5CF6"
/>
);
};
// A map of node types to their components for easy registration
export const nodeTypes = {
input: InputNode,
researcher: ResearcherNode,
agent: AgentNode,
insights: InsightsNode,
notify: NotifyNode,
output: PublishNode,
default: DefaultNode
};
export default nodeTypes; |