@memori.ai/memori-react 8.2.0 → 8.4.0-rc.0

package/src/components/layouts/chat.css

@@ -6,12 +6,16 @@
     background: none;
 }
 
-.memori-widget > .memori-spin.memori-chat-layout {
+.memori-widget > .memori-spin.memori-chat-layout  {
     display: flex;
     height: 100%;
     flex-direction: column;
 }
 
+.memori-chat-layout--main, .memori-chat-layout--controls{
+    min-height: calc(100% - 25px);
+}
+
 .memori-chat-layout--header {
     text-align: right;
 }
@@ -21,6 +25,98 @@
     width: auto;
 }
 
+.memori-chat-layout-controls-hide{
+    display: none;
+}
+
+.memori-chat-layout-artifact-panel-full-screen{
+    width: 100%;
+    height: 100%;
+    flex:1 1;
+}
+
+
+.memori-chat-layout--main {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    /* max-width: 1200px; */
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.memori-chat-layout--main-with-artifact {
+    flex-direction: row;
+    padding: 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(20px);
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    gap: 1rem;
+}
+
+.memori-chat-layout--controls {
+    position: relative;
+    z-index: 5;
+    overflow: hidden;
+    min-width: 0;
+    flex: 1;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.memori-chat-layout--controls-with-artifact {
+    max-height: 100%;
+    flex: 0 0 50%;
+    margin: 0;
+}
+
+.memori-chat-layout--artifact-panel {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    flex: 0 0 50%;
+    flex-direction: column;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 12px;
+    backdrop-filter: blur(20px);
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.8) 100%);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    opacity: 0;
+    transform: translateX(100%) scale(0.95);
+    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.memori-chat-layout--artifact-panel-enter {
+    animation: artifact-panel-slide-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    opacity: 1;
+    transform: translateX(0) scale(1);
+}
+
+@keyframes artifact-panel-slide-in {
+    0% {
+        opacity: 0;
+        transform: translateX(100%) scale(0.95);
+    }
+    50% {
+        opacity: 0.8;
+        transform: translateX(50%) scale(0.98);
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(0) scale(1);
+    }
+}
+
+
+
 .memori-chat-layout .memori--avatar {
     top: 0;
 }
@@ -52,25 +148,17 @@
     }
 }
 
-.memori-chat-layout--controls {
-    position: relative;
-    z-index: 5;
-    max-height: calc(100% - 50px);
-    flex: 1;
-}
-
 .memori-chat-layout--controls .memori--start-panel,
 .memori-chat-layout--controls .memori-chat--wrapper {
     max-width: 1200px;
+    height: 100%;
+    min-height: calc(87vh - 1rem);
     margin: 0 auto;
 }
 
-.memori-chat-layout--controls .memori--start-panel {
-    margin-top: 3rem;
-}
 
 .memori-chat-layout--controls .memori-chat--wrapper {
-    height: calc(100% - 1rem);
+    height: calc(87vh - 1rem);
 }
 
 .memori-chat-layout .memori-chat--content {
@@ -125,5 +213,239 @@
 }
 
 .memori-chat-layout .memori--global-background-image {
-    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(200, 200, 200, 0.8));
+    position: relative;
+    overflow: hidden;
+    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(200, 200, 200, 0.8) 100%);
+    transition: all 0.2s ease-in-out;
+}
+
+.memori-chat-layout .memori--global-background-image::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    animation: background-shimmer 4s ease-in-out infinite;
+    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
+    background-size: 200% 200%;
+    content: '';
+    pointer-events: none;
+}
+
+@keyframes background-shimmer {
+    0%, 100% { background-position: 200% 200%; }
+    50% { background-position: -200% -200%; }
+}
+
+/* Enhanced micro-interactions */
+
+.memori-chat-layout--main:hover {
+    transform: translateY(-2px);
+    /* box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15); */
+}
+
+
+.memori-chat-layout--controls:hover {
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+    transform: translateY(-1px);
 }
+
+
+
+.memori-chat-layout--artifact-panel:hover {
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+    transform: translateY(-1px) scale(1.01);
+}
+
+/* Loading states */
+.memori-chat-layout--loading {
+    position: relative;
+    overflow: hidden;
+}
+
+.memori-chat-layout--loading::before {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    animation: loading-shimmer 1.5s infinite;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    content: '';
+}
+
+@keyframes loading-shimmer {
+    0% { left: -100%; }
+    100% { left: 100%; }
+}
+
+/* Success animations */
+.memori-chat-layout--success {
+    animation: success-pulse 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes success-pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.02); }
+    100% { transform: scale(1); }
+}
+
+/* Error states */
+.memori-chat-layout--error {
+    animation: error-shake 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes error-shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-4px); }
+    75% { transform: translateX(4px); }
+}
+
+/* Focus states for accessibility */
+.memori-chat-layout--controls:focus-within {
+    border-radius: 12px;
+    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1);
+    outline: 2px solid #007bff;
+    outline-offset: 2px;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    .memori-chat-layout--main {
+        border: 2px solid #333;
+    }
+    
+    .memori-chat-layout--controls {
+        border: 2px solid #333;
+    }
+    
+    .memori-chat-layout--artifact-panel {
+        border: 2px solid #333;
+    }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+    .memori-chat-layout--main,
+    .memori-chat-layout--controls,
+    .memori-chat-layout--artifact-panel,
+    .memori-chat-layout--header {
+        animation: none;
+        transition: none;
+    }
+    
+    .memori-chat-layout--main:hover {
+        transform: none;
+    }
+    
+    .memori-chat-layout--controls:hover {
+        transform: none;
+    }
+    
+    .memori-chat-layout--artifact-panel:hover {
+        transform: none;
+    }
+    
+    .memori-chat-layout--artifact-panel-enter {
+        animation: none;
+        opacity: 1;
+        transform: translateX(0) scale(1);
+    }
+}
+
+
+.memori-chat-layout--artifact-drawer {
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+}
+
+.memori-chat-layout--artifact-drawer .memori-artifact-drawer {
+    pointer-events: auto;
+}
+
+/* Mobile drawer animations */
+
+
+.memori-chat-layout--artifact-drawer[data-headlessui-state~="open"] {
+    opacity: 1;
+    visibility: visible;
+}
+
+.memori-chat-layout--artifact-drawer[data-headlessui-state~="open"] .memori-artifact-drawer {
+    animation: mobile-drawer-slide-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    transform: translateX(0);
+}
+
+@keyframes mobile-drawer-slide-in {
+    0% {
+        opacity: 0;
+        transform: translateX(100%);
+    }
+    50% {
+        opacity: 0.8;
+        transform: translateX(50%);
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/* Adjust chat layout when drawer is open */
+.memori-chat-layout:has(.memori-chat-layout--artifact-drawer .memori-artifact-drawer[data-headlessui-state~="open"]) .memori-chat-layout--controls {
+    margin-right: 50%;
+    filter: blur(1px);
+    opacity: 0.8;
+    transform: scale(0.98);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.memori-chat-layout:has(.memori-chat-layout--artifact-drawer .memori-artifact-drawer[data-headlessui-state~="open"]) .memori-chat-layout--main {
+    backdrop-filter: blur(5px);
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(248, 250, 252, 0.02) 100%);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+    .memori-chat-layout--main {
+        flex-direction: column !important;
+        padding: 0.5rem !important;
+        backdrop-filter: blur(10px) !important;
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(248, 250, 252, 0.02) 100%) !important;
+        gap: 0.5rem !important;
+    }
+    
+    .memori-chat-layout--artifact-panel {
+        display: none !important;
+    }
+    
+    .memori-chat-layout--controls {
+        max-height: calc(100% - 50px) !important;
+        flex: 1 !important;
+        border: 1px solid rgba(255, 255, 255, 0.3) !important;
+        margin: 0 !important;
+        /* background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 250, 252, 0.6) 100%) !important;
+        backdrop-filter: blur(20px) !important;
+        border-radius: 12px !important; */
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
+    }
+    
+    .memori-chat-layout:has(.memori-chat-layout--artifact-drawer .memori-artifact-drawer[data-headlessui-state~="open"]) .memori-chat-layout--controls {
+        margin-right: 0;
+        filter: blur(2px);
+        opacity: 0.7;
+        transform: scale(0.95);
+    }
+    
+    .memori-chat-layout--artifact-drawer {
+        backdrop-filter: blur(12px) saturate(200%) !important;
+        background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%) !important;
+    }
+}

package/src/components/layouts/layouts.stories.tsx

@@ -5,6 +5,7 @@ import Memori, { LayoutProps, Props } from '../MemoriWidget/MemoriWidget';
 import I18nWrapper from '../../I18nWrapper';
 import Spin from '../ui/Spin';
 import { VisemeProvider } from '../../context/visemeContext';
+import { ArtifactSystemProvider } from '../MemoriArtifactSystem';
 
 const meta: Meta = {
   title: 'General/Layouts',
@@ -26,9 +27,21 @@ export default meta;
 
 const Template: Story<Props> = args => (
   <I18nWrapper>
+    <ArtifactSystemProvider config={{
+      supportedMimeTypes: {
+        html: {
+          name: 'HTML',
+          icon: '🌐',
+          hasPreview: true,
+          language: 'html',
+          mimeType: 'text/html',
+        },
+      },
+    }}>
     <VisemeProvider>
       <Memori {...args} />
     </VisemeProvider>
+    </ArtifactSystemProvider>
   </I18nWrapper>
 );
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
@@ -267,8 +280,6 @@ export const CustomLayout: React.FC<LayoutProps> = ({
   startPanelProps,
   integrationStyle,
   integrationBackground,
-  ChangeMode,
-  changeModeProps,
   sessionId,
   hasUserActivatedSpeak,
   loading = false,

package/src/components/layouts/zoomed-full-body.css

@@ -1,6 +1,4 @@
-.memori-spin--zoomed-full-body {
-    height: 100vh !important;
-}
+
 
 .memori--powered-by-custom {
     position: absolute;

package/src/helpers/message.ts

@@ -87,6 +87,7 @@ export const renderMsg = (
         /<document_attachment filename="([^"]+)" type="([^"]+)">([\s\S]*?)<\/document_attachment>/g,
         ''
       )
+      .replaceAll(/<output\s+class\s*=\s*["\']memori-artifact["\'][^>]*data-mimetype\s*=\s*["\']([^"']+)["\'][^>]*>([\s\S]*?)(?:<\/output>|$)/gi, '')
       .replaceAll(/```markdown([^```]+)```/g, '$1')
       .replaceAll('($', '( $')
       .replaceAll(':$', ': $')

package/src/helpers/stt/useSTT.ts

@@ -1,8 +1,9 @@
-// hooks/useSTT.ts
+// hooks/useSTT.ts - Modified version for Azure WAV support
 // Audio format compatibility:
 // - MediaRecorder supports: webm, mp4, ogg formats
 // - Azure STT supported formats:
-//   * webm-16khz-16bit-mono-opus (recommended for this config)
+//   * WAV format (required for Azure Speech SDK)
+//   * webm-16khz-16bit-mono-opus (for REST API)
 //   * webm-24khz-16bit-24kbps-mono-opus
 //   * webm-24khz-16bit-mono-opus
 // - OpenAI: Supports multiple formats including webm, mp4, ogg
@@ -48,6 +49,76 @@ export interface UseSTTOptions {
  */
 export type RecordingState = 'idle' | 'recording' | 'processing' | 'error';
 
+/**
+ * Convert audio blob to WAV format
+ */
+async function convertToWav(audioBlob: Blob): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
+    const fileReader = new FileReader();
+    
+    fileReader.onload = async () => {
+      try {
+        const arrayBuffer = fileReader.result as ArrayBuffer;
+        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+        
+        // Convert to WAV format
+        const wavBlob = audioBufferToWav(audioBuffer);
+        resolve(wavBlob);
+      } catch (error) {
+        reject(error);
+      }
+    };
+    
+    fileReader.onerror = () => reject(new Error('Failed to read audio file'));
+    fileReader.readAsArrayBuffer(audioBlob);
+  });
+}
+
+/**
+ * Convert AudioBuffer to WAV Blob
+ */
+function audioBufferToWav(buffer: AudioBuffer): Blob {
+  const length = buffer.length;
+  const sampleRate = buffer.sampleRate;
+  const numberOfChannels = buffer.numberOfChannels;
+  const arrayBuffer = new ArrayBuffer(44 + length * numberOfChannels * 2);
+  const view = new DataView(arrayBuffer);
+  
+  // WAV header
+  const writeString = (offset: number, string: string) => {
+    for (let i = 0; i < string.length; i++) {
+      view.setUint8(offset + i, string.charCodeAt(i));
+    }
+  };
+  
+  writeString(0, 'RIFF');
+  view.setUint32(4, 36 + length * numberOfChannels * 2, true);
+  writeString(8, 'WAVE');
+  writeString(12, 'fmt ');
+  view.setUint32(16, 16, true);
+  view.setUint16(20, 1, true);
+  view.setUint16(22, numberOfChannels, true);
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate * numberOfChannels * 2, true);
+  view.setUint16(32, numberOfChannels * 2, true);
+  view.setUint16(34, 16, true);
+  writeString(36, 'data');
+  view.setUint32(40, length * numberOfChannels * 2, true);
+  
+  // Convert audio data
+  let offset = 44;
+  for (let i = 0; i < length; i++) {
+    for (let channel = 0; channel < numberOfChannels; channel++) {
+      const sample = Math.max(-1, Math.min(1, buffer.getChannelData(channel)[i]));
+      view.setInt16(offset, sample < 0 ? sample * 0x8000 : sample * 0x7FFF, true);
+      offset += 2;
+    }
+  }
+  
+  return new Blob([arrayBuffer], { type: 'audio/wav' });
+}
+
 /**
  * Unified hook for handling Speech-to-Text functionality
  */
@@ -80,9 +151,7 @@ export function useSTT(
   const analyserRef = useRef<AnalyserNode | null>(null);
   const dataArrayRef = useRef<Uint8Array | null>(null);
   const apiUrl = options.apiUrl || '/api/stt';
-  const silenceTimeout = options.silenceTimeout || 2; // Default 300ms
-
-  // Replace the initializeRecording function in your useSTT.ts with this:
+  const silenceTimeout = options.silenceTimeout || 2; // Default 2 seconds
 
   const initializeRecording = useCallback(async (): Promise<boolean> => {
     try {
@@ -117,20 +186,22 @@ export function useSTT(
         }
       }
 
-      // Format selection based on provider and browser support
+      // Format selection based on provider
       let mimeType = '';
 
       if (config.provider === 'azure') {
-        if (MediaRecorder.isTypeSupported('audio/mp4')) {
+        // For Azure, we'll record in a supported format and convert to WAV
+        if (MediaRecorder.isTypeSupported('audio/webm;codecs=opus')) {
+          mimeType = 'audio/webm;codecs=opus';
+        } else if (MediaRecorder.isTypeSupported('audio/webm')) {
+          mimeType = 'audio/webm';
+        } else if (MediaRecorder.isTypeSupported('audio/mp4')) {
           mimeType = 'audio/mp4';
         } else if (MediaRecorder.isTypeSupported('audio/ogg;codecs=opus')) {
           mimeType = 'audio/ogg;codecs=opus';
-        } else if (MediaRecorder.isTypeSupported('audio/ogg')) {
-          mimeType = 'audio/ogg';
-        } else if (MediaRecorder.isTypeSupported('audio/webm')) {
-          mimeType = 'audio/webm';
         }
       } else {
+        // For OpenAI, use the best available format
         if (MediaRecorder.isTypeSupported('audio/webm;codecs=opus')) {
           mimeType = 'audio/webm;codecs=opus';
         } else if (MediaRecorder.isTypeSupported('audio/webm')) {
@@ -165,7 +236,7 @@ export function useSTT(
             throw new Error('No audio data recorded');
           }
 
-          const audioBlob = new Blob(chunksRef.current, {
+          let audioBlob = new Blob(chunksRef.current, {
             type: mediaRecorder.mimeType,
           });
 
@@ -173,6 +244,18 @@ export function useSTT(
             throw new Error('Recorded audio is empty');
           }
 
+          // Convert to WAV if using Azure
+          if (config.provider === 'azure') {
+            try {
+              console.log('Converting audio to WAV format for Azure');
+              audioBlob = await convertToWav(audioBlob);
+              console.log('Audio converted to WAV successfully');
+            } catch (conversionError) {
+              console.error('Failed to convert audio to WAV:', conversionError);
+              throw new Error('Failed to convert audio to WAV format for Azure');
+            }
+          }
+
           const result = await transcribeAudio(audioBlob);
 
           if (processSpeechAndSendMessage) {
@@ -225,7 +308,7 @@ export function useSTT(
 
       return false;
     }
-  }, [config.provider, options, silenceTimeout]); // Add silenceTimeout to dependencies
+  }, [config.provider, options, silenceTimeout]);
 
   /**
    * Detect if there's audio activity (not silence)
@@ -241,7 +324,6 @@ export function useSTT(
     const average = dataArrayRef.current.reduce((sum, value) => sum + value, 0) / dataArrayRef.current.length;
     
     // Consider audio active if average volume is above threshold
-    // Adjust this threshold based on your needs
     const threshold = 10; // Adjust this value as needed
     return average > threshold;
   }, []);
@@ -306,7 +388,10 @@ export function useSTT(
       const formData = new FormData();
       let fileExtension = 'webm'; // default fallback
 
-      if (mediaRecorderRef.current?.mimeType) {
+      // Determine file extension based on provider and blob type
+      if (config.provider === 'azure') {
+        fileExtension = 'wav'; // We convert to WAV for Azure
+      } else if (mediaRecorderRef.current?.mimeType) {
         if (mediaRecorderRef.current.mimeType.includes('webm')) {
           fileExtension = 'webm';
         } else if (mediaRecorderRef.current.mimeType.includes('mp4')) {
@@ -548,4 +633,4 @@ export function useSTT(
     // Utils
     cleanup,
   };
-}
+}

package/src/index.stories.tsx

@@ -258,20 +258,20 @@ NunzioFiore.args = {
 
 export const TestCustomAnimationsWithRPMSequence = Template.bind({});
 TestCustomAnimationsWithRPMSequence.args = {
-    memoriName: "Dancing Avatar",
-    ownerUserName: "andrea.patini3",
-    memoriID: "45420d30-a103-455c-bab1-b708a0566a02",
-    ownerUserID: "58770358-a5db-4b49-b3a4-734fc468e745",
-    tenantID: "aisuru-staging.aclambda.online",
-    engineURL: "https://engine-staging.memori.ai/memori/v2",
-    apiURL: "https://backend-staging.memori.ai/api/v2",
-    baseURL: "https://aisuru-staging.aclambda.online",
-    uiLang: "IT",
-    spokenLang: "IT",
-    layout: "HIDDEN_CHAT",
-    showLogin: true,
-    autoStart: true,
-    integrationID: "2f6e11a0-d799-4974-aa17-cf111d0af82a"
+  memoriName: 'Dancing Avatar',
+  ownerUserName: 'andrea.patini3',
+  memoriID: '45420d30-a103-455c-bab1-b708a0566a02',
+  ownerUserID: '58770358-a5db-4b49-b3a4-734fc468e745',
+  tenantID: 'aisuru-staging.aclambda.online',
+  engineURL: 'https://engine-staging.memori.ai/memori/v2',
+  apiURL: 'https://backend-staging.memori.ai/api/v2',
+  baseURL: 'https://aisuru-staging.aclambda.online',
+  uiLang: 'IT',
+  spokenLang: 'IT',
+  layout: 'HIDDEN_CHAT',
+  showLogin: true,
+  autoStart: true,
+  integrationID: '2f6e11a0-d799-4974-aa17-cf111d0af82a',
 };
 
 export const TestCustomGLBSingleAnimation = Template.bind({});
@@ -397,12 +397,16 @@ WithCustomUserAvatar.args = {
 
 export const Test = Template.bind({});
 Test.args = {
-  ownerUserName: 'dpezzettone',
-  memoriName: 'Meta Prompt Engineer',
-  tenantID: 'www.aisuru.com',
-  layout: 'CHAT',
-  uiLang: 'en',
-  showShare: true,
-  showSettings: true,
-  showLogin: true,
+  memoriName: 'Test Artifact',
+  ownerUserName: 'Andrea-Patini',
+  memoriID: '8cec936c-d440-4781-91df-e4ddf044255e',
+  ownerUserID: '91dbc9ba-b684-4fbe-9828-b5980af6cda9',
+  tenantID: 'aisuru-staging.aclambda.online',
+  engineURL: 'https://engine-staging.memori.ai/memori/v2',
+  apiURL: 'https://backend-staging.memori.ai/api/v2',
+  baseURL: 'https://aisuru-staging.aclambda.online',
+  layout: 'FULLPAGE',
+  uiLang: 'EN',
+  spokenLang: 'EN',
+  integrationID: '2b37c25d-8cf9-456f-b9ee-2c27dc4d54fc',
 };