306 lines
10 KiB
TypeScript
306 lines
10 KiB
TypeScript
/**
|
|
* Config Modal Component
|
|
* Modal for configuring automation settings
|
|
*/
|
|
import React, { useState } from 'react';
|
|
import { AutomationConfig } from '../../services/automationService';
|
|
import { Modal } from '../ui/modal';
|
|
import Button from '../ui/button/Button';
|
|
|
|
interface ConfigModalProps {
|
|
config: AutomationConfig;
|
|
onSave: (config: Partial<AutomationConfig>) => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
const ConfigModal: React.FC<ConfigModalProps> = ({ config, onSave, onCancel }) => {
|
|
const [formData, setFormData] = useState<Partial<AutomationConfig>>({
|
|
is_enabled: config.is_enabled,
|
|
frequency: config.frequency,
|
|
scheduled_time: config.scheduled_time,
|
|
stage_1_batch_size: config.stage_1_batch_size,
|
|
stage_2_batch_size: config.stage_2_batch_size,
|
|
stage_3_batch_size: config.stage_3_batch_size,
|
|
stage_4_batch_size: config.stage_4_batch_size,
|
|
stage_5_batch_size: config.stage_5_batch_size,
|
|
stage_6_batch_size: config.stage_6_batch_size,
|
|
within_stage_delay: config.within_stage_delay || 3,
|
|
between_stage_delay: config.between_stage_delay || 5,
|
|
});
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
// Ensure delays are included in the save
|
|
const dataToSave = {
|
|
...formData,
|
|
within_stage_delay: formData.within_stage_delay || 3,
|
|
between_stage_delay: formData.between_stage_delay || 5,
|
|
};
|
|
console.log('Saving config with delays:', dataToSave);
|
|
onSave(dataToSave);
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={true}
|
|
onClose={onCancel}
|
|
className="max-w-4xl p-8"
|
|
>
|
|
<h2 className="text-2xl font-bold mb-6">Automation Configuration</h2>
|
|
<div className="max-h-[70vh] overflow-y-auto pr-2">{/* Added pr-2 for scrollbar padding */}
|
|
<form onSubmit={handleSubmit}>
|
|
{/* Enable/Disable */}
|
|
<div className="mb-4">
|
|
<label className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={formData.is_enabled || false}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, is_enabled: e.target.checked })
|
|
}
|
|
className="mr-2"
|
|
/>
|
|
<span className="font-semibold">Enable Automation</span>
|
|
</label>
|
|
<p className="text-sm text-gray-600 ml-6">
|
|
When enabled, automation will run on the configured schedule
|
|
</p>
|
|
</div>
|
|
|
|
{/* Frequency */}
|
|
<div className="mb-4">
|
|
<label className="block font-semibold mb-1">Frequency</label>
|
|
<select
|
|
value={formData.frequency || 'daily'}
|
|
onChange={(e) =>
|
|
setFormData({
|
|
...formData,
|
|
frequency: e.target.value as 'daily' | 'weekly' | 'monthly',
|
|
})
|
|
}
|
|
className="border rounded px-3 py-2 w-full"
|
|
>
|
|
<option value="daily">Daily</option>
|
|
<option value="weekly">Weekly (Mondays)</option>
|
|
<option value="monthly">Monthly (1st of month)</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Scheduled Time */}
|
|
<div className="mb-4">
|
|
<label className="block font-semibold mb-1">Scheduled Time</label>
|
|
<input
|
|
type="time"
|
|
value={formData.scheduled_time || '02:00'}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, scheduled_time: e.target.value })
|
|
}
|
|
className="border rounded px-3 py-2 w-full"
|
|
/>
|
|
<p className="text-sm text-gray-600 mt-1">
|
|
Time of day to run automation (24-hour format)
|
|
</p>
|
|
</div>
|
|
|
|
{/* Batch Sizes */}
|
|
<div className="mb-4">
|
|
<h3 className="font-semibold mb-2">Batch Sizes</h3>
|
|
<p className="text-sm text-gray-600 mb-3">
|
|
Configure how many items to process in each stage
|
|
</p>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm mb-1">
|
|
Stage 1: Keywords → Clusters
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={formData.stage_1_batch_size || 20}
|
|
onChange={(e) =>
|
|
setFormData({
|
|
...formData,
|
|
stage_1_batch_size: parseInt(e.target.value),
|
|
})
|
|
}
|
|
min={1}
|
|
max={100}
|
|
className="border rounded px-3 py-2 w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm mb-1">
|
|
Stage 2: Clusters → Ideas
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={formData.stage_2_batch_size || 1}
|
|
onChange={(e) =>
|
|
setFormData({
|
|
...formData,
|
|
stage_2_batch_size: parseInt(e.target.value),
|
|
})
|
|
}
|
|
min={1}
|
|
max={10}
|
|
className="border rounded px-3 py-2 w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm mb-1">
|
|
Stage 3: Ideas → Tasks
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={formData.stage_3_batch_size || 20}
|
|
onChange={(e) =>
|
|
setFormData({
|
|
...formData,
|
|
stage_3_batch_size: parseInt(e.target.value),
|
|
})
|
|
}
|
|
min={1}
|
|
max={100}
|
|
className="border rounded px-3 py-2 w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm mb-1">
|
|
Stage 4: Tasks → Content
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={formData.stage_4_batch_size || 1}
|
|
onChange={(e) =>
|
|
setFormData({
|
|
...formData,
|
|
stage_4_batch_size: parseInt(e.target.value),
|
|
})
|
|
}
|
|
min={1}
|
|
max={10}
|
|
className="border rounded px-3 py-2 w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm mb-1">
|
|
Stage 5: Content → Image Prompts
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={formData.stage_5_batch_size || 1}
|
|
onChange={(e) =>
|
|
setFormData({
|
|
...formData,
|
|
stage_5_batch_size: parseInt(e.target.value),
|
|
})
|
|
}
|
|
min={1}
|
|
max={10}
|
|
className="border rounded px-3 py-2 w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm mb-1">
|
|
Stage 6: Image Prompts → Images
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={formData.stage_6_batch_size || 1}
|
|
onChange={(e) =>
|
|
setFormData({
|
|
...formData,
|
|
stage_6_batch_size: parseInt(e.target.value),
|
|
})
|
|
}
|
|
min={1}
|
|
max={10}
|
|
className="border rounded px-3 py-2 w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* AI Request Delays */}
|
|
<div className="mb-4 border-t pt-4">
|
|
<h3 className="font-semibold mb-2">AI Request Delays</h3>
|
|
<p className="text-sm text-gray-600 mb-3">
|
|
Configure delays to prevent rate limiting and manage API load
|
|
</p>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm mb-1">
|
|
Within-Stage Delay (seconds)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={formData.within_stage_delay || 3}
|
|
onChange={(e) =>
|
|
setFormData({
|
|
...formData,
|
|
within_stage_delay: parseInt(e.target.value),
|
|
})
|
|
}
|
|
min={0}
|
|
max={30}
|
|
className="border rounded px-3 py-2 w-full"
|
|
/>
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
Delay between batches within a stage
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm mb-1">
|
|
Between-Stage Delay (seconds)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={formData.between_stage_delay || 5}
|
|
onChange={(e) =>
|
|
setFormData({
|
|
...formData,
|
|
between_stage_delay: parseInt(e.target.value),
|
|
})
|
|
}
|
|
min={0}
|
|
max={60}
|
|
className="border rounded px-3 py-2 w-full"
|
|
/>
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
Delay between stage transitions
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Buttons */}
|
|
<div className="flex justify-end gap-2 mt-6">
|
|
<Button
|
|
type="button"
|
|
onClick={onCancel}
|
|
variant="secondary"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
variant="primary"
|
|
>
|
|
Save Configuration
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default ConfigModal;
|