mirror of
https://github.com/arc53/DocsGPT.git
synced 2026-02-22 04:11:41 +00:00
2a3f0e455a
* feat: add condition node functionality with CEL evaluation - Introduced ConditionNode to support conditional branching in workflows. - Implemented CEL evaluation for state updates and condition expressions. - Updated WorkflowEngine to handle condition nodes and their execution logic. - Enhanced validation for workflows to ensure condition nodes have at least two outgoing edges and valid expressions. - Modified frontend components to support new condition node type and its configuration. - Added necessary types and interfaces for condition cases and state operations. - Updated requirements to include cel-python for expression evaluation. * mini-fixes * feat(workflow): improve UX --------- Co-authored-by: Alex <a@tushynski.me>
95 lines
2.8 KiB
TypeScript
95 lines
2.8 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Handle, Position } from 'reactflow';
|
|
|
|
interface BaseNodeProps {
|
|
title: string;
|
|
children?: ReactNode;
|
|
selected?: boolean;
|
|
type?: 'start' | 'end' | 'default' | 'state' | 'agent' | 'condition';
|
|
icon?: ReactNode;
|
|
handles?: {
|
|
source?: boolean;
|
|
target?: boolean;
|
|
};
|
|
}
|
|
|
|
export const BaseNode: React.FC<BaseNodeProps> = ({
|
|
title,
|
|
children,
|
|
selected,
|
|
type = 'default',
|
|
icon,
|
|
handles = { source: true, target: true },
|
|
}) => {
|
|
let bgColor = 'bg-white dark:bg-[#2C2C2C]';
|
|
let borderColor = 'border-gray-200 dark:border-[#3A3A3A]';
|
|
let iconBg = 'bg-gray-100 dark:bg-gray-800';
|
|
let iconColor = 'text-gray-600 dark:text-gray-400';
|
|
|
|
if (selected) {
|
|
borderColor =
|
|
'border-violets-are-blue ring-2 ring-purple-300 dark:ring-violets-are-blue';
|
|
}
|
|
|
|
if (type === 'start') {
|
|
iconBg = 'bg-green-100 dark:bg-green-900/30';
|
|
iconColor = 'text-green-600 dark:text-green-400';
|
|
} else if (type === 'end') {
|
|
iconBg = 'bg-red-100 dark:bg-red-900/30';
|
|
iconColor = 'text-red-600 dark:text-red-400';
|
|
} else if (type === 'state') {
|
|
iconBg = 'bg-gray-100 dark:bg-gray-800';
|
|
iconColor = 'text-gray-600 dark:text-gray-400';
|
|
} else if (type === 'condition') {
|
|
iconBg = 'bg-orange-100 dark:bg-orange-900/30';
|
|
iconColor = 'text-orange-600 dark:text-orange-400';
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`rounded-full border ${bgColor} ${borderColor} shadow-md transition-all hover:shadow-lg ${
|
|
selected ? 'scale-105' : ''
|
|
} max-w-[250px] min-w-[180px]`}
|
|
>
|
|
{handles.target && (
|
|
<Handle
|
|
type="target"
|
|
position={Position.Left}
|
|
isConnectable={true}
|
|
className="hover:bg-violets-are-blue! -left-1! h-3! w-3! rounded-full! border-2! border-white! bg-gray-400! transition-colors dark:border-[#2C2C2C]!"
|
|
/>
|
|
)}
|
|
|
|
<div className="flex items-center gap-3 px-4 py-3">
|
|
<div
|
|
className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-full ${iconBg} ${iconColor}`}
|
|
>
|
|
{icon}
|
|
</div>
|
|
<div className="min-w-0 flex-1 pr-3">
|
|
<div
|
|
className="truncate text-sm font-semibold text-gray-900 dark:text-white"
|
|
title={title}
|
|
>
|
|
{title}
|
|
</div>
|
|
{children && (
|
|
<div className="mt-1 truncate text-xs text-gray-600 dark:text-gray-400">
|
|
{children}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{handles.source && (
|
|
<Handle
|
|
type="source"
|
|
position={Position.Right}
|
|
isConnectable={true}
|
|
className="hover:bg-violets-are-blue! -right-1! h-3! w-3! rounded-full! border-2! border-white! bg-gray-400! transition-colors dark:border-[#2C2C2C]!"
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|