import React, { useState, useCallback } from 'react';
import { Zap } from 'lucide-react';
// Import sub-components for each step
import Header from './Header';
import SetupScreen from './SetupScreen';
import InputScreen from './InputScreen';
import GeneratingScreen from './GeneratingScreen';
import PreviewScreen from './PreviewScreen';
// Import the API services
import { callAnthropicAPI } from '../services/anthropic';
import { callHuggingFaceAPI } from '../services/huggingface'; // New service
import { getPrompts } from '../services/prompts';
const WorkshopGenerator = () => {
const [currentStep, setCurrentStep] = useState('setup');
const [apiKey, setApiKey] = useState({ anthropic: '', huggingface: '' });
const [apiProvider, setApiProvider] = useState('anthropic'); // 'anthropic' or 'huggingface'
const [workshopData, setWorkshopData] = useState({
topic: '',
audience: '',
duration: '90',
difficulty: 'intermediate'
});
const [generatedContent, setGeneratedContent] = useState(null);
const [isGenerating, setIsGenerating] = useState(false);
const [activeAgent, setActiveAgent] = useState('');
const [error, setError] = useState('');
const getApiCallFunction = useCallback(() => {
if (apiProvider === 'huggingface') {
return (prompt, maxTokens) => callHuggingFaceAPI(prompt, apiKey.huggingface, maxTokens);
}
// Default to Anthropic
return (prompt, maxTokens) => callAnthropicAPI(prompt, apiKey.anthropic, maxTokens);
}, [apiProvider, apiKey]);
const generateWorkshop = async () => {
setIsGenerating(true);
setCurrentStep('generating');
setError('');
const callAPI = getApiCallFunction();
const prompts = getPrompts(workshopData);
try {
const runAgent = async (agentName, prompt, maxTokens) => {
setActiveAgent(agentName);
const response = await callAPI(prompt, maxTokens);
const cleanResponse = response.replace(/```json\n?/, "").replace(/```\n?/, "").trim();
try {
return JSON.parse(cleanResponse);
} catch (parseError) {
console.error(`Error parsing JSON from ${agentName}:`, parseError, "Raw response:", response);
throw new Error(`Agent "${agentName}" returned invalid data. Please try again.`);
}
};
// Run the agent pipeline
const topicData = await runAgent('topic', prompts.topic, 1500);
const contentData = await runAgent('content', prompts.content(JSON.stringify(topicData)), 3000);
const slideData = await runAgent('slide', prompts.slide(JSON.stringify(contentData)), 4000);
const codeData = await runAgent('code', prompts.code(JSON.stringify(topicData)), 3000);
// Combine results
setGeneratedContent({
topic: topicData,
content: contentData,
slides: slideData,
code: codeData,
metadata: {
title: topicData.title || workshopData.topic,
modules: topicData.modules?.length || 0,
slideCount: slideData.slide_count || slideData.slides?.length || 0,
exercises: codeData.exercises?.length || 0,
generatedAt: new Date().toISOString(),
provider: apiProvider
}
});
setCurrentStep('preview');
} catch (err) {
console.error("Workshop generation error:", err);
setError(err.message);
setCurrentStep('input');
} finally {
setIsGenerating(false);
setActiveAgent('');
}
};
const resetGenerator = () => {
setCurrentStep('input');
setGeneratedContent(null);
setWorkshopData({ topic: '', audience: '', duration: '90', difficulty: 'intermediate' });
setError('');
};
const renderStep = () => {
switch (currentStep) {
case 'setup':
return