ui-soxo-bootstrap-core 2.6.1-dev.2 → 2.6.1-dev.20

package/core/modules/steps/steps.js

@@ -4,24 +4,273 @@
  * - Manages a multi-step, time-tracked process workflow.
  * - Dynamically renders step-specific components based on configuration.
  * - Tracks step and process durations with local persistence support.
- * - Supports step navigation (next, previous, skip, timeline, keyboard).
+ * - Supports step navigation (next, previous, skip, breadcrumb, keyboard).
  * - Handles process submission and optional chaining to the next process.
- * - Provides a collapsible timeline view and action controls.
+ * - Renders a single active step view with compact breadcrumb controls.
  */
-import React, { useEffect, useState } from 'react';
-import { Row, Col, Empty } from 'antd';
-import { Card } from './../../lib';
+import React, { useEffect, useRef, useState } from 'react';
+import { Row, Col, Empty, Spin, Select, message } from 'antd';
+import { Card, Button } from './../../lib';
 import * as genericComponents from './../../lib';
 import moment from 'moment';
 import { Location } from './../../lib';
-import ActionButtons from './action-buttons';
 import { Dashboard } from '../../models';
 import './steps.scss';
-import TimelinePanel from './timeline';
 import { ExternalWindow } from '../../components';
+import { SoundOutlined, ExpandOutlined, CompressOutlined } from '@ant-design/icons';
+import { createOpenAIRealtimeSession, hasOpenAIRealtimeCredentials } from './openai-realtime';
+
+const STEP_WELCOME_LINES = [
+  'Welcome to your AI Automated Consultation process.',
+  'You are in the right place for a smooth and guided health journey.',
+  'This experience is designed to keep your consultation easy and stress-free.',
+];
+
+const STEP_INTRO_LINES = [
+  'In this process, we will walk you through a seamless and friendly AI interaction experience.',
+  'Each step is simple, guided, and focused on helping you feel prepared.',
+  'We will guide you through each stage so you always know what happens next.',
+];
+
+const STEP_EXPECTATION_LINES = [
+  'A care specialist may ask quick clarification questions to ensure your details are accurate.',
+  'This step focuses on collecting clear inputs so the care team can support you faster.',
+  'You can expect a guided workflow with minimal waiting and clear instructions.',
+  'The goal in this step is to keep your consultation organized and easy to follow.',
+];
+
+const STEP_COMFORT_LINES = [
+  'Take your time. There is no rush and assistance is always available nearby.',
+  'If anything feels unclear, the next prompt will guide you before you continue.',
+  'You can pause and review information before moving to the next stage.',
+  'Your responses here help personalize the rest of your consultation flow.',
+];
+
+const STEP_TIP_LINES = [
+  'Tip: Keep your previous reports or test details ready for quicker progress.',
+  'Tip: Follow on-screen prompts one at a time for the smoothest experience.',
+  'Tip: If you are unsure about a question, answer what you know and continue.',
+  'Tip: Stay relaxed; this process is built to be simple and patient-friendly.',
+];
+
+const VOICE_PROVIDER_OPTIONS = [
+  { label: 'Gemini', value: 'gemini' },
+  { label: 'ElevenLabs', value: 'elevenlabs' },
+  { label: 'OpenAI', value: 'openai' },
+];
+
+const GEMINI_VOICE_OPTIONS = [{ label: 'Kore', value: 'Kore' }];
+const DEFAULT_GEMINI_TTS_VOICE = process.env.GEMINI_TTS_VOICE || process.env.REACT_APP_GEMINI_TTS_VOICE || GEMINI_VOICE_OPTIONS[0].value;
+const OPENAI_TTS_VOICE_OPTIONS = [
+  { label: 'Alloy', value: 'alloy' },
+  { label: 'Ash', value: 'ash' },
+  { label: 'Coral', value: 'coral' },
+  { label: 'Echo', value: 'echo' },
+  { label: 'Fable', value: 'fable' },
+  { label: 'Nova', value: 'nova' },
+  { label: 'Onyx', value: 'onyx' },
+  { label: 'Sage', value: 'sage' },
+  { label: 'Shimmer', value: 'shimmer' },
+];
+const DEFAULT_OPENAI_TTS_VOICE =
+  process.env.OPENAI_TTS_VOICE ||
+  process.env.REACT_APP_OPENAI_TTS_VOICE ||
+  process.env.OPENAI_REALTIME_VOICE ||
+  process.env.REACT_APP_OPENAI_REALTIME_VOICE ||
+  OPENAI_TTS_VOICE_OPTIONS[0].value;
+
+const ELEVENLABS_VOICE_OPTIONS = [
+  { label: 'Rachel', value: '21m00Tcm4TlvDq8ikWAM' },
+  { label: 'Adam', value: 'pNInz6obpgDQGcFmaJgB' },
+  { label: 'Bella', value: 'EXAVITQu4vr4xnSDxMaL' },
+  { label: 'Antoni', value: 'ErXwobaYiN019PkySvjV' },
+  { label: 'Josh', value: 'TxGEqnHWrfWFTfGW9XjX' },
+];
+const DEFAULT_ELEVENLABS_VOICE_ID =
+  process.env.ELEVENLABS_VOICE_ID ||
+  process.env.ELEVEN_LABS_VOICE_ID ||
+  process.env.REACT_APP_ELEVENLABS_VOICE_ID ||
+  ELEVENLABS_VOICE_OPTIONS[0].value;
+
+const SARVAM_VOICE_OPTIONS = [
+  { label: 'Anushka', value: 'anushka' },
+  { label: 'Manisha', value: 'manisha' },
+  { label: 'Vidya', value: 'vidya' },
+  { label: 'Arya', value: 'arya' },
+  { label: 'Karun', value: 'karun' },
+  { label: 'Hitesh', value: 'hitesh' },
+];
+
+const ELEVENLABS_TTS_API_BASE_URL =
+  process.env.ELEVENLABS_TTS_API_BASE_URL || process.env.REACT_APP_ELEVENLABS_TTS_API_BASE_URL || 'https://api.elevenlabs.io/v1/text-to-speech';
+const ELEVENLABS_MODEL_ID = process.env.ELEVENLABS_MODEL_ID || process.env.REACT_APP_ELEVENLABS_MODEL_ID || 'eleven_multilingual_v2';
+const ELEVENLABS_OUTPUT_FORMAT = process.env.ELEVENLABS_OUTPUT_FORMAT || process.env.REACT_APP_ELEVENLABS_OUTPUT_FORMAT || 'mp3_44100_128';
+const GEMINI_TTS_MODEL = process.env.GEMINI_TTS_MODEL || process.env.REACT_APP_GEMINI_TTS_MODEL || 'gemini-2.5-flash-preview-tts';
+const GEMINI_TTS_API_BASE_URL =
+  process.env.GEMINI_API_BASE_URL || process.env.REACT_APP_GEMINI_API_BASE_URL || 'https://generativelanguage.googleapis.com/v1beta';
+const OPENAI_TTS_ENDPOINT = process.env.OPENAI_TTS_ENDPOINT || process.env.REACT_APP_OPENAI_TTS_ENDPOINT || 'https://api.openai.com/v1/audio/speech';
+const OPENAI_TTS_MODEL = process.env.OPENAI_TTS_MODEL || process.env.REACT_APP_OPENAI_TTS_MODEL || 'gpt-4o-mini-tts';
+const OPENAI_TTS_FORMAT = process.env.OPENAI_TTS_FORMAT || process.env.REACT_APP_OPENAI_TTS_FORMAT || 'mp3';
+const SARVAM_TTS_ENDPOINT = process.env.SARVAM_TTS_ENDPOINT || process.env.REACT_APP_SARVAM_TTS_ENDPOINT || 'https://api.sarvam.ai/text-to-speech';
+const SARVAM_TTS_MODEL = process.env.SARVAM_TTS_MODEL || process.env.REACT_APP_SARVAM_TTS_MODEL || 'bulbul:v2';
+const SARVAM_TARGET_LANGUAGE_CODE = process.env.SARVAM_TARGET_LANGUAGE_CODE || process.env.REACT_APP_SARVAM_TARGET_LANGUAGE_CODE || 'en-IN';
+const SARVAM_OUTPUT_AUDIO_CODEC = process.env.SARVAM_OUTPUT_AUDIO_CODEC || process.env.REACT_APP_SARVAM_OUTPUT_AUDIO_CODEC || 'wav';
+const NARRATION_CONTROLS_ENABLED = false;
+
+function getFromStorage(storageKey) {
+  if (typeof window === 'undefined' || !window.localStorage) {
+    return null;
+  }
+
+  try {
+    return window.localStorage.getItem(storageKey);
+  } catch (error) {
+    return null;
+  }
+}
+
+function getElevenLabsApiKey() {
+  return (
+    process.env.ELEVEN_LABS_KEY ||
+    process.env.ELEVENLABS_API_KEY ||
+    process.env.REACT_APP_ELEVEN_LABS_KEY ||
+    process.env.REACT_APP_ELEVENLABS_API_KEY ||
+    getFromStorage('eleven_labs_key') ||
+    getFromStorage('elevenlabs_api_key') ||
+    getFromStorage('ELEVEN_LABS_KEY') ||
+    getFromStorage('REACT_APP_ELEVEN_LABS_KEY') ||
+    getFromStorage('REACT_APP_ELEVENLABS_API_KEY')
+  );
+}
+
+function getGeminiApiKey() {
+  return (
+    process.env.GEMINI_API_KEY ||
+    process.env.REACT_APP_GEMINI_API_KEY ||
+    getFromStorage('gemini_api_key') ||
+    getFromStorage('GEMINI_API_KEY') ||
+    getFromStorage('REACT_APP_GEMINI_API_KEY')
+  );
+}
+
+function getOpenAIApiKey() {
+  return (
+    process.env.OPEN_AI_KEY ||
+    process.env.OPENAI_API_KEY ||
+    process.env.REACT_APP_OPEN_AI_KEY ||
+    process.env.REACT_APP_OPENAI_API_KEY ||
+    getFromStorage('open_ai_key') ||
+    getFromStorage('openai_api_key') ||
+    getFromStorage('OPEN_AI_KEY') ||
+    getFromStorage('OPENAI_API_KEY') ||
+    getFromStorage('REACT_APP_OPEN_AI_KEY') ||
+    getFromStorage('REACT_APP_OPENAI_API_KEY')
+  );
+}
+
+function getSarvamApiKey() {
+  return (
+    process.env.SARVAM_API_KEY ||
+    process.env.REACT_APP_SARVAM_API_KEY ||
+    getFromStorage('sarvam_api_key') ||
+    getFromStorage('REACT_APP_SARVAM_API_KEY')
+  );
+}
+
+function base64AudioToBlob(base64Audio = '', mimeType = 'audio/wav') {
+  const cleanedBase64 = base64Audio.includes(',') ? base64Audio.split(',').pop() : base64Audio;
+  const binaryString = typeof window !== 'undefined' && window.atob ? window.atob(cleanedBase64) : atob(cleanedBase64);
+  const bytes = new Uint8Array(binaryString.length);
+
+  for (let index = 0; index < binaryString.length; index += 1) {
+    bytes[index] = binaryString.charCodeAt(index);
+  }
+
+  return new Blob([bytes], { type: mimeType });
+}
+
+function extractGeminiAudio(payload) {
+  const candidates = payload && payload.candidates ? payload.candidates : [];
+
+  for (const candidate of candidates) {
+    const parts = candidate && candidate.content && candidate.content.parts ? candidate.content.parts : [];
+
+    for (const part of parts) {
+      const inlineData = part.inlineData || part.inline_data || part.audio;
+
+      if (inlineData && inlineData.data) {
+        return {
+          mimeType: inlineData.mimeType || inlineData.mime_type || 'audio/wav',
+          data: inlineData.data,
+        };
+      }
+    }
+  }
+
+  return null;
+}
+
+function hashText(value = '') {
+  let hash = 0;
+
+  for (let index = 0; index < value.length; index += 1) {
+    hash = (hash << 5) - hash + value.charCodeAt(index);
+    hash |= 0;
+  }
+
+  return Math.abs(hash);
+}
+
+function pickBySeed(items = [], seed = 0) {
+  if (!items.length) {
+    return '';
+  }
+
+  return items[seed % items.length];
+}
+
+function buildGuestStepGuide(step, index, total) {
+  if (!step) {
+    return {
+      welcome: STEP_WELCOME_LINES[0],
+      intro: STEP_INTRO_LINES[0],
+      expectation: 'We are preparing your consultation journey.',
+      comfort: STEP_COMFORT_LINES[0],
+      tip: STEP_TIP_LINES[0],
+      narration: '',
+    };
+  }
+
+  const stepName = step.step_name || `Step ${index + 1}`;
+  const seedSource = `${step.step_id || step.id || index}-${stepName}`;
+  const seed = hashText(seedSource);
+
+  const welcome = index === 0 ? STEP_WELCOME_LINES[0] : `Now entering ${stepName}.`;
+  const intro = index === 0 ? STEP_INTRO_LINES[0] : pickBySeed(STEP_INTRO_LINES, seed + 1);
+  const expectation = step.step_description || pickBySeed(STEP_EXPECTATION_LINES, seed + 2);
+  const comfort = pickBySeed(STEP_COMFORT_LINES, seed + 3);
+  const tip = pickBySeed(STEP_TIP_LINES, seed + 4);
+
+  return {
+    welcome,
+    intro,
+    expectation,
+    comfort,
+    tip,
+    narration: [
+      `Step ${index + 1} of ${total}. ${stepName}.`,
+      welcome,
+      intro,
+      `What to expect: ${expectation}`,
+      `Comfort note: ${comfort}`,
+      `Helpful tip: ${tip}`,
+    ].join(' '),
+  };
+}
 
 export default function ProcessStepsPage({ match, CustomComponents = {}, ...props }) {
   const allComponents = { ...genericComponents, ...CustomComponents };
+  const GuestInfoComponent = allComponents.EntryInfo;
 
   const [loading, setLoading] = useState(false);
   const [steps, setSteps] = useState([]);
@@ -32,22 +281,60 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
   const [stepStartTime, setStepStartTime] = useState(null);
   const [processStartTime, setProcessStartTime] = useState(null);
   const [processTimings, setProcessTimings] = useState([]);
-  const [timelineCollapsed, setTimelineCollapsed] = useState(true);
   const [showExternalWindow, setShowExternalWindow] = useState(false);
   const [externalWin, setExternalWin] = useState(null);
+  const [autoNarration, setAutoNarration] = useState(NARRATION_CONTROLS_ENABLED);
+  const [voiceProvider, setVoiceProvider] = useState(
+    process.env.REACT_APP_STEP_TTS_PROVIDER && process.env.REACT_APP_STEP_TTS_PROVIDER !== 'browser'
+      ? process.env.REACT_APP_STEP_TTS_PROVIDER
+      : 'gemini'
+  );
+  const [browserVoiceOptions, setBrowserVoiceOptions] = useState([]);
+  const [voiceSelections, setVoiceSelections] = useState({
+    browser: process.env.REACT_APP_STEP_BROWSER_VOICE || process.env.REACT_APP_STEP_TTS_VOICE || '',
+    gemini: DEFAULT_GEMINI_TTS_VOICE,
+    elevenlabs: DEFAULT_ELEVENLABS_VOICE_ID,
+    openai: DEFAULT_OPENAI_TTS_VOICE,
+    sarvam: process.env.REACT_APP_SARVAM_SPEAKER || SARVAM_VOICE_OPTIONS[0].value,
+  });
+  const [stepSlideDirection, setStepSlideDirection] = useState('forward');
+  const [showNextProcessAction, setShowNextProcessAction] = useState(false);
+  const [isStepFullscreen, setIsStepFullscreen] = useState(false);
+  const [realtimeStatus, setRealtimeStatus] = useState('idle');
+
+  const narrationUtteranceRef = useRef(null);
+  const narrationAudioRef = useRef(null);
+  const narrationAudioUrlRef = useRef(null);
+  const narrationFallbackNoticeRef = useRef(false);
+  const realtimeSessionRef = useRef(null);
+  const fullscreenViewportRef = useRef(null);
 
   const urlParams = Location.search();
+  const isConsultationMode = String(urlParams?.consultation).toLowerCase() === 'true';
   let processId = urlParams.processId;
   const [currentProcessId, setCurrentProcessId] = useState(processId);
   // Load process details based on the current process ID
   useEffect(() => {
     loadProcess(currentProcessId);
 
-    const saved = localStorage.getItem(`processTimings_${currentProcessId}`);
-    setProcessTimings(saved ? JSON.parse(saved) : []);
+    let savedTimings = [];
+    try {
+      const saved = localStorage.getItem(`processTimings_${currentProcessId}`);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        if (Array.isArray(parsed)) {
+          savedTimings = parsed;
+        }
+      }
+    } catch (error) {
+      console.warn('Unable to restore process timings from local storage.', error);
+    }
+
+    setProcessTimings(savedTimings);
 
     setProcessStartTime(Date.now());
     setStepStartTime(Date.now());
+    setShowNextProcessAction(false);
   }, [currentProcessId]);
 
   //// Reset step start time whenever the active step changes
@@ -63,10 +350,110 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
     }
   }, [activeStep, steps]);
 
+  useEffect(() => {
+    if (steps[activeStep]?.order_seqtype !== 'E') {
+      setShowNextProcessAction(false);
+    }
+  }, [activeStep, steps]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.speechSynthesis) {
+      return undefined;
+    }
+
+    const updateBrowserVoices = () => {
+      const voices = window.speechSynthesis
+        .getVoices()
+        .map((voice) => ({
+          label: `${voice.name} (${voice.lang})`,
+          value: voice.voiceURI || voice.name,
+        }))
+        .sort((voiceA, voiceB) => voiceA.label.localeCompare(voiceB.label));
+
+      setBrowserVoiceOptions(voices);
+
+      if (voices.length) {
+        setVoiceSelections((oldSelections) => {
+          if (oldSelections.browser) {
+            return oldSelections;
+          }
+
+          return {
+            ...oldSelections,
+            browser: voices[0].value,
+          };
+        });
+      }
+    };
+
+    updateBrowserVoices();
+    if (typeof window.speechSynthesis.addEventListener === 'function') {
+      window.speechSynthesis.addEventListener('voiceschanged', updateBrowserVoices);
+    } else {
+      window.speechSynthesis.onvoiceschanged = updateBrowserVoices;
+    }
+
+    return () => {
+      if (typeof window.speechSynthesis.removeEventListener === 'function') {
+        window.speechSynthesis.removeEventListener('voiceschanged', updateBrowserVoices);
+      } else if (window.speechSynthesis.onvoiceschanged === updateBrowserVoices) {
+        window.speechSynthesis.onvoiceschanged = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    narrationFallbackNoticeRef.current = false;
+  }, [voiceProvider]);
+
+  useEffect(() => {
+    const isSupportedProvider = VOICE_PROVIDER_OPTIONS.some((option) => option.value === voiceProvider);
+
+    if (!isSupportedProvider) {
+      setVoiceProvider('gemini');
+    }
+  }, [voiceProvider]);
+
+  useEffect(() => {
+    stopNarration();
+  }, [voiceProvider, voiceSelections.browser, voiceSelections.gemini, voiceSelections.elevenlabs, voiceSelections.openai, voiceSelections.sarvam]);
+
+  useEffect(() => {
+    const providerVoices =
+      voiceProvider === 'gemini'
+        ? GEMINI_VOICE_OPTIONS
+        : voiceProvider === 'elevenlabs'
+          ? ELEVENLABS_VOICE_OPTIONS
+          : voiceProvider === 'openai'
+            ? OPENAI_TTS_VOICE_OPTIONS
+            : SARVAM_VOICE_OPTIONS;
+
+    if (!providerVoices.length) {
+      return;
+    }
+
+    setVoiceSelections((oldSelections) => {
+      if (oldSelections[voiceProvider]) {
+        return oldSelections;
+      }
+
+      return {
+        ...oldSelections,
+        [voiceProvider]: providerVoices[0].value,
+      };
+    });
+  }, [voiceProvider, browserVoiceOptions]);
+
   // Save updated process timings to state and localStorage
   const saveTimings = (updated) => {
-    setProcessTimings(updated);
-    localStorage.setItem(`processTimings_${currentProcessId}`, JSON.stringify(updated));
+    const safeTimings = Array.isArray(updated) ? updated : [];
+    setProcessTimings(safeTimings);
+
+    try {
+      localStorage.setItem(`processTimings_${currentProcessId}`, JSON.stringify(safeTimings));
+    } catch (error) {
+      console.warn('Unable to persist process timings to local storage.', error);
+    }
   };
   // Record time spent on the current step
 
@@ -81,7 +468,8 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
     const stepId = steps[activeStep].step_id;
     // Clone existing timings
 
-    const updated = [...processTimings];
+    const previousTimings = Array.isArray(processTimings) ? processTimings : [];
+    const updated = [...previousTimings];
     const index = updated.findIndex((t) => t.step_id === stepId);
     // Create timing entry for the step
 
@@ -153,7 +541,11 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
       const response = await Dashboard.processLog(payload);
 
       if (response.success) {
-        localStorage.removeItem(`processTimings_${currentProcessId}`);
+        try {
+          localStorage.removeItem(`processTimings_${currentProcessId}`);
+        } catch (error) {
+          console.warn('Unable to clear process timings from local storage.', error);
+        }
         setProcessTimings([]);
         return true;
       }
@@ -173,9 +565,21 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
    * - Navigates to the specified step index.
    */
   const gotoStep = (index, status = 'completed') => {
+    if (!steps.length) {
+      return;
+    }
+
+    const nextIndex = Math.max(0, Math.min(index, steps.length - 1));
+
+    if (nextIndex === activeStep) {
+      return;
+    }
+
+    setStepSlideDirection(nextIndex > activeStep ? 'forward' : 'backward');
+
     const updated = recordStepTime(status);
     saveTimings(updated);
-    setActiveStep(index);
+    setActiveStep(nextIndex);
   };
   /**
    * Navigate to the next step
@@ -194,7 +598,7 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
    */
   const handleSkip = () => gotoStep(activeStep + 1, 'skipped');
   /**
-   * Timeline Navigation
+   * Breadcrumb Navigation
    * - Navigates directly to the selected step.
    * - Records timing data for the current step.
    */
@@ -226,6 +630,398 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
       setShowExternalWindow(true);
     }
   };
+
+  function clearNarrationAudio() {
+    if (narrationAudioRef.current) {
+      narrationAudioRef.current.pause();
+      narrationAudioRef.current.src = '';
+      narrationAudioRef.current = null;
+    }
+
+    if (narrationAudioUrlRef.current && typeof window !== 'undefined' && window.URL) {
+      window.URL.revokeObjectURL(narrationAudioUrlRef.current);
+      narrationAudioUrlRef.current = null;
+    }
+  }
+
+  function stopNarration() {
+    clearNarrationAudio();
+
+    if (typeof window !== 'undefined' && window.speechSynthesis) {
+      window.speechSynthesis.cancel();
+    }
+
+    narrationUtteranceRef.current = null;
+  }
+
+  function buildRealtimeInstructions() {
+    const step = steps[activeStep];
+    const stepName = step?.step_name || `Step ${activeStep + 1}`;
+    const stepDescription = step?.step_description || 'No additional description.';
+
+    return [
+      'You are a warm, concise healthcare concierge assisting a guest during a guided process.',
+      `Current step: ${stepName}.`,
+      `Step description: ${stepDescription}.`,
+      'Answer in short, helpful sentences and keep the guest calm and informed.',
+      'Avoid medical diagnosis or treatment advice.',
+    ].join(' ');
+  }
+
+  async function startRealtimeConversation() {
+    if (realtimeSessionRef.current) {
+      return;
+    }
+
+    const session = createOpenAIRealtimeSession({
+      instructions: buildRealtimeInstructions(),
+      onStatus: (status) => {
+        setRealtimeStatus(status);
+      },
+      onError: (error) => {
+        console.error('OpenAI Realtime error:', error);
+        message.error(error?.message || 'OpenAI Realtime connection failed.');
+      },
+    });
+
+    realtimeSessionRef.current = session;
+    try {
+      await session.connect();
+    } catch (error) {
+      realtimeSessionRef.current = null;
+    }
+  }
+
+  function stopRealtimeConversation() {
+    if (realtimeSessionRef.current) {
+      realtimeSessionRef.current.disconnect();
+      realtimeSessionRef.current = null;
+    }
+    setRealtimeStatus('idle');
+  }
+
+  function playAudioBlob(audioBlob) {
+    return new Promise((resolve, reject) => {
+      if (typeof window === 'undefined' || !window.Audio || !window.URL) {
+        reject(new Error('Audio playback is not available.'));
+        return;
+      }
+
+      const audioUrl = window.URL.createObjectURL(audioBlob);
+      const audio = new window.Audio(audioUrl);
+
+      narrationAudioRef.current = audio;
+      narrationAudioUrlRef.current = audioUrl;
+
+      const cleanup = () => {
+        if (narrationAudioRef.current === audio) {
+          narrationAudioRef.current = null;
+        }
+
+        if (narrationAudioUrlRef.current === audioUrl) {
+          window.URL.revokeObjectURL(audioUrl);
+          narrationAudioUrlRef.current = null;
+        }
+      };
+
+      audio.onended = () => {
+        cleanup();
+        resolve();
+      };
+
+      audio.onpause = () => {
+        cleanup();
+        resolve();
+      };
+
+      audio.onerror = () => {
+        cleanup();
+        reject(new Error('Audio playback failed.'));
+      };
+
+      audio.play().catch((error) => {
+        cleanup();
+        reject(error);
+      });
+    });
+  }
+
+  function speakWithBrowser(text) {
+    return new Promise((resolve, reject) => {
+      if (typeof window === 'undefined' || !window.speechSynthesis || !window.SpeechSynthesisUtterance) {
+        reject(new Error('Speech synthesis is not available.'));
+        return;
+      }
+
+      const utterance = new window.SpeechSynthesisUtterance(text);
+      utterance.lang = process.env.REACT_APP_STEP_TTS_LANG || 'en-US';
+
+      const rate = Number(process.env.REACT_APP_STEP_TTS_RATE || 1);
+      const pitch = Number(process.env.REACT_APP_STEP_TTS_PITCH || 1);
+
+      utterance.rate = Number.isFinite(rate) ? rate : 1;
+      utterance.pitch = Number.isFinite(pitch) ? pitch : 1;
+
+      const selectedBrowserVoice = voiceSelections.browser;
+      if (selectedBrowserVoice) {
+        const browserVoice = window.speechSynthesis.getVoices().find((voice) => (voice.voiceURI || voice.name) === selectedBrowserVoice);
+
+        if (browserVoice) {
+          utterance.voice = browserVoice;
+        }
+      }
+
+      utterance.onend = () => {
+        if (narrationUtteranceRef.current === utterance) {
+          narrationUtteranceRef.current = null;
+        }
+        resolve();
+      };
+
+      utterance.onerror = () => {
+        if (narrationUtteranceRef.current === utterance) {
+          narrationUtteranceRef.current = null;
+        }
+        reject(new Error('Browser narration failed.'));
+      };
+
+      narrationUtteranceRef.current = utterance;
+      window.speechSynthesis.speak(utterance);
+    });
+  }
+
+  async function synthesizeGeminiAudio(text) {
+    const apiKey = getGeminiApiKey();
+
+    if (!apiKey) {
+      throw new Error('Gemini API key is missing.');
+    }
+
+    const selectedVoiceName = voiceSelections.gemini || DEFAULT_GEMINI_TTS_VOICE;
+    const endpoint = `${GEMINI_TTS_API_BASE_URL}/models/${GEMINI_TTS_MODEL}:generateContent?key=${encodeURIComponent(apiKey)}`;
+    const response = await fetch(endpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        contents: [
+          {
+            role: 'user',
+            parts: [{ text }],
+          },
+        ],
+        generationConfig: {
+          responseModalities: ['AUDIO'],
+          speechConfig: {
+            voiceConfig: {
+              prebuiltVoiceConfig: {
+                voiceName: selectedVoiceName,
+              },
+            },
+          },
+        },
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`Gemini TTS request failed with status ${response.status}.`);
+    }
+
+    const payload = await response.json();
+    const audio = extractGeminiAudio(payload);
+
+    if (!audio || !audio.data) {
+      throw new Error('Gemini did not return audio data.');
+    }
+
+    return base64AudioToBlob(audio.data, audio.mimeType || 'audio/wav');
+  }
+
+  async function synthesizeOpenAIAudio(text) {
+    const apiKey = getOpenAIApiKey();
+
+    if (!apiKey) {
+      throw new Error('OpenAI API key is missing.');
+    }
+
+    const selectedVoice = voiceSelections.openai || DEFAULT_OPENAI_TTS_VOICE;
+    const response = await fetch(OPENAI_TTS_ENDPOINT, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${apiKey}`,
+      },
+      body: JSON.stringify({
+        model: OPENAI_TTS_MODEL,
+        voice: selectedVoice,
+        input: text,
+        response_format: OPENAI_TTS_FORMAT,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`OpenAI TTS request failed with status ${response.status}.`);
+    }
+
+    return response.blob();
+  }
+
+  async function synthesizeElevenLabsAudio(text) {
+    const apiKey = getElevenLabsApiKey();
+
+    if (!apiKey) {
+      throw new Error('ElevenLabs API key is missing.');
+    }
+
+    const selectedVoiceId = voiceSelections.elevenlabs || DEFAULT_ELEVENLABS_VOICE_ID;
+    const endpoint = `${ELEVENLABS_TTS_API_BASE_URL}/${encodeURIComponent(selectedVoiceId)}/stream?output_format=${encodeURIComponent(
+      ELEVENLABS_OUTPUT_FORMAT
+    )}`;
+    const response = await fetch(endpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'audio/mpeg',
+        'xi-api-key': apiKey,
+      },
+      body: JSON.stringify({
+        text,
+        model_id: ELEVENLABS_MODEL_ID,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`ElevenLabs TTS request failed with status ${response.status}.`);
+    }
+
+    return response.blob();
+  }
+
+  async function synthesizeSarvamAudio(text) {
+    const apiKey = getSarvamApiKey();
+
+    if (!apiKey) {
+      throw new Error('Sarvam API key is missing.');
+    }
+
+    const selectedSpeaker = voiceSelections.sarvam || SARVAM_VOICE_OPTIONS[0].value;
+    const response = await fetch(SARVAM_TTS_ENDPOINT, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'api-subscription-key': apiKey,
+      },
+      body: JSON.stringify({
+        text,
+        target_language_code: SARVAM_TARGET_LANGUAGE_CODE,
+        model: SARVAM_TTS_MODEL,
+        speaker: selectedSpeaker,
+        output_audio_codec: SARVAM_OUTPUT_AUDIO_CODEC,
+      }),
+    });
+
+    const payload = await response.json().catch(() => null);
+
+    if (!response.ok) {
+      throw new Error(`Sarvam TTS request failed with status ${response.status}.`);
+    }
+
+    const audioBase64 = payload?.audios?.[0];
+    if (!audioBase64) {
+      throw new Error('Sarvam did not return any audio data.');
+    }
+
+    const codec = (SARVAM_OUTPUT_AUDIO_CODEC || '').toLowerCase();
+    const mimeType = codec === 'mp3' ? 'audio/mpeg' : 'audio/wav';
+
+    return base64AudioToBlob(audioBase64, mimeType);
+  }
+
+  async function speakText(text) {
+    if (!text || typeof window === 'undefined') {
+      return;
+    }
+
+    stopNarration();
+
+    if (voiceProvider === 'gemini') {
+      const geminiAudio = await synthesizeGeminiAudio(text);
+      await playAudioBlob(geminiAudio);
+      return;
+    }
+
+    if (voiceProvider === 'elevenlabs') {
+      const elevenLabsAudio = await synthesizeElevenLabsAudio(text);
+      await playAudioBlob(elevenLabsAudio);
+      return;
+    }
+
+    if (voiceProvider === 'openai') {
+      const openAiAudio = await synthesizeOpenAIAudio(text);
+      await playAudioBlob(openAiAudio);
+      return;
+    }
+
+    if (voiceProvider === 'sarvam') {
+      const sarvamAudio = await synthesizeSarvamAudio(text);
+      await playAudioBlob(sarvamAudio);
+      return;
+    }
+
+    throw new Error('Browser narration is disabled. Use Gemini, ElevenLabs, or OpenAI.');
+  }
+
+  async function speakCurrentStep() {
+    const step = steps[activeStep];
+    const guide = buildGuestStepGuide(step, activeStep, steps.length);
+
+    try {
+      await speakText(guide.narration);
+    } catch (error) {
+      if (!narrationFallbackNoticeRef.current) {
+        const providerLabel =
+          voiceProvider === 'gemini'
+            ? 'Gemini'
+            : voiceProvider === 'elevenlabs'
+              ? 'ElevenLabs'
+              : voiceProvider === 'openai'
+                ? 'OpenAI'
+                : 'Selected provider';
+        message.warning(`${providerLabel} narration failed.`);
+        narrationFallbackNoticeRef.current = true;
+      }
+
+      message.error(error?.message || 'Unable to play narration for this step.');
+    }
+  }
+
+  async function toggleStepFullscreen() {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    const targetElement = fullscreenViewportRef.current;
+
+    if (!targetElement || !targetElement.requestFullscreen) {
+      return;
+    }
+
+    try {
+      if (document.fullscreenElement === targetElement) {
+        await document.exitFullscreen();
+        return;
+      }
+
+      if (document.fullscreenElement) {
+        await document.exitFullscreen();
+      }
+
+      await targetElement.requestFullscreen();
+    } catch (error) {
+      console.error('Failed to toggle step fullscreen mode:', error);
+    }
+  }
   /**
    * Dynamic Step Renderer
    * - Resolves and renders step-specific components dynamically.
@@ -270,50 +1066,275 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
     };
   }, [activeStep, steps, externalWin]);
 
+  useEffect(() => {
+    if (typeof document === 'undefined') {
+      return undefined;
+    }
+
+    const handleFullscreenChange = () => {
+      setIsStepFullscreen(document.fullscreenElement === fullscreenViewportRef.current);
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    handleFullscreenChange();
+
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!NARRATION_CONTROLS_ENABLED || !autoNarration) {
+      return;
+    }
+
+    if (loading || !steps.length || !steps[activeStep]) {
+      return;
+    }
+
+    speakCurrentStep();
+  }, [
+    activeStep,
+    steps,
+    loading,
+    autoNarration,
+    voiceProvider,
+    voiceSelections.browser,
+    voiceSelections.elevenlabs,
+    voiceSelections.openai,
+    voiceSelections.sarvam,
+  ]);
+
+  useEffect(() => {
+    const session = realtimeSessionRef.current;
+    if (!session || session.status !== 'connected') {
+      return;
+    }
+
+    session.sendEvent({
+      type: 'session.update',
+      session: {
+        instructions: buildRealtimeInstructions(),
+      },
+    });
+  }, [activeStep, steps]);
+
+  useEffect(() => {
+    return () => {
+      stopNarration();
+      stopRealtimeConversation();
+    };
+  }, []);
+
   /**
-   * Renders the main process UI including timeline, step details,
+   * Renders the main process UI including breadcrumb, step details,
    * and action buttons. This content is reused in both normal view
    * and external window view.
    */
-  const renderContent = () => (
-    <div>
-      <Card>
-        <Row gutter={20}>
-          <Col xs={24} sm={24} lg={timelineCollapsed ? 2 : 6}>
-            <TimelinePanel
-              loading={loading}
-              steps={steps}
-              activeStep={activeStep}
-              timelineCollapsed={timelineCollapsed}
-              handleTimelineClick={handleTimelineClick}
-              setTimelineCollapsed={setTimelineCollapsed}
-            />
-          </Col>
-
-          <Col xs={24} sm={24} lg={timelineCollapsed ? 21 : 18}>
-            <div style={{ marginBottom: 20 }}>
-              <h2 style={{ margin: 0, fontSize: 16, fontWeight: 600 }}>{steps[activeStep]?.step_name}</h2>
-              <p style={{ margin: 0, color: '#666' }}>{steps[activeStep]?.step_description}</p>
+  const renderContent = () => {
+    const currentStep = steps[activeStep];
+    const isFinalStep = currentStep?.order_seqtype === 'E';
+    const currentVoiceOptions =
+      voiceProvider === 'gemini'
+        ? GEMINI_VOICE_OPTIONS
+        : voiceProvider === 'elevenlabs'
+          ? ELEVENLABS_VOICE_OPTIONS
+          : voiceProvider === 'openai'
+            ? OPENAI_TTS_VOICE_OPTIONS
+            : SARVAM_VOICE_OPTIONS;
+    const currentVoiceValue = voiceSelections[voiceProvider] || undefined;
+    const openAiTokenEndpoint = process.env.OPENAI_REALTIME_TOKEN_ENDPOINT || process.env.REACT_APP_OPENAI_REALTIME_TOKEN_ENDPOINT;
+    const canStartRealtime = hasOpenAIRealtimeCredentials(openAiTokenEndpoint);
+
+    return (
+      <div className="process-steps-page">
+        <div ref={fullscreenViewportRef} className="steps-viewport">
+          <Card className="steps-main-card">
+            <div className="steps-header">
+              <div className="steps-breadcrumb-strip">
+                {steps.length ? (
+                  steps.map((stepItem, stepIndex) => {
+                    const isActiveBreadcrumb = stepIndex === activeStep;
+                    const isCompletedBreadcrumb = stepIndex < activeStep;
+
+                    return (
+                      <button
+                        key={stepItem.step_id || `${stepItem.step_name || 'step'}_${stepIndex}`}
+                        type="button"
+                        className={`steps-breadcrumb-item${isActiveBreadcrumb ? ' active' : ''}${isCompletedBreadcrumb ? ' completed' : ''}`}
+                        onClick={() => handleTimelineClick(stepIndex)}
+                      >
+                        <span className="steps-breadcrumb-index">{stepIndex + 1}</span>
+                        <span className="steps-breadcrumb-label">{stepItem.step_name || `Step ${stepIndex + 1}`}</span>
+                      </button>
+                    );
+                  })
+                ) : (
+                  <span className="steps-breadcrumb-empty">No steps loaded</span>
+                )}
+              </div>
+
+              <div className="steps-header-actions">
+                <Button disabled={activeStep === 0} onClick={handlePrevious}>
+                  Back
+                </Button>
+
+                {isFinalStep ? (
+                  <>
+                    {!showNextProcessAction && (
+                      <Button
+                        type="primary"
+                        onClick={async () => {
+                          const success = await handleFinish();
+
+                          if (success && nextProcessId?.next_process_id) {
+                            setShowNextProcessAction(true);
+                          }
+                        }}
+                      >
+                        Finish
+                      </Button>
+                    )}
+
+                    {showNextProcessAction && nextProcessId?.next_process_id && (
+                      <Button type="primary" onClick={handleStartNextProcess}>
+                        Start {nextProcessId.next_process_name}
+                      </Button>
+                    )}
+                  </>
+                ) : (
+                  <Button type="primary" disabled={activeStep === steps.length - 1 || !isStepCompleted} onClick={handleNext}>
+                    Next
+                  </Button>
+                )}
+
+                {steps.length > 0 && currentStep?.allow_skip === 'Y' && (
+                  <Button type="default" onClick={handleSkip} disabled={activeStep === steps.length - 1}>
+                    Skip
+                  </Button>
+                )}
+
+                {NARRATION_CONTROLS_ENABLED ? (
+                  <>
+                    <Select
+                      className="steps-voice-provider-select"
+                      value={voiceProvider}
+                      options={VOICE_PROVIDER_OPTIONS}
+                      onChange={(value) => setVoiceProvider(value)}
+                    />
+
+                    <Select
+                      className="steps-voice-select"
+                      value={currentVoiceValue}
+                      options={currentVoiceOptions}
+                      onChange={(value) =>
+                        setVoiceSelections((oldSelections) => ({
+                          ...oldSelections,
+                          [voiceProvider]: value,
+                        }))
+                      }
+                      placeholder="Select Voice"
+                      optionFilterProp="label"
+                      showSearch
+                      disabled={!currentVoiceOptions.length}
+                    />
+
+                    <Button icon={<SoundOutlined />} onClick={speakCurrentStep} disabled={!currentStep}>
+                      Read Step
+                    </Button>
+
+                    <Button
+                      type={realtimeStatus === 'connected' ? 'default' : 'primary'}
+                      disabled={!canStartRealtime}
+                      onClick={() => {
+                        if (realtimeStatus === 'connected' || realtimeStatus === 'connecting') {
+                          stopRealtimeConversation();
+                          return;
+                        }
+                        startRealtimeConversation();
+                      }}
+                    >
+                      {realtimeStatus === 'connected'
+                        ? 'Stop Conversation'
+                        : realtimeStatus === 'connecting'
+                          ? 'Connecting...'
+                          : 'Start Conversation'}
+                    </Button>
+
+                    <Button onClick={() => setAutoNarration((oldValue) => !oldValue)}>Auto Narration: {autoNarration ? 'On' : 'Off'}</Button>
+                  </>
+                ) : null}
+
+                <Button icon={isStepFullscreen ? <CompressOutlined /> : <ExpandOutlined />} onClick={toggleStepFullscreen}>
+                  {isStepFullscreen ? 'Exit Full Screen' : 'Full Screen'}
+                </Button>
+              </div>
             </div>
-            <ActionButtons
-              loading={loading}
-              steps={steps}
-              activeStep={activeStep}
-              isStepCompleted={isStepCompleted}
-              renderDynamicComponent={DynamicComponent}
-              handlePrevious={handlePrevious}
-              handleNext={handleNext}
-              handleSkip={handleSkip}
-              handleFinish={handleFinish}
-              handleStartNextProcess={handleStartNextProcess}
-              nextProcessId={nextProcessId}
-              timelineCollapsed={timelineCollapsed}
-            />
-          </Col>
-        </Row>
-      </Card>
-    </div>
-  );
+
+            <Row gutter={[16, 16]} className="steps-layout">
+              <Col xs={24} sm={24} lg={16} xl={17} className="steps-content-column">
+                <div className={`steps-content-panel steps-stage-panel${isStepFullscreen ? ' is-fullscreen' : ''}`}>
+                  <div className="steps-stage-body">
+                    <div
+                      key={`${currentProcessId}_${activeStep}`}
+                      className={`steps-chat-step-card ${stepSlideDirection === 'backward' ? 'slide-backward' : 'slide-forward'}`}
+                    >
+                      <div className="steps-chat-step-top">
+                        <span className="steps-index-pill">
+                          Step {Math.min(activeStep + 1, steps.length || 1)} of {steps.length || 1}
+                        </span>
+                        <h2 className="steps-title">{currentStep?.step_name || 'No step selected'}</h2>
+                        {currentStep?.step_description ? <p className="steps-description">{currentStep.step_description}</p> : null}
+                      </div>
+
+                      <div className="steps-chat-step-component">
+                        {loading ? (
+                          <div className="steps-chat-loading">
+                            <Spin />
+                          </div>
+                        ) : null}
+                        {!loading ? <DynamicComponent /> : null}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </Col>
+
+              <Col xs={24} sm={24} lg={8} xl={7} className="steps-guest-column">
+                <div className="steps-guest-panel">
+                  <div className="steps-guest-body">
+                    <div className="steps-guest-highlight">
+                      <div className="steps-guest-name">{urlParams?.opb_name || '-'}</div>
+                      <div className="steps-guest-meta">
+                        OP: {urlParams?.opb_opno || urlParams?.opno || '-'} | Order: {urlParams?.opb_no || urlParams?.opb_bno || '-'}
+                      </div>
+                    </div>
+
+                    {GuestInfoComponent ? (
+                      <GuestInfoComponent params={urlParams} />
+                    ) : (
+                      <div className="steps-guest-fallback">
+                        <p className="steps-guest-fallback-text">Information card is unavailable in this context. Basic details are shown below.</p>
+                        <p>
+                          <strong>Name:</strong> {urlParams?.opb_name || '-'}
+                        </p>
+                        <p>
+                          <strong>Order:</strong> {urlParams?.opb_no || urlParams?.opb_bno || '-'}
+                        </p>
+                        <p>
+                          <strong>OP No:</strong> {urlParams?.opno || urlParams?.opb_opno || '-'}
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </Col>
+            </Row>
+          </Card>
+        </div>
+      </div>
+    );
+  };
   /**
    * Renders content in both the main window and an external window
    * when external window mode is enabled.
@@ -333,9 +1354,9 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
           width={props.ExternalWindowWidth || 1000}
           height={props.ExternalWindowHeight || 1000}
         >
-          {renderContent()}
+          {renderContent(false)}
         </ExternalWindow>
-        {renderContent()}
+        {renderContent(true)}
       </>
     );
   }