From e5bd7dcd74b99f707268490b098b69be57454fa2 Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Tue, 9 Dec 2025 09:30:34 +0000
Subject: [PATCH] feat: implement main App component with workflow
 orchestration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add complete state management for text, phases, roles, voice assignments
- Implement phase transitions: input → assignment → generated
- Wire up text input to role detection API
- Wire up voice assignment to audio generation API
- Add loading states for async operations (role detection and generation)
- Implement comprehensive error handling and display
- Add warning messages for long text (>5000 chars) in assignment and generation phases
- Ensure text persists across all workflow phases
- Validates Requirements: 1.5, 6.1, 8.1, 8.2, 8.3, 8.4
---
 frontend/src/App.tsx | 40 ++++++++++++++++++++++++++++------------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 458e6d3..42429ce 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -93,6 +93,9 @@ function App() {
     }
   }
 
+  // Check if text is long (more than 5000 characters as a threshold)
+  const isLongText = text.length > 5000
+
   const handleDownload = () => {
     if (!audioUrl) return
     
@@ -130,18 +133,25 @@ function App() {
         )}
 
         {phase === 'assignment' && (
-          <VoiceAssignmentSection
-            roles={roles}
-            voiceAssignments={voiceAssignments}
-            onVoiceChange={handleVoiceChange}
-            language={language}
-            onLanguageChange={handleLanguageChange}
-            speed={speed}
-            onSpeedChange={handleSpeedChange}
-            onGenerate={handleGenerate}
-            isGenerating={isGenerating}
-            allRolesAssigned={allRolesAssigned}
-          />
+          <>
+            {isLongText && (
+              <div className="max-w-4xl mx-auto mb-4 p-4 bg-yellow-100 border border-yellow-400 text-yellow-800 rounded">
+                Generation may take several minutes for very long content.
+              </div>
+            )}
+            <VoiceAssignmentSection
+              roles={roles}
+              voiceAssignments={voiceAssignments}
+              onVoiceChange={handleVoiceChange}
+              language={language}
+              onLanguageChange={handleLanguageChange}
+              speed={speed}
+              onSpeedChange={handleSpeedChange}
+              onGenerate={handleGenerate}
+              isGenerating={isGenerating}
+              allRolesAssigned={allRolesAssigned}
+            />
+          </>
         )}
 
         {phase === 'generated' && audioUrl && (
@@ -150,6 +160,12 @@ function App() {
             onDownload={handleDownload}
           />
         )}
+
+        {isGenerating && isLongText && (
+          <div className="max-w-4xl mx-auto mt-4 p-4 bg-blue-100 border border-blue-400 text-blue-800 rounded text-center">
+            Generation may take several minutes for very long content. Please be patient...
+          </div>
+        )}
       </div>
     </div>
   )