ui-soxo-bootstrap-core 2.6.25 → 2.6.27

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

@@ -1,51 +1,62 @@
-.action-buttons-layout {
-  display: grid;
-  grid-template-rows: minmax(0, 1fr) auto;
+.action-buttons-shell {
+  display: flex;
+  flex-direction: column;
   flex: 1;
-  min-height: 0;
-  overflow: hidden;
+  min-height: 100%;
 }
 
-.action-buttons-content {
+.action-body {
+  flex: 1 1 auto;
   min-height: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-  overscroll-behavior: contain;
-
   padding-bottom: 8px;
+  overflow: auto;
+}
+
+.action-footer {
+  position: sticky;
+  bottom: 0;
+  margin-top: auto;
+  z-index: 8;
+  background: linear-gradient(180deg, rgba(251, 253, 255, 0) 0%, #fbfdff 32%, #fbfdff 100%);
+  padding-top: 12px;
 }
 
 .action-buttons-container {
-  margin-top: 0;
-  flex-shrink: 0;
-  // display: flex;
+  display: flex;
   justify-content: flex-start;
   gap: 10px;
-  // position: relative;
-  z-index: 2;
-  background: #fff;
-  padding: 12px 0 10px;
-  border-top: 1px solid #f0f0f0;
-  box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.04);
-
-  width: 61%;
-  padding: 10px;
-  position: fixed;
-  bottom: 10px;
-  border: 1px solid #f1f1f1;
-  margin: flx;
-  display: flex;
-  border-radius: 4px;
-  box-shadow: -1px -4px 10px 2px #f7f7f76e;
+  padding: 12px 0 14px;
+  border-top: 1px solid #edf2f8;
   flex-wrap: wrap;
 
   .ant-btn {
-    border-radius: 4px;
+    border-radius: 8px;
+    min-width: 110px;
+    font-weight: 600;
   }
 }
 
-.process-steps-page.is-fullscreen .action-buttons-container {
-  width: calc(100% - 24px);
-  left: 12px;
-  right: 12px;
+@media (max-width: 992px) {
+  .action-body {
+    min-height: 180px;
+  }
+
+  .action-footer {
+    position: static;
+    padding-top: 4px;
+  }
+
+  .action-buttons-container {
+    padding: 10px 0 0;
+    border-top: 0;
+  }
+}
+
+@media (max-width: 576px) {
+  .action-buttons-container {
+    .ant-btn {
+      flex: 1 1 calc(50% - 10px);
+      min-width: 0;
+    }
+  }
 }

package/core/modules/steps/chat-assistant.js

@@ -0,0 +1,141 @@
+const GEMINI_CHAT_MODEL = process.env.GEMINI_CHAT_MODEL || process.env.REACT_APP_GEMINI_CHAT_MODEL || 'gemini-2.5-flash';
+
+const GEMINI_API_BASE_URL =
+  process.env.GEMINI_API_BASE_URL || process.env.REACT_APP_GEMINI_API_BASE_URL || 'https://generativelanguage.googleapis.com/v1beta';
+
+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 normalizeHistory(history = []) {
+  return history.slice(-10).map((item) => ({
+    role: item.role === 'assistant' ? 'model' : 'user',
+    parts: [{ text: item.text }],
+  }));
+}
+
+function extractText(payload) {
+  const candidates = payload && payload.candidates ? payload.candidates : [];
+
+  for (const candidate of candidates) {
+    const parts = candidate && candidate.content && candidate.content.parts ? candidate.content.parts : [];
+
+    const text = parts
+      .map((part) => (part && typeof part.text === 'string' ? part.text : ''))
+      .join(' ')
+      .trim();
+
+    if (text) {
+      return text;
+    }
+  }
+
+  return '';
+}
+
+async function generateText({ prompt, history = [], temperature = 0.65, maxOutputTokens = 360 }) {
+  const apiKey = getGeminiApiKey();
+
+  if (!apiKey) {
+    throw new Error('Gemini API key is missing');
+  }
+
+  const endpoint = `${GEMINI_API_BASE_URL}/models/${GEMINI_CHAT_MODEL}:generateContent?key=${encodeURIComponent(apiKey)}`;
+  const contents = [...normalizeHistory(history), { role: 'user', parts: [{ text: prompt }] }];
+
+  const response = await fetch(endpoint, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      contents,
+      generationConfig: {
+        temperature,
+        maxOutputTokens,
+      },
+    }),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Gemini chat request failed with status ${response.status}`);
+  }
+
+  const payload = await response.json();
+  const text = extractText(payload);
+
+  if (!text) {
+    throw new Error('Gemini chat response did not include text');
+  }
+
+  return text;
+}
+
+export async function generateStepAssistantMessage({ step, index, total, fallbackText, history = [] }) {
+  const stepName = (step && step.step_name) || `Step ${index + 1}`;
+  const stepDescription = (step && step.step_description) || '';
+
+  const prompt = [
+    'You are a warm healthcare concierge assistant inside a step-by-step consultation app.',
+    'Write a short, patient-friendly message in 3-4 sentences.',
+    'It must be reassuring, clear, and engaging.',
+    `Current step: ${index + 1} of ${total}.`,
+    `Step title: ${stepName}.`,
+    `Step details: ${stepDescription || 'No additional description'}.`,
+    'Explain what the guest can expect in this step and what happens next.',
+    'Avoid medical claims and avoid markdown bullets.',
+  ].join(' ');
+
+  try {
+    return await generateText({
+      prompt,
+      history,
+      temperature: 0.7,
+      maxOutputTokens: 260,
+    });
+  } catch (error) {
+    return fallbackText;
+  }
+}
+
+export async function generateChatAssistantReply({ step, index, total, userMessage, history = [] }) {
+  const stepName = (step && step.step_name) || `Step ${index + 1}`;
+  const stepDescription = (step && step.step_description) || '';
+
+  const prompt = [
+    'You are a conversational healthcare onboarding assistant inside a guided consultation workflow.',
+    'Respond in 2-5 short sentences.',
+    'Stay patient-friendly, practical, and calm.',
+    `Current step: ${index + 1} of ${total}.`,
+    `Current step title: ${stepName}.`,
+    `Current step description: ${stepDescription || 'No additional description'}.`,
+    `Guest message: "${userMessage}".`,
+    'If the user asks about next or previous steps, explain the flow simply.',
+    'Do not provide diagnosis or treatment advice.',
+  ].join(' ');
+
+  return generateText({
+    prompt,
+    history,
+    temperature: 0.6,
+    maxOutputTokens: 320,
+  });
+}

package/core/modules/steps/openai-realtime.js

@@ -0,0 +1,275 @@
+const DEFAULT_MODEL =
+  process.env.OPENAI_REALTIME_MODEL ||
+  process.env.REACT_APP_OPENAI_REALTIME_MODEL ||
+  'gpt-realtime';
+const DEFAULT_VOICE =
+  process.env.OPENAI_REALTIME_VOICE ||
+  process.env.REACT_APP_OPENAI_REALTIME_VOICE ||
+  'alloy';
+const DEFAULT_CALLS_ENDPOINT =
+  process.env.OPENAI_REALTIME_ENDPOINT ||
+  process.env.REACT_APP_OPENAI_REALTIME_ENDPOINT ||
+  'https://api.openai.com/v1/realtime/calls';
+const DEFAULT_TOKEN_ENDPOINT =
+  process.env.OPENAI_REALTIME_TOKEN_ENDPOINT ||
+  process.env.REACT_APP_OPENAI_REALTIME_TOKEN_ENDPOINT ||
+  '';
+const DEFAULT_INSTRUCTIONS =
+  process.env.OPENAI_REALTIME_INSTRUCTIONS ||
+  process.env.REACT_APP_OPENAI_REALTIME_INSTRUCTIONS ||
+  'You are a warm, concise healthcare concierge assisting a guest during a guided process.';
+
+function getFromStorage(storageKey) {
+  if (typeof window === 'undefined' || !window.localStorage) {
+    return null;
+  }
+
+  try {
+    return window.localStorage.getItem(storageKey);
+  } catch (error) {
+    return null;
+  }
+}
+
+function resolveOpenAIKey() {
+  return (
+    process.env.OPENAI_API_KEY ||
+    process.env.OPEN_AI_KEY ||
+    process.env.REACT_APP_OPENAI_API_KEY ||
+    process.env.REACT_APP_OPEN_AI_KEY ||
+    getFromStorage('openai_api_key') ||
+    getFromStorage('open_ai_key') ||
+    getFromStorage('OPENAI_API_KEY') ||
+    getFromStorage('OPEN_AI_KEY') ||
+    getFromStorage('REACT_APP_OPENAI_API_KEY') ||
+    getFromStorage('REACT_APP_OPEN_AI_KEY') ||
+    null
+  );
+}
+
+async function fetchEphemeralKey(tokenEndpoint) {
+  const response = await fetch(tokenEndpoint, {
+    method: 'GET',
+    headers: { 'Content-Type': 'application/json' },
+  });
+
+  if (!response.ok) {
+    throw new Error(`OpenAI token endpoint failed with status ${response.status}`);
+  }
+
+  const payload = await response.json().catch(() => null);
+
+  return (
+    payload?.client_secret?.value ||
+    payload?.session?.client_secret?.value ||
+    payload?.value ||
+    null
+  );
+}
+
+async function resolveRealtimeKey(tokenEndpoint) {
+  if (tokenEndpoint) {
+    const key = await fetchEphemeralKey(tokenEndpoint);
+    if (key) {
+      return key;
+    }
+
+    throw new Error('OpenAI token endpoint did not return a client secret');
+  }
+
+  const key = resolveOpenAIKey();
+  if (key) {
+    return key;
+  }
+
+  throw new Error('OpenAI Realtime credentials are missing. Set OPEN_AI_KEY or configure OPENAI_REALTIME_TOKEN_ENDPOINT.');
+}
+
+export function hasOpenAIRealtimeCredentials(tokenEndpoint = DEFAULT_TOKEN_ENDPOINT) {
+  if (tokenEndpoint) {
+    return true;
+  }
+
+  return Boolean(resolveOpenAIKey());
+}
+
+export function createOpenAIRealtimeSession({
+  model = DEFAULT_MODEL,
+  voice = DEFAULT_VOICE,
+  instructions = DEFAULT_INSTRUCTIONS,
+  callsEndpoint = DEFAULT_CALLS_ENDPOINT,
+  tokenEndpoint = DEFAULT_TOKEN_ENDPOINT,
+  onEvent = () => {},
+  onStatus = () => {},
+  onError = () => {},
+} = {}) {
+  let peerConnection = null;
+  let dataChannel = null;
+  let localStream = null;
+  let audioElement = null;
+
+  const state = {
+    status: 'idle',
+  };
+
+  function updateStatus(status) {
+    state.status = status;
+    onStatus(status);
+  }
+
+  function sendEvent(eventPayload) {
+    if (!dataChannel || dataChannel.readyState !== 'open') {
+      return;
+    }
+
+    dataChannel.send(JSON.stringify(eventPayload));
+  }
+
+  function configureSession() {
+    sendEvent({
+      type: 'session.update',
+      session: {
+        instructions,
+        output_modalities: ['audio'],
+        audio: {
+          output: {
+            voice,
+          },
+          input: {
+            turn_detection: {
+              type: 'semantic_vad',
+              create_response: true,
+              interrupt_response: true,
+            },
+          },
+        },
+      },
+    });
+  }
+
+  async function connect() {
+    if (peerConnection) {
+      return;
+    }
+
+    updateStatus('connecting');
+
+    try {
+      if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+        throw new Error('OpenAI Realtime requires a browser environment');
+      }
+
+      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+        throw new Error('Microphone access is not available in this browser');
+      }
+
+      const token = await resolveRealtimeKey(tokenEndpoint);
+
+      peerConnection = new RTCPeerConnection();
+      dataChannel = peerConnection.createDataChannel('oai-events');
+
+      dataChannel.addEventListener('message', (event) => {
+        try {
+          const payload = JSON.parse(event.data);
+          onEvent(payload);
+        } catch (error) {
+          onError(error);
+        }
+      });
+
+      dataChannel.addEventListener('open', () => {
+        configureSession();
+      });
+
+      localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      localStream.getTracks().forEach((track) => peerConnection.addTrack(track, localStream));
+
+      audioElement = document.createElement('audio');
+      audioElement.autoplay = true;
+
+      peerConnection.addEventListener('track', (event) => {
+        const stream = event.streams?.[0];
+        if (stream && audioElement.srcObject !== stream) {
+          audioElement.srcObject = stream;
+        }
+      });
+
+      const offer = await peerConnection.createOffer();
+      await peerConnection.setLocalDescription(offer);
+
+      const response = await fetch(callsEndpoint, {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/sdp',
+        },
+        body: offer.sdp,
+      });
+
+      if (!response.ok) {
+        throw new Error(`OpenAI Realtime SDP exchange failed with status ${response.status}`);
+      }
+
+      const answer = await response.text();
+      await peerConnection.setRemoteDescription({ type: 'answer', sdp: answer });
+
+      updateStatus('connected');
+    } catch (error) {
+      updateStatus('error');
+      onError(error);
+      disconnect();
+      throw error;
+    }
+  }
+
+  function disconnect() {
+    updateStatus('idle');
+
+    if (dataChannel) {
+      dataChannel.close();
+      dataChannel = null;
+    }
+
+    if (peerConnection) {
+      peerConnection.close();
+      peerConnection = null;
+    }
+
+    if (localStream) {
+      localStream.getTracks().forEach((track) => track.stop());
+      localStream = null;
+    }
+
+    if (audioElement) {
+      audioElement.srcObject = null;
+      audioElement = null;
+    }
+  }
+
+  function sendText(text) {
+    if (!text) {
+      return;
+    }
+
+    sendEvent({
+      type: 'conversation.item.create',
+      item: {
+        type: 'message',
+        role: 'user',
+        content: [{ type: 'input_text', text }],
+      },
+    });
+
+    sendEvent({ type: 'response.create' });
+  }
+
+  return {
+    connect,
+    disconnect,
+    sendText,
+    sendEvent,
+    get status() {
+      return state.status;
+    },
+  };
+}

package/core/modules/steps/readme.md

@@ -0,0 +1,167 @@
+## ProcessStepsPage
+
+`ProcessStepsPage` is a generic multi-step process runner used to render and track workflow steps.
+
+File: `core/modules/steps/steps.js`
+
+## What It Does
+
+- Loads process steps from `Dashboard.loadProcess(processId)`.
+- Dynamically renders step components using `related_page`.
+- Tracks step and process timings.
+- Supports `Next`, `Back`, `Skip`, `Finish`, and optional next-process start.
+- Supports timeline click navigation.
+- Supports keyboard navigation with `ArrowLeft` (previous) and `ArrowRight` (next).
+- Supports voice-controlled navigation through Gemini Live API command interpretation.
+- Supports step-level text-to-speech narration with optional auto narration.
+- Optionally opens process content in an external window.
+
+## Export
+
+`ProcessStepsPage` is exported from:
+
+```js
+core/modules/index.js
+```
+
+and can be imported as:
+
+```jsx
+import { ProcessStepsPage } from '.../core/modules';
+```
+
+## Props
+
+- `match`: Router match object.
+- `CustomComponents`: Map of custom step components keyed by component name.
+- `showExternalWindow`: Boolean to enable dual render in popup + main window after chaining process.
+- `ExternalWindowWidth`: Popup width.
+- `ExternalWindowHeight`: Popup height.
+- `history`: Router history (used for goBack on completion).
+
+All additional props are forwarded to dynamic step components.
+
+## URL Params Used
+
+`Location.search()` is used to read:
+
+- `processId`: Initial process to load.
+- `opb_id` or `reference_id`: Reference id for process log.
+- `opno` or `reference_number`: Reference number for process log.
+- `mode`: Passed to process log payload.
+
+## Step Contract (Expected Data Shape)
+
+Each step returned by backend is expected to include:
+
+- `step_id`: Unique step id.
+- `step_name`: Step title shown in UI.
+- `step_description`: Step subtitle shown in UI.
+- `related_page`: Component key to resolve from `CustomComponents` + generic components.
+- `config`: Optional props object spread into the dynamic step component.
+- `is_mandatory`: If `true`, step requires `onStepComplete()` before `Next` is enabled.
+- `allow_skip`: `'Y'` enables Skip button.
+- `order_seqtype`: `'E'` marks end-step and shows `Finish`.
+
+## Dynamic Step Rendering
+
+The active step component is resolved by:
+
+- `allComponents[step.related_page]`
+
+and rendered with:
+
+- `step`
+- `params` (parsed URL params)
+- `onStepComplete` callback
+- forwarded parent props
+- `step.config` spread values
+
+If no step exists, an empty state is shown.
+If component resolution fails, an empty state with missing component name is shown.
+
+## Timing Persistence
+
+Timings are stored in localStorage per process:
+
+- key: `processTimings_<processId>`
+
+Each timing entry:
+
+- `step_id`
+- `start_time`
+- `end_time`
+- `duration` (ms)
+- `status` (`completed` or `skipped`)
+
+On successful `Dashboard.processLog(payload)`, timings are cleared.
+On failure, timings are retained in localStorage.
+
+## Voice Control
+
+Voice commands supported:
+
+- `next`
+- `previous` / `back`
+- `skip`
+- `finish`
+- `repeat`
+- `go to step <number>`
+
+Voice flow:
+
+- Browser speech recognition captures spoken command.
+- Transcript is sent to Gemini Live API over WebSocket.
+- Gemini returns normalized navigation action.
+- Step navigation executes in `ProcessStepsPage`.
+
+Step narration:
+
+- Uses AI TTS providers (Gemini / ElevenLabs).
+- Can be triggered with `Read Step`.
+- Auto narration can be toggled on/off.
+
+### Voice Configuration
+
+- `REACT_APP_GEMINI_API_KEY`: Gemini API key (required for Gemini Live).
+- `REACT_APP_GEMINI_LIVE_MODEL`: Live model name (default: `gemini-live-2.5-flash-preview`).
+- `REACT_APP_GEMINI_LIVE_WS_ENDPOINT`: Optional custom Live WebSocket endpoint.
+- `REACT_APP_VOICE_COMMAND_LANG`: Speech recognition language (default: `en-US`).
+- `ELEVEN_LABS_KEY` or `ELEVENLABS_API_KEY`: ElevenLabs API key for narration provider `elevenlabs`.
+- `REACT_APP_ELEVENLABS_API_KEY`: Browser-safe ElevenLabs API key alternative.
+- `ELEVENLABS_VOICE_ID` / `ELEVEN_LABS_VOICE_ID` / `REACT_APP_ELEVENLABS_VOICE_ID`: Optional ElevenLabs voice id.
+- `REACT_APP_STEP_TTS_LANG`: Narration language (default: `en-US`).
+- `REACT_APP_STEP_TTS_RATE`: Narration speed (default: `1`).
+- `REACT_APP_STEP_TTS_PITCH`: Narration pitch (default: `1`).
+- `REACT_APP_OPENAI_REALTIME_TOKEN_ENDPOINT`: Backend endpoint that returns an OpenAI Realtime client secret for WebRTC.
+- `REACT_APP_OPENAI_REALTIME_MODEL`: Realtime model name (default: `gpt-realtime`).
+- `REACT_APP_OPENAI_REALTIME_VOICE`: Realtime voice name (default: `alloy`).
+- `REACT_APP_OPENAI_REALTIME_INSTRUCTIONS`: Optional system instructions for the conversation session.
+- `OPEN_AI_KEY` / `OPENAI_API_KEY`: OpenAI API key used when token endpoint is not configured.
+
+## Minimal Usage Example
+
+```jsx
+import React from 'react';
+import { ProcessStepsPage } from '../../modules';
+import SampleDetail from '../../modules/lab/components/sample-detail/sample-detail';
+import ResultDetail from '../../modules/lab/components/result-detail/result-detail';
+
+const CustomComponents = {
+  SampleDetail,
+  ResultDetail,
+};
+
+export default function ProcessPage(props) {
+  return <ProcessStepsPage {...props} CustomComponents={CustomComponents} showExternalWindow />;
+}
+```
+
+## Related Files
+
+- `core/modules/steps/steps.js`
+- `core/modules/steps/timeline.js`
+- `core/modules/steps/action-buttons.js`
+- `core/modules/steps/voice-navigation.js`
+- `core/modules/steps/openai-realtime.js`
+- `core/modules/steps/steps.scss`