0d4fa96b82
Some checks failed
CI / Lint & TypeCheck (push) Has been cancelled
CI / Unit Tests (push) Has been cancelled
CI / Build Frontend (push) Has been cancelled
CI / Rust Check (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
重构所有代码和文档中的项目名称，将OpenFang统一更新为ZCLAW。包括： - 配置文件中的项目名称 - 代码注释和文档引用 - 环境变量和路径 - 类型定义和接口名称 - 测试用例和模拟数据 同时优化部分代码结构，移除未使用的模块，并更新相关依赖项。
592 lines
21 KiB
TypeScript
592 lines
21 KiB
TypeScript
/**
|
|
* CreateTriggerModal - Modal for creating event triggers
|
|
*
|
|
* Supports trigger types:
|
|
* - webhook: External HTTP request trigger
|
|
* - event: ZCLAW internal event trigger
|
|
* - message: Chat message pattern trigger
|
|
*/
|
|
|
|
import { useState, useEffect, useCallback } from 'react';
|
|
import { useHandStore } from '../store/handStore';
|
|
import { useWorkflowStore } from '../store/workflowStore';
|
|
import {
|
|
Zap,
|
|
X,
|
|
AlertCircle,
|
|
CheckCircle,
|
|
Loader2,
|
|
Globe,
|
|
MessageSquare,
|
|
Bell,
|
|
} from 'lucide-react';
|
|
|
|
// === ReDoS Protection ===
|
|
|
|
const MAX_PATTERN_LENGTH = 200;
|
|
const REGEX_TIMEOUT_MS = 100;
|
|
|
|
// Dangerous regex patterns that can cause catastrophic backtracking
|
|
const DANGEROUS_PATTERNS = [
|
|
/\([^)]*\+[^)]*\)\+/, // Nested quantifiers like (a+)+
|
|
/\([^)]*\*[^)]*\)\*/, // Nested quantifiers like (a*)*
|
|
/\([^)]*\+[^)]*\)\*/, // Mixed nested quantifiers
|
|
/\([^)]*\*[^)]*\)\+/, // Mixed nested quantifiers
|
|
/\.\*\.\*/, // Multiple greedy wildcards
|
|
/\.+\.\+/, // Multiple greedy wildcards
|
|
/(.*)\1{3,}/, // Backreference loops
|
|
];
|
|
|
|
function validateRegexPattern(pattern: string): { valid: boolean; error?: string } {
|
|
// Length check
|
|
if (pattern.length > MAX_PATTERN_LENGTH) {
|
|
return { valid: false, error: `Pattern too long (max ${MAX_PATTERN_LENGTH} chars)` };
|
|
}
|
|
|
|
// Check for dangerous constructs
|
|
for (const dangerous of DANGEROUS_PATTERNS) {
|
|
if (dangerous.test(pattern)) {
|
|
return { valid: false, error: 'Pattern contains potentially dangerous constructs' };
|
|
}
|
|
}
|
|
|
|
// Validate syntax and check execution time
|
|
try {
|
|
const regex = new RegExp(pattern);
|
|
const testString = 'a'.repeat(20) + 'b'.repeat(20);
|
|
const start = Date.now();
|
|
regex.test(testString);
|
|
const elapsed = Date.now() - start;
|
|
|
|
if (elapsed > REGEX_TIMEOUT_MS) {
|
|
return { valid: false, error: 'Pattern is too complex (execution timeout)' };
|
|
}
|
|
|
|
return { valid: true };
|
|
} catch (err: unknown) {
|
|
const message = err instanceof Error ? err.message : 'Invalid pattern';
|
|
return { valid: false, error: `Invalid regular expression: ${message}` };
|
|
}
|
|
}
|
|
|
|
// === Types ===
|
|
|
|
type TriggerType = 'webhook' | 'event' | 'message';
|
|
type TargetType = 'hand' | 'workflow';
|
|
|
|
interface TriggerFormData {
|
|
name: string;
|
|
type: TriggerType;
|
|
pattern: string;
|
|
targetType: TargetType;
|
|
targetId: string;
|
|
webhookPath: string;
|
|
eventType: string;
|
|
enabled: boolean;
|
|
}
|
|
|
|
interface CreateTriggerModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSuccess: () => void;
|
|
}
|
|
|
|
const initialFormData: TriggerFormData = {
|
|
name: '',
|
|
type: 'webhook',
|
|
pattern: '',
|
|
targetType: 'hand',
|
|
targetId: '',
|
|
webhookPath: '',
|
|
eventType: '',
|
|
enabled: true,
|
|
};
|
|
|
|
// === Trigger Type Options ===
|
|
|
|
const triggerTypeOptions: Array<{
|
|
value: TriggerType;
|
|
label: string;
|
|
description: string;
|
|
icon: React.ComponentType<{ className?: string }>;
|
|
}> = [
|
|
{
|
|
value: 'webhook',
|
|
label: 'Webhook',
|
|
description: 'External HTTP request trigger',
|
|
icon: Globe,
|
|
},
|
|
{
|
|
value: 'event',
|
|
label: 'Event',
|
|
description: 'ZCLAW internal event trigger',
|
|
icon: Bell,
|
|
},
|
|
{
|
|
value: 'message',
|
|
label: 'Message',
|
|
description: 'Chat message pattern trigger',
|
|
icon: MessageSquare,
|
|
},
|
|
];
|
|
|
|
// === Event Type Options ===
|
|
|
|
const eventTypeOptions = [
|
|
{ value: 'file_changed', label: 'File Changed' },
|
|
{ value: 'agent_started', label: 'Agent Started' },
|
|
{ value: 'agent_stopped', label: 'Agent Stopped' },
|
|
{ value: 'hand_completed', label: 'Hand Completed' },
|
|
{ value: 'workflow_completed', label: 'Workflow Completed' },
|
|
{ value: 'session_created', label: 'Session Created' },
|
|
{ value: 'custom', label: 'Custom Event' },
|
|
];
|
|
|
|
// === Component ===
|
|
|
|
export function CreateTriggerModal({ isOpen, onClose, onSuccess }: CreateTriggerModalProps) {
|
|
// Store state - use domain stores
|
|
const hands = useHandStore((s) => s.hands);
|
|
const workflows = useWorkflowStore((s) => s.workflows);
|
|
const createTrigger = useHandStore((s) => s.createTrigger);
|
|
const loadHands = useHandStore((s) => s.loadHands);
|
|
const loadWorkflows = useWorkflowStore((s) => s.loadWorkflows);
|
|
const [formData, setFormData] = useState<TriggerFormData>(initialFormData);
|
|
const [errors, setErrors] = useState<Record<string, string>>({});
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');
|
|
const [errorMessage, setErrorMessage] = useState('');
|
|
|
|
// Load available targets on mount
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
loadHands();
|
|
loadWorkflows();
|
|
}
|
|
}, [isOpen, loadHands, loadWorkflows]);
|
|
|
|
// Reset form when modal opens
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setFormData(initialFormData);
|
|
setErrors({});
|
|
setSubmitStatus('idle');
|
|
setErrorMessage('');
|
|
}
|
|
}, [isOpen]);
|
|
|
|
// Validate form
|
|
const validateForm = useCallback((): boolean => {
|
|
const newErrors: Record<string, string> = {};
|
|
|
|
if (!formData.name.trim()) {
|
|
newErrors.name = 'Trigger name is required';
|
|
}
|
|
|
|
switch (formData.type) {
|
|
case 'webhook':
|
|
if (!formData.webhookPath.trim()) {
|
|
newErrors.webhookPath = 'Webhook path is required';
|
|
} else if (!formData.webhookPath.startsWith('/')) {
|
|
newErrors.webhookPath = 'Webhook path must start with /';
|
|
}
|
|
break;
|
|
case 'event':
|
|
if (!formData.eventType) {
|
|
newErrors.eventType = 'Event type is required';
|
|
}
|
|
break;
|
|
case 'message':
|
|
if (!formData.pattern.trim()) {
|
|
newErrors.pattern = 'Pattern is required';
|
|
} else {
|
|
// Validate regex pattern with ReDoS protection
|
|
const validation = validateRegexPattern(formData.pattern);
|
|
if (!validation.valid) {
|
|
newErrors.pattern = validation.error || 'Invalid pattern';
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
|
|
if (!formData.targetId) {
|
|
newErrors.targetId = 'Please select a target';
|
|
}
|
|
|
|
setErrors(newErrors);
|
|
return Object.keys(newErrors).length === 0;
|
|
}, [formData]);
|
|
|
|
// Handle form submission
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!validateForm()) {
|
|
return;
|
|
}
|
|
|
|
setIsSubmitting(true);
|
|
setSubmitStatus('idle');
|
|
setErrorMessage('');
|
|
|
|
try {
|
|
// Build config based on trigger type
|
|
const config: Record<string, unknown> = {};
|
|
|
|
switch (formData.type) {
|
|
case 'webhook':
|
|
config.path = formData.webhookPath;
|
|
break;
|
|
case 'event':
|
|
config.eventType = formData.eventType;
|
|
break;
|
|
case 'message':
|
|
config.pattern = formData.pattern;
|
|
break;
|
|
}
|
|
|
|
await createTrigger({
|
|
type: formData.type,
|
|
name: formData.name.trim(),
|
|
enabled: formData.enabled,
|
|
config,
|
|
handName: formData.targetType === 'hand' ? formData.targetId : undefined,
|
|
workflowId: formData.targetType === 'workflow' ? formData.targetId : undefined,
|
|
});
|
|
|
|
setSubmitStatus('success');
|
|
setTimeout(() => {
|
|
onSuccess();
|
|
onClose();
|
|
}, 1500);
|
|
} catch (err) {
|
|
setSubmitStatus('error');
|
|
setErrorMessage(err instanceof Error ? err.message : 'Failed to create trigger');
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
// Update form field
|
|
const updateField = <K extends keyof TriggerFormData>(field: K, value: TriggerFormData[K]) => {
|
|
setFormData(prev => ({ ...prev, [field]: value }));
|
|
// Clear error when field is updated
|
|
if (errors[field]) {
|
|
setErrors(prev => {
|
|
const newErrors = { ...prev };
|
|
delete newErrors[field];
|
|
return newErrors;
|
|
});
|
|
}
|
|
};
|
|
|
|
// Get available targets based on type
|
|
const getAvailableTargets = (): Array<{ id: string; name?: string }> => {
|
|
switch (formData.targetType) {
|
|
case 'hand':
|
|
return hands.map(h => ({ id: h.id, name: h.name }));
|
|
case 'workflow':
|
|
return workflows.map(w => ({ id: w.id, name: w.name }));
|
|
default:
|
|
return [];
|
|
}
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
|
{/* Backdrop */}
|
|
<div
|
|
className="absolute inset-0 bg-black/50 backdrop-blur-sm"
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Modal */}
|
|
<div className="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-lg mx-4 max-h-[90vh] overflow-hidden flex flex-col">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 bg-amber-100 dark:bg-amber-900/30 rounded-lg flex items-center justify-center">
|
|
<Zap className="w-4 h-4 text-amber-600 dark:text-amber-400" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
Create Event Trigger
|
|
</h2>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">
|
|
Create a trigger to respond to events
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Form */}
|
|
<form onSubmit={handleSubmit} className="flex-1 overflow-y-auto p-4 space-y-4">
|
|
{/* Trigger Name */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Trigger Name <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.name}
|
|
onChange={(e) => updateField('name', e.target.value)}
|
|
placeholder="e.g., Daily Report Webhook"
|
|
className={`w-full px-3 py-2 text-sm border rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-amber-500 ${
|
|
errors.name ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
|
|
}`}
|
|
/>
|
|
{errors.name && (
|
|
<p className="mt-1 text-xs text-red-500 flex items-center gap-1">
|
|
<AlertCircle className="w-3 h-3" />
|
|
{errors.name}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Trigger Type */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Trigger Type <span className="text-red-500">*</span>
|
|
</label>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
{triggerTypeOptions.map((option) => {
|
|
const Icon = option.icon;
|
|
return (
|
|
<button
|
|
key={option.value}
|
|
type="button"
|
|
onClick={() => updateField('type', option.value as TriggerType)}
|
|
className={`flex flex-col items-center gap-1 p-3 text-sm rounded-lg border transition-colors ${
|
|
formData.type === option.value
|
|
? 'bg-amber-600 text-white border-amber-600'
|
|
: 'bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:border-amber-500'
|
|
}`}
|
|
>
|
|
<Icon className="w-5 h-5" />
|
|
<span>{option.label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
<p className="mt-1 text-xs text-gray-400">
|
|
{triggerTypeOptions.find(o => o.value === formData.type)?.description}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Webhook Path */}
|
|
{formData.type === 'webhook' && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Webhook Path <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.webhookPath}
|
|
onChange={(e) => updateField('webhookPath', e.target.value)}
|
|
placeholder="/api/webhooks/daily-report"
|
|
className={`w-full px-3 py-2 text-sm border rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-amber-500 font-mono ${
|
|
errors.webhookPath ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
|
|
}`}
|
|
/>
|
|
{errors.webhookPath && (
|
|
<p className="mt-1 text-xs text-red-500 flex items-center gap-1">
|
|
<AlertCircle className="w-3 h-3" />
|
|
{errors.webhookPath}
|
|
</p>
|
|
)}
|
|
<p className="mt-1 text-xs text-gray-400">
|
|
The URL path that will trigger this action when called
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Event Type */}
|
|
{formData.type === 'event' && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Event Type <span className="text-red-500">*</span>
|
|
</label>
|
|
<select
|
|
value={formData.eventType}
|
|
onChange={(e) => updateField('eventType', e.target.value)}
|
|
className={`w-full px-3 py-2 text-sm border rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-amber-500 ${
|
|
errors.eventType ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
|
|
}`}
|
|
>
|
|
<option value="">-- Select Event Type --</option>
|
|
{eventTypeOptions.map((option) => (
|
|
<option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{errors.eventType && (
|
|
<p className="mt-1 text-xs text-red-500 flex items-center gap-1">
|
|
<AlertCircle className="w-3 h-3" />
|
|
{errors.eventType}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Message Pattern */}
|
|
{formData.type === 'message' && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Message Pattern <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.pattern}
|
|
onChange={(e) => updateField('pattern', e.target.value)}
|
|
placeholder="^/report"
|
|
className={`w-full px-3 py-2 text-sm border rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-amber-500 font-mono ${
|
|
errors.pattern ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
|
|
}`}
|
|
/>
|
|
{errors.pattern && (
|
|
<p className="mt-1 text-xs text-red-500 flex items-center gap-1">
|
|
<AlertCircle className="w-3 h-3" />
|
|
{errors.pattern}
|
|
</p>
|
|
)}
|
|
<p className="mt-1 text-xs text-gray-400">
|
|
Regular expression pattern to match chat messages
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Target Selection */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Target Type
|
|
</label>
|
|
<div className="flex gap-2">
|
|
{[
|
|
{ value: 'hand', label: 'Hand' },
|
|
{ value: 'workflow', label: 'Workflow' },
|
|
].map((option) => (
|
|
<button
|
|
key={option.value}
|
|
type="button"
|
|
onClick={() => {
|
|
updateField('targetType', option.value as TargetType);
|
|
updateField('targetId', ''); // Reset target when type changes
|
|
}}
|
|
className={`flex-1 px-3 py-2 text-sm rounded-lg border transition-colors ${
|
|
formData.targetType === option.value
|
|
? 'bg-amber-600 text-white border-amber-600'
|
|
: 'bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:border-amber-500'
|
|
}`}
|
|
>
|
|
{option.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Target Selection Dropdown */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Select Target <span className="text-red-500">*</span>
|
|
</label>
|
|
<select
|
|
value={formData.targetId}
|
|
onChange={(e) => updateField('targetId', e.target.value)}
|
|
className={`w-full px-3 py-2 text-sm border rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-amber-500 ${
|
|
errors.targetId ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
|
|
}`}
|
|
>
|
|
<option value="">-- Please Select --</option>
|
|
{getAvailableTargets().map((target) => (
|
|
<option key={target.id} value={target.id}>
|
|
{target.name || target.id}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{errors.targetId && (
|
|
<p className="mt-1 text-xs text-red-500 flex items-center gap-1">
|
|
<AlertCircle className="w-3 h-3" />
|
|
{errors.targetId}
|
|
</p>
|
|
)}
|
|
{getAvailableTargets().length === 0 && (
|
|
<p className="mt-1 text-xs text-gray-400">
|
|
No {formData.targetType === 'hand' ? 'Hands' : 'Workflows'} available
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Enabled Toggle */}
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
id="trigger-enabled"
|
|
checked={formData.enabled}
|
|
onChange={(e) => updateField('enabled', e.target.checked)}
|
|
className="w-4 h-4 text-amber-600 border-gray-300 rounded focus:ring-amber-500"
|
|
/>
|
|
<label htmlFor="trigger-enabled" className="text-sm text-gray-700 dark:text-gray-300">
|
|
Enable immediately after creation
|
|
</label>
|
|
</div>
|
|
|
|
{/* Status Messages */}
|
|
{submitStatus === 'success' && (
|
|
<div className="flex items-center gap-2 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg text-green-700 dark:text-green-400">
|
|
<CheckCircle className="w-5 h-5 flex-shrink-0" />
|
|
<span className="text-sm">Trigger created successfully!</span>
|
|
</div>
|
|
)}
|
|
{submitStatus === 'error' && (
|
|
<div className="flex items-center gap-2 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg text-red-700 dark:text-red-400">
|
|
<AlertCircle className="w-5 h-5 flex-shrink-0" />
|
|
<span className="text-sm">{errorMessage}</span>
|
|
</div>
|
|
)}
|
|
</form>
|
|
|
|
{/* Footer */}
|
|
<div className="flex items-center justify-end gap-2 p-4 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
disabled={isSubmitting}
|
|
className="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors disabled:opacity-50"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
onClick={handleSubmit}
|
|
disabled={isSubmitting || submitStatus === 'success'}
|
|
className="px-4 py-2 text-sm text-white bg-amber-600 rounded-lg hover:bg-amber-700 transition-colors disabled:opacity-50 flex items-center gap-2"
|
|
>
|
|
{isSubmitting ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
Creating...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Zap className="w-4 h-4" />
|
|
Create Trigger
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CreateTriggerModal;
|