ui-soxo-bootstrap-core 2.6.1-dev.17 → 2.6.1-dev.18

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/lib/pages/login/login.js

@@ -30,7 +30,7 @@ import { getAccessToken, getRefreshToken } from '../../utils/http/auth.helper';
 
 import { Location } from '../../utils';
 
-import { checkLicenseStatus, formatMobile, checkExpiryStatus, safeJSON } from '../../utils/common/common.utils';
+import { checkLicenseStatus, formatMobile, safeJSON } from '../../utils/common/common.utils';
 
 import { MailOutlined, MessageOutlined, WhatsAppOutlined } from '@ant-design/icons';
 
@@ -50,8 +50,6 @@ const tailLayout = {
 
 const LICENSE_EXPIRY = '2026-12-12';
 
-//password valdity expire
-const PASSWORD_VALIDITY_DAYS = 90;
 
 const headers = {
   db_ptr: 'nuraho',
@@ -115,47 +113,32 @@ function LoginPhone({ history, appSettings }) {
    *
    * - Parses `last_password_change` from user.other_details.
    * - Calculates expiry using PASSWORD_VALIDITY_DAYS.
-   * - Uses `checkExpiryStatus()` to determine status.
    * - Shows Ant Design warning message if expired or within warning period.
    * - Warning message includes navigation to `/change-password`.
    *
    * Requires:
    * - PASSWORD_VALIDITY_DAYS constant
-   * - checkExpiryStatus utility
    * - React Router history
    * - antd message component
    */
-  const handlePasswordExpiryCheck = (user) => {
-    const otherDetails = user?.other_details ? JSON.parse(user.other_details) : null;
-
-    const lastPasswordChange = otherDetails?.last_password_change;
-
-    if (lastPasswordChange) {
-      const onlyDate = new Date(lastPasswordChange).toISOString().split('T')[0];
-      const passwordExpiryDate = new Date(onlyDate);
-      passwordExpiryDate.setDate(passwordExpiryDate.getDate() + PASSWORD_VALIDITY_DAYS);
-
-      const passwordStatus = checkExpiryStatus({
-        expiryDate: passwordExpiryDate,
-        warningDays: 2,
-        expiredMessage: 'Your password has expired. Please reset it.',
-        warningMessage: (d) => (
-          <span>
-            Your password will expire in {d} day(s).{' '}
-            <a
-              onClick={() => {
-                history.push('/change-password');
-              }}
-            >
-              Click here to update.
-            </a>
-          </span>
-        ),
-      });
+  const handlePasswordExpiryCheck = (expiryDays) => {
+    if (expiryDays == null) return;
 
-      if (passwordStatus.message) {
-        message.warning(passwordStatus.message);
-      }
+    if (expiryDays <= 0) {
+      message.error('Your password has expired. Please reset it.');
+
+      setExpiredPassword(true);
+      setShowResetpassword(true);
+
+      return;
+    }
+
+    if (expiryDays <= 2) {
+      message.warning(
+        <span>
+          Your password will expire in {expiryDays} day(s). <a onClick={() => history.push('/change-password')}>Click here to update.</a>
+        </span>
+      );
     }
   };
 
@@ -196,7 +179,7 @@ function LoginPhone({ history, appSettings }) {
           if (insider_token) localStorage.insider_token = insider_token;
 
           if (result.success) {
-            handlePasswordExpiryCheck(user);
+            handlePasswordExpiryCheck(result.expiry_in_days);
 
             //two_factor_authentication variable is present then proceed Two factor authentication
             if (result.data && result.data.two_factor_authentication) {
@@ -421,7 +404,7 @@ function LoginPhone({ history, appSettings }) {
           // set user info into local storage
           localStorage.setItem('userInfo', JSON.stringify(userInfo));
 
-          handlePasswordExpiryCheck(result.user);
+          handlePasswordExpiryCheck(result.expiry_in_days);
 
           setTimeout(() => history.push('/'), 500);
         } else {

package/core/lib/utils/common/common.utils.js

@@ -123,41 +123,6 @@ export const checkLicenseStatus = (expiryDate) => {
   return { valid: true, daysLeft, message: null, level: null };
 };
 
-/**
- * Checks password expiry status.
- *
- * @param {string|Date} expiryDate
- * @param {number} warningDays
- * @param {string} expiredMessage
- * @param {(daysLeft: number) => string} warningMessage
- *
- * @returns {{ valid: boolean, daysLeft: number, message: string|null, level: "error"|"warning"|null }}
- */
-
-export const checkExpiryStatus = ({ expiryDate, warningDays, expiredMessage, warningMessage }) => {
-  const expiry = new Date(expiryDate);
-
-  if (isNaN(expiry)) {
-    return { valid: false, daysLeft: 0, message: 'Invalid date', level: 'error' };
-  }
-
-  expiry.setHours(0, 0, 0, 0);
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-
-  const msDiff = expiry.getTime() - today.getTime();
-  const daysLeft = Math.ceil(msDiff / (1000 * 60 * 60 * 24));
-
-  if (daysLeft < 0) {
-    return { valid: false, daysLeft, message: expiredMessage, level: 'error' };
-  }
-
-  if (daysLeft <= warningDays) {
-    return { valid: true, daysLeft, message: warningMessage(daysLeft), level: 'warning' };
-  }
-
-  return { valid: true, daysLeft, message: null, level: null };
-};
 
 /**
  * Masks a mobile number by hiding all but the last `visibleDigits`.

package/core/models/menus/menus.js

@@ -305,6 +305,12 @@ class MenusAPI extends Base {
       // }
     ];
   };
+  // license summary api call
+  getSummary = () => {
+    return ApiUtils.get({
+      url: 'license/summary',
+    });
+  };
 }
 
 export default MenusAPI;