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

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

@@ -3,14 +3,14 @@
  * Handles navigation and action controls for a multi-step process,
  * including dynamic content rendering and process completion actions.
  */
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Skeleton } from 'antd';
 import { Button } from '../../lib';
 import './action-buttons.scss';
 
 export default function ActionButtons({
   loading,
-  steps,
+  steps = [],
   activeStep,
   isStepCompleted,
   isFullscreen,
@@ -22,62 +22,76 @@ 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(() => {
+    if (!isEndStep) {
+      setShowNextProcess(false);
+    }
+  }, [isEndStep]);
 
   useEffect(() => {
     setShowNextProcess(false);
   }, [steps]);
 
   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>
   );

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;
+    },
+  };
+}