ui-soxo-bootstrap-core 2.6.25 → 2.6.27

package/core/lib/models/process/components/process-dashboard/process-dashboard.js

@@ -14,7 +14,7 @@
  */
 
 
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext, useRef } from 'react';
 
 import { Timeline, Card, Skeleton, Button, Modal, Typography, Form, Select, message, Tag } from 'antd';
 
@@ -28,7 +28,7 @@ import TaskStatus from './../task-status/task-status';
 
 import DateUtils from '../../../../utils/date/date.utils';
 
-import { ClockCircleOutlined, CopyOutlined, CheckCircleOutlined, LoadingOutlined, EditOutlined, ReloadOutlined } from '@ant-design/icons';
+import { ClockCircleOutlined, CopyOutlined, CheckCircleOutlined, LoadingOutlined, EditOutlined, ReloadOutlined, SoundOutlined, PauseCircleOutlined } from '@ant-design/icons';
 
 import { CopyToClipBoard } from '../../../..';
 
@@ -59,6 +59,340 @@ let stepMaster = {
 
 }
 
+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_VOICE = process.env.GEMINI_TTS_VOICE || process.env.REACT_APP_GEMINI_TTS_VOICE || 'Kore';
+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 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 DEFAULT_ELEVENLABS_VOICE_ID =
+    process.env.ELEVENLABS_VOICE_ID ||
+    process.env.ELEVEN_LABS_VOICE_ID ||
+    process.env.REACT_APP_ELEVENLABS_VOICE_ID ||
+    '21m00Tcm4TlvDq8ikWAM';
+
+function getFromStorage(storageKey) {
+
+    if (typeof window === 'undefined' || !window.localStorage) {
+        return null;
+    }
+
+    try {
+        return window.localStorage.getItem(storageKey);
+    } catch (error) {
+        return null;
+    }
+}
+
+function getGeminiApiKey() {
+
+    if (process.env.GEMINI_API_KEY) {
+        return process.env.GEMINI_API_KEY;
+    }
+
+    if (process.env.REACT_APP_GEMINI_API_KEY) {
+        return process.env.REACT_APP_GEMINI_API_KEY;
+    }
+
+    if (typeof window !== 'undefined') {
+        try {
+            if (window.localStorage) {
+                return window.localStorage.getItem('gemini_api_key');
+            }
+        } catch (error) {
+            return null;
+        }
+    }
+
+    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 getStepNarration({ step, step_transactions }) {
+
+    if (!step) {
+        return 'Step details are not available.';
+    }
+
+    const chunks = [];
+
+    chunks.push(`Step ${step.name || 'Unnamed step'}.`);
+
+    if (step.description) {
+        chunks.push(step.description);
+    }
+
+    const currentState = step.current_state || 'pending';
+
+    chunks.push(`Current status is ${currentState}.`);
+
+    if (step.roles && step.roles.length) {
+        const roleNames = step.roles.map((role) => role && role.name).filter(Boolean);
+
+        if (roleNames.length) {
+            chunks.push(`Pending with ${roleNames.join(', ')}.`);
+        }
+    }
+
+    if (step_transactions && step_transactions.start_time) {
+        const startTime = DateUtils.displayFirestoreTime(step_transactions.start_time);
+
+        if (startTime) {
+            chunks.push(`Started at ${startTime}.`);
+        }
+    }
+
+    if (step_transactions && step_transactions.completed && step_transactions.end_time) {
+        const endTime = DateUtils.displayFirestoreTime(step_transactions.end_time);
+
+        if (endTime) {
+            chunks.push(`Completed at ${endTime}.`);
+        }
+    }
+
+    return chunks.join(' ');
+}
+
+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;
+}
+
+async function synthesizeGeminiAudio(text) {
+
+    const apiKey = getGeminiApiKey();
+
+    if (!apiKey) {
+        throw new Error('Gemini API key is missing');
+    }
+
+    const endpoint = `${GEMINI_TTS_API_BASE_URL}/models/${GEMINI_TTS_MODEL}:generateContent?key=${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: GEMINI_TTS_VOICE
+                        }
+                    }
+                }
+            }
+        })
+    });
+
+    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 `data:${audio.mimeType};base64,${audio.data}`;
+}
+
+async function synthesizeElevenLabsAudio(text) {
+
+    const apiKey = getElevenLabsApiKey();
+
+    if (!apiKey) {
+        throw new Error('ElevenLabs API key is missing');
+    }
+
+    const endpoint = `${ELEVENLABS_TTS_API_BASE_URL}/${encodeURIComponent(DEFAULT_ELEVENLABS_VOICE_ID)}/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();
+}
+
+function playAudioDataUri(dataUri, audioReference) {
+    return new Promise((resolve, reject) => {
+        const audio = new Audio(dataUri);
+
+        audioReference.current = audio;
+
+        const clean = () => {
+            if (audioReference.current === audio) {
+                audioReference.current = null;
+            }
+        };
+
+        audio.onended = () => {
+            clean();
+            resolve();
+        };
+
+        audio.onpause = () => {
+            clean();
+            resolve();
+        };
+
+        audio.onerror = () => {
+            clean();
+            reject(new Error('Audio playback failed'));
+        };
+
+        audio.play().catch((error) => {
+            clean();
+            reject(error);
+        });
+    });
+}
+
+function playAudioBlob(audioBlob, audioReference, audioUrlReference) {
+    return new Promise((resolve, reject) => {
+        if (typeof window === 'undefined' || !window.Audio || !window.URL) {
+            reject(new Error('Audio playback is not available'));
+            return;
+        }
+
+        if (audioUrlReference.current) {
+            window.URL.revokeObjectURL(audioUrlReference.current);
+            audioUrlReference.current = null;
+        }
+
+        const audioUrl = window.URL.createObjectURL(audioBlob);
+        const audio = new Audio(audioUrl);
+
+        audioReference.current = audio;
+        audioUrlReference.current = audioUrl;
+
+        const clean = () => {
+            if (audioReference.current === audio) {
+                audioReference.current = null;
+            }
+
+            if (audioUrlReference.current === audioUrl) {
+                window.URL.revokeObjectURL(audioUrl);
+                audioUrlReference.current = null;
+            }
+        };
+
+        audio.onended = () => {
+            clean();
+            resolve();
+        };
+
+        audio.onpause = () => {
+            clean();
+            resolve();
+        };
+
+        audio.onerror = () => {
+            clean();
+            reject(new Error('Audio playback failed'));
+        };
+
+        audio.play().catch((error) => {
+            clean();
+            reject(error);
+        });
+    });
+}
+
+function speakWithBrowser(text, speechReference) {
+    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_TTS_LANG || 'en-US';
+
+        speechReference.current = utterance;
+
+        utterance.onend = () => {
+            if (speechReference.current === utterance) {
+                speechReference.current = null;
+            }
+
+            resolve();
+        };
+
+        utterance.onerror = () => {
+            if (speechReference.current === utterance) {
+                speechReference.current = null;
+            }
+
+            reject(new Error('Browser narration failed'));
+        };
+
+        window.speechSynthesis.cancel();
+        window.speechSynthesis.speak(utterance);
+    });
+}
+
 /**
  * 
  */
@@ -257,8 +591,125 @@ function StepTimelineItem({ id, color, Icon, step, step_transactions, callback }
 
     const [loading, setLoading] = useState(false);
 
+    const [narrating, setNarrating] = useState(false);
+
     const { user = { locations: [] } } = useContext(GlobalContext);
 
+    const audioReference = useRef(null);
+
+    const audioUrlReference = useRef(null);
+
+    const speechReference = useRef(null);
+
+    const narrationSessionReference = useRef(0);
+
+    const fallbackNoticeShownReference = useRef(false);
+
+    useEffect(() => {
+        return () => {
+            stopNarration();
+        }
+    }, [])
+
+    /**
+     * Stop active narration audio
+     */
+    function stopNarration() {
+        narrationSessionReference.current += 1;
+
+        if (audioReference.current) {
+            audioReference.current.pause();
+            audioReference.current.src = '';
+            audioReference.current = null;
+        }
+
+        if (audioUrlReference.current && typeof window !== 'undefined' && window.URL) {
+            window.URL.revokeObjectURL(audioUrlReference.current);
+            audioUrlReference.current = null;
+        }
+
+        if (typeof window !== 'undefined' && window.speechSynthesis) {
+            window.speechSynthesis.cancel();
+        }
+
+        speechReference.current = null;
+        setNarrating(false);
+    }
+
+    /**
+     * Narrate the current step with ElevenLabs/Gemini TTS only (no browser fallback).
+     */
+    async function narrateStep() {
+        const narration = getStepNarration({ step, step_transactions });
+
+        if (!narration) {
+            message.warning('Narration text is not available for this step.');
+            return;
+        }
+
+        stopNarration();
+
+        const sessionId = narrationSessionReference.current;
+        const hasElevenLabsKey = Boolean(getElevenLabsApiKey());
+
+        setNarrating(true);
+
+        try {
+            let aiNarrationComplete = false;
+            let aiNarrationError = null;
+
+            if (hasElevenLabsKey) {
+                try {
+                    const audioBlob = await synthesizeElevenLabsAudio(narration);
+
+                    if (sessionId !== narrationSessionReference.current) {
+                        return;
+                    }
+
+                    await playAudioBlob(audioBlob, audioReference, audioUrlReference);
+                    aiNarrationComplete = true;
+                } catch (elevenLabsError) {
+                    aiNarrationError = elevenLabsError;
+                }
+            }
+
+            if (!aiNarrationComplete) {
+                try {
+                    const dataUri = await synthesizeGeminiAudio(narration);
+
+                    if (sessionId !== narrationSessionReference.current) {
+                        return;
+                    }
+
+                    await playAudioDataUri(dataUri, audioReference);
+                    aiNarrationComplete = true;
+                } catch (geminiError) {
+                    aiNarrationError = geminiError;
+                }
+            }
+
+            if (!aiNarrationComplete) {
+                throw aiNarrationError || new Error('AI narration unavailable');
+            }
+
+        } catch (error) {
+            if (sessionId !== narrationSessionReference.current) {
+                return;
+            }
+
+            if (!fallbackNoticeShownReference.current) {
+                message.warning(`${hasElevenLabsKey ? 'ElevenLabs/Gemini' : 'Gemini'} narration unavailable.`);
+                fallbackNoticeShownReference.current = true;
+            }
+
+            message.error(error?.message || 'Unable to play narration for this step.');
+        } finally {
+            if (sessionId === narrationSessionReference.current) {
+                setNarrating(false);
+            }
+        }
+    }
+
     /**
   * Function to open editModal for Step
   * 
@@ -347,6 +798,21 @@ function StepTimelineItem({ id, color, Icon, step, step_transactions, callback }
             {/* Actions for a step */}
             <div className="actions">
 
+                <Button size={'small'} onClick={() => {
+                    if (narrating) {
+                        stopNarration();
+                        return;
+                    }
+
+                    narrateStep();
+                }}>
+
+                    {narrating ? <PauseCircleOutlined /> : <SoundOutlined />}
+
+                    {narrating ? 'Stop Narration' : 'Narrate'}
+
+                </Button>
+
                 {user.isAdmin && <>
 
                     <CopyToClipBoard record={step} id={step.id} />
@@ -599,4 +1065,4 @@ function RevertProcessTransaction({ id, process = [], callback }) {
         </Form>
     </>)
 
-}
+}

package/core/lib/models/process/components/process-dashboard/process-dashboard.scss

@@ -42,6 +42,10 @@
                 }
 
                 .actions {
+                    display: flex;
+                    gap: 6px;
+                    align-items: center;
+                    flex-wrap: wrap;
                 }
             }
 

package/core/modules/steps/action-buttons.js

@@ -10,7 +10,7 @@ import './action-buttons.scss';
 
 export default function ActionButtons({
   loading,
-  steps,
+  steps = [],
   activeStep,
   isStepCompleted,
   isFullscreen,
@@ -22,60 +22,70 @@ export default function ActionButtons({
   handleFinish,
   handleStartNextProcess,
   nextProcessId,
-  timelineCollapsed,
 }) {
   const [showNextProcess, setShowNextProcess] = useState(false);
+  const currentStep = steps[activeStep];
+  const isLastStep = steps.length > 0 && activeStep >= steps.length - 1;
+  const isEndStep = currentStep?.order_seqtype === 'E';
+
   useEffect(() => {
-    setShowNextProcess(false);
-  }, [steps]);
+    if (!isEndStep) {
+      setShowNextProcess(false);
+    }
+  }, [isEndStep]);
+
   return (
-    <div className="action-buttons-layout">
-      <div className="action-buttons-content">{loading ? <Skeleton active /> : renderDynamicComponent()}</div>
-      <div className="action-buttons-container">
-        {/* Back button */}
-        <Button disabled={activeStep === 0} onClick={handlePrevious}>
-          Back
-        </Button>
+    <div className="action-buttons-shell">
+      <div className="action-body">{loading ? <Skeleton active /> : typeof renderDynamicComponent === 'function' ? renderDynamicComponent() : null}</div>
+      <div className="action-footer">
+        <div className="action-buttons-container">
+          {/* Back button */}
+          <Button disabled={activeStep <= 0} onClick={handlePrevious}>
+            Back
+          </Button>
 
-        <Button type="default" onClick={onToggleFullscreen}>
-          {isFullscreen ? 'Exit Full Screen' : 'Switch to Full Screen'}
-        </Button>
+          {typeof onToggleFullscreen === 'function' && (
+            <Button type="default" onClick={onToggleFullscreen}>
+              {isFullscreen ? 'Exit Full Screen' : 'Switch to Full Screen'}
+            </Button>
+          )}
 
-        {/* Skip button */}
-        {steps.length > 0 && steps[activeStep]?.allow_skip === 'Y' && (
-          <Button type="default" onClick={handleSkip} disabled={activeStep === steps.length - 1}>
-            Skip
-          </Button>
-        )}
+          {/* Skip button */}
+          {steps.length > 0 && currentStep?.allow_skip === 'Y' && (
+            <Button type="default" onClick={handleSkip} disabled={isLastStep}>
+              Skip
+            </Button>
+          )}
 
-        {/* Next / Finish / Start Next */}
-        {steps[activeStep]?.order_seqtype === 'E' ? (
-          <>
-            {!showNextProcess && (
-              <Button
-                type="primary"
-                onClick={async () => {
-                  const success = await handleFinish();
-                  if (success && nextProcessId?.next_process_id) {
-                    setShowNextProcess(true);
-                  }
-                }}
-              >
-                Finish
-              </Button>
-            )}
+          {/* Next / Finish / Start Next */}
+          {isEndStep ? (
+            <>
+              {!showNextProcess && (
+                <Button
+                  type="primary"
+                  onClick={async () => {
+                    const success = typeof handleFinish === 'function' ? await handleFinish() : false;
+                    if (success && nextProcessId?.next_process_id) {
+                      setShowNextProcess(true);
+                    }
+                  }}
+                >
+                  Finish
+                </Button>
+              )}
 
-            {showNextProcess && 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>
-        )}
+              {showNextProcess && nextProcessId?.next_process_id && (
+                <Button type="primary" onClick={handleStartNextProcess}>
+                  Start {nextProcessId.next_process_name}
+                </Button>
+              )}
+            </>
+          ) : (
+            <Button type="primary" disabled={steps.length === 0 || isLastStep || !isStepCompleted} onClick={handleNext}>
+              Next →
+            </Button>
+          )}
+        </div>
       </div>
     </div>
   );