Update src/frontend/gradio/app.py

src/frontend/gradio/app.py

@@ -9,6 +9,7 @@ from typing import Optional, Tuple
 import sys
 from pathlib import Path
 import requests
+import uuid
 
 project_root = Path(__file__).resolve().parent.parent.parent.parent
 sys.path.insert(0, str(project_root))
@@ -61,6 +62,41 @@ def get_voice_screening_url() -> str:
     voice_url = os.getenv("VOICE_SCREENING_UI_URL", "http://localhost:8502")
     return voice_url
 
+def get_proxy_url(for_client: bool = False) -> str:
+    """Get WebSocket proxy URL from environment or default."""
+    proxy_url = os.getenv("WEBSOCKET_PROXY_URL", "ws://localhost:8000/ws/realtime")
+    if for_client:
+        if "websocket_proxy" in proxy_url:
+            proxy_url = proxy_url.replace("websocket_proxy", "localhost")
+    return proxy_url
+
+def get_proxy_base_url() -> str:
+    """Get HTTP base URL for proxy API calls."""
+    proxy_url = get_proxy_url(for_client=False)
+    return proxy_url.replace("ws://", "http://").replace("wss://", "https://").replace("/ws/realtime", "")
+
+def authenticate_voice_screening(email: str, auth_code: str) -> Tuple[str, Optional[str], Optional[str]]:
+    """Authenticate user for voice screening. Returns (status_message, session_token, candidate_id)."""
+    if not email or not auth_code:
+        return "❌ Please enter both email and authentication code.", None, None
+    try:
+        proxy_base = get_proxy_base_url()
+        response = requests.post(
+            f"{proxy_base}/auth/verify",
+            json={"email": email, "code": auth_code},
+            timeout=5
+        )
+        if response.status_code == 200:
+            data = response.json()
+            session_token = data.get("session_token")
+            candidate_id = data.get("candidate_id")
+            return f"✅ Authentication successful! Session token: {session_token[:20]}...", session_token, candidate_id
+        else:
+            error_data = response.json() if response.content else {}
+            return f"❌ Authentication failed: {error_data.get('detail', response.text)}", None, None
+    except Exception as e:
+        return f"❌ Error connecting to proxy: {str(e)}", None, None
+
 # ============================================================================
 # CANDIDATE APPLICATION PORTAL
 # ============================================================================
@@ -831,7 +867,8 @@ def create_app():
                 submit_btn.click(
                     fn=submit_application,
                     inputs=[full_name, email, phone, cv_file],
-                    outputs=application_output
+                    outputs=application_output,
+                    show_progress="full"
                 )
                 
                 gr.Markdown("---")
@@ -864,18 +901,10 @@ def create_app():
                 
                 gr.Markdown("---")
                 gr.Markdown("## 🎙️ Voice Screening")
-                
-                # Voice screening page link
-                voice_screening_url = get_voice_screening_url()
-                gr.HTML(f"""
-                <div style="background: #eff6ff; border-left: 4px solid #2563eb; padding: 1rem; border-radius: 0 8px 8px 0; margin-bottom: 1rem;">
-                    <strong>🎙️ Voice Screening Interface:</strong><br>
-                    <a href="{voice_screening_url}" target="_blank" style="color: #2563eb; text-decoration: underline; font-weight: 600;">
-                        Open Voice Screening Page → {voice_screening_url}
-                    </a>
-                    <br><small style="color: #64748b;">Candidates can access this page to complete their voice screening interview.</small>
-                </div>
-                """)
+                gr.HTML('''<div class="info-box">
+                    <strong>Note:</strong> Use the "🎙️ Voice Screening" tab to access the voice interview interface. 
+                    Trigger voice screening for a candidate below to generate their authentication code.
+                </div>''')
                 
                 with gr.Row():
                     voice_email = gr.Textbox(label="Candidate Email", placeholder="candidate@example.com", scale=3)
@@ -895,7 +924,100 @@ def create_app():
                 interview_btn.click(fn=schedule_interview, inputs=interview_email, outputs=interview_output)
             
             # ============================================================
-            # TAB 3: Supervisor Chat
+            # TAB 3: Voice Screening
+            # ============================================================
+            with gr.Tab("🎙️ Voice Screening"):
+                gr.Markdown("## 🎙️ Voice Screening Interview")
+                gr.HTML('''<div class="info-box">
+                    <strong>Instructions:</strong> Enter your email and authentication code to start the voice screening interview. 
+                    You will receive the authentication code when HR triggers voice screening for you.
+                </div>''')
+                
+                # Authentication section
+                with gr.Row():
+                    with gr.Column():
+                        gr.Markdown("### 🔐 Authentication")
+                        vs_email = gr.Textbox(label="Email", placeholder="your.email@example.com")
+                        vs_auth_code = gr.Textbox(label="Authentication Code", placeholder="Enter your 6-digit code", type="password")
+                        vs_auth_btn = gr.Button("✅ Authenticate", variant="primary")
+                        vs_auth_status = gr.Markdown()
+                        
+                        # Hidden components for session management
+                        vs_session_token = gr.State()
+                        vs_candidate_id = gr.State()
+                        vs_session_id = gr.State()
+                
+                # Voice interface (shown after authentication)
+                voice_interface_row = gr.Row(visible=False)
+                with voice_interface_row:
+                    with gr.Column():
+                        gr.Markdown("### 🎤 Voice Interview")
+                        voice_interface_html = gr.HTML()
+                        transcript_display = gr.Markdown("### 📝 Transcript\n\n*Transcript will appear here during the interview...*")
+                        
+                        with gr.Row():
+                            start_interview_btn = gr.Button("🚀 Start Interview", variant="primary")
+                            end_interview_btn = gr.Button("⏹️ End Interview", variant="secondary")
+                
+                def handle_authentication(email: str, auth_code: str):
+                    """Handle voice screening authentication."""
+                    status_msg, session_token, candidate_id = authenticate_voice_screening(email, auth_code)
+                    if session_token:
+                        session_id = str(uuid.uuid4())
+                        return (
+                            status_msg,
+                            gr.update(visible=True),  # Show voice interface
+                            session_token,
+                            candidate_id or "",
+                            session_id
+                        )
+                    return (
+                        status_msg,
+                        gr.update(visible=False),  # Hide voice interface
+                        None,
+                        None,
+                        None
+                    )
+                
+                def start_interview(session_token, candidate_id, session_id):
+                    """Start the voice interview and load HTML component."""
+                    if not session_token:
+                        return "❌ Please authenticate first.", gr.HTML()
+                    
+                    # Load the HTML component
+                    html_file_path = Path(__file__).parent.parent / "streamlit" / "voice_screening_ui" / "components" / "voice_interface.html"
+                    
+                    if not html_file_path.exists():
+                        return "❌ Voice interface component not found.", gr.HTML("<p>Voice interface HTML file not found.</p>")
+                    
+                    with open(html_file_path, 'r', encoding='utf-8') as f:
+                        html_content = f.read()
+                    
+                    # Get proxy URL
+                    proxy_url = get_proxy_url(for_client=True)
+                    ws_url = f"{proxy_url}?token={session_token}"
+                    
+                    # Replace placeholders
+                    html_content = html_content.replace("{{SESSION_ID}}", session_id or "")
+                    html_content = html_content.replace("{{SESSION_TOKEN}}", session_token)
+                    html_content = html_content.replace("{{PROXY_URL}}", ws_url)
+                    
+                    return "✅ Interview started! Use the microphone button to speak.", gr.HTML(html_content)
+                
+                vs_auth_btn.click(
+                    fn=handle_authentication,
+                    inputs=[vs_email, vs_auth_code],
+                    outputs=[vs_auth_status, voice_interface_row, vs_session_token, vs_candidate_id, vs_session_id]
+                )
+                
+                start_interview_btn.click(
+                    fn=start_interview,
+                    inputs=[vs_session_token, vs_candidate_id, vs_session_id],
+                    outputs=[vs_auth_status, voice_interface_html]
+                )
+            
+            # ============================================================
+            # TAB 4: Supervisor Chat
             # ============================================================
             with gr.Tab("🤖 Supervisor Chat"):
                 gr.Markdown("## 💬 Chat with HR Supervisor Agent")