-
📋 Multi-Step Workflow
-
- {/* Progress Bar */}
-
-
- 1. Input
-
-
- 2. Processing
-
-
- 3. Review
-
-
- 4. Complete
-
-
-
- {/* Step Content */}
- {step === 'input' && (
-
-
Step 1: Enter Your Input
-
- )}
-
- {step === 'processing' && (
-
-
⏳ Processing...
-
Loading...
-
- )}
-
- {step === 'review' && (
-
-
Step 3: Review Results
-
- {JSON.stringify(processedData, null, 2)}
-
-
-
-
-
-
- )}
-
- {step === 'complete' && (
-
-
✅ Complete!
-
{finalResult}
-
-
- )}
-
- );
-}
-
-const styles = {
- container: { maxWidth: '800px', margin: '0 auto', padding: '20px' },
- progressBar: {
- display: 'flex',
- gap: '16px',
- marginBottom: '32px',
- justifyContent: 'center'
- },
- progressStep: {
- padding: '12px 24px',
- backgroundColor: '#f5f5f5',
- borderRadius: '4px',
- fontSize: '14px'
- },
- activeStep: {
- backgroundColor: '#007bff',
- color: 'white',
- fontWeight: 'bold' as const
- },
- stepContent: {
- padding: '24px',
- border: '1px solid #ddd',
- borderRadius: '8px'
- },
- textarea: {
- width: '100%',
- padding: '12px',
- border: '1px solid #ddd',
- borderRadius: '4px',
- fontSize: '14px',
- marginBottom: '16px'
- },
- preview: {
- padding: '16px',
- backgroundColor: '#f5f5f5',
- borderRadius: '4px',
- overflow: 'auto',
- maxHeight: '300px',
- marginBottom: '16px'
- },
- spinner: {
- textAlign: 'center' as const,
- padding: '40px'
- },
- result: {
- padding: '16px',
- backgroundColor: '#d4edda',
- borderRadius: '4px',
- marginBottom: '16px'
- },
- buttonGroup: {
- display: 'flex',
- gap: '12px',
- justifyContent: 'flex-end'
- },
- button: {
- padding: '12px 24px',
- backgroundColor: '#007bff',
- color: 'white',
- border: 'none',
- borderRadius: '4px',
- cursor: 'pointer'
- },
- secondaryButton: {
- padding: '12px 24px',
- backgroundColor: '#6c757d',
- color: 'white',
- border: 'none',
- borderRadius: '4px',
- cursor: 'pointer'
- }
-};
-```
-
-### What You'll Learn
-- Multi-step workflows
-- State management across steps
-- Progress indicators
-- Conditional rendering
-
----
-
-## 6. Thread Management UI
-
-Manage conversation threads.
-
-```typescript
-// components/ThreadManagement.tsx
-import { useState, useEffect } from 'react';
-import { AgentFlowClient, Message } from '@10xscale/agentflow-client';
-
-interface Thread {
- id: string;
- name: string;
- lastMessage: string;
- timestamp: Date;
-}
-
-export function ThreadManagement() {
- const [threads, setThreads] = useState