feat(ui): Phase 8 UI/UX optimization and system documentation update
## Sidebar Enhancement - Change tabs to icon + small label layout for better space utilization - Add Teams tab with team collaboration entry point ## Settings Page Improvements - Connect theme toggle to gatewayStore.saveQuickConfig for persistence - Remove OpenFang backend download section, simplify UI - Add time range filter to UsageStats (7d/30d/all) - Add stat cards with icons (sessions, messages, input/output tokens) - Add token usage overview bar chart - Add 8 ZCLAW system skill definitions with categories ## Bug Fixes - Fix ChannelList duplicate content with deduplication logic - Integrate CreateTriggerModal in TriggersPanel - Add independent SecurityStatusPanel with 12 default enabled layers - Change workflow view to use SchedulerPanel as unified entry ## New Components - CreateTriggerModal: Event trigger creation modal - HandApprovalModal: Hand approval workflow dialog - HandParamsForm: Enhanced Hand parameter form - SecurityLayersPanel: 16-layer security status display ## Architecture - Add TOML config parsing support (toml-utils.ts, config-parser.ts) - Add request timeout and retry mechanism (request-helper.ts) - Add secure token storage (secure-storage.ts, secure_storage.rs) ## Tests - Add unit tests for config-parser, toml-utils, request-helper - Add team-client and teamStore tests ## Documentation - Update SYSTEM_ANALYSIS.md with Phase 8 completion - UI completion: 100% (30/30 components) - API coverage: 93% (63/68 endpoints) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
iven
538
desktop/src/components/CreateTriggerModal.tsx
Normal file
538
desktop/src/components/CreateTriggerModal.tsx
Normal file
@@ -0,0 +1,538 @@
|
||||
/**
|
||||
* CreateTriggerModal - Modal for creating event triggers
|
||||
*
|
||||
* Supports trigger types:
|
||||
* - webhook: External HTTP request trigger
|
||||
* - event: OpenFang internal event trigger
|
||||
* - message: Chat message pattern trigger
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useGatewayStore } from '../store/gatewayStore';
|
||||
import {
|
||||
Zap,
|
||||
X,
|
||||
AlertCircle,
|
||||
CheckCircle,
|
||||
Loader2,
|
||||
Globe,
|
||||
MessageSquare,
|
||||
Bell,
|
||||
} from 'lucide-react';
|
||||
|
||||
// === 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: 'OpenFang 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) {
|
||||
const { hands, workflows, createTrigger, loadHands, loadWorkflows } = useGatewayStore();
|
||||
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
|
||||
try {
|
||||
new RegExp(formData.pattern);
|
||||
} catch {
|
||||
newErrors.pattern = 'Invalid regular expression 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;
|
||||
Reference in New Issue
Block a user