@memori.ai/memori-react 7.5.1 → 7.6.1

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -73,10 +73,14 @@ import {
   escapeHTML,
   stripMarkdown,
   stripOutputTags,
+  stripHTML,
 } from '../../helpers/utils';
 import { anonTag, uiLanguages } from '../../helpers/constants';
 import { getErrori18nKey } from '../../helpers/error';
 import { getCredits } from '../../helpers/credits';
+import HiddenChatLayout from '../layouts/HiddenChat';
+import ZoomedFullBodyLayout from '../layouts/ZoomedFullBody';
+import { useViseme } from '../../context/visemeContext';
 
 // Widget utilities and helpers
 const getMemoriState = (integrationId?: string): object | null => {
@@ -333,7 +337,14 @@ export interface Props {
   memoriLang?: string;
   multilingual?: boolean;
   integration?: Integration;
-  layout?: 'DEFAULT' | 'FULLPAGE' | 'TOTEM' | 'CHAT' | 'WEBSITE_ASSISTANT';
+  layout?:
+    | 'DEFAULT'
+    | 'FULLPAGE'
+    | 'TOTEM'
+    | 'CHAT'
+    | 'WEBSITE_ASSISTANT'
+    | 'HIDDEN_CHAT'
+    | 'ZOOMED_FULL_BODY';
   customLayout?: React.FC<LayoutProps>;
   showShare?: boolean;
   showCopyButton?: boolean;
@@ -494,7 +505,11 @@ const MemoriWidget = ({
    * Sets the language in the i18n instance
    */
   useEffect(() => {
-    if (userLang && uiLanguages.includes(userLang.toLowerCase())) {
+    if (
+      isMultilanguageEnabled &&
+      userLang &&
+      uiLanguages.includes(userLang.toLowerCase())
+    ) {
       // @ts-ignore
       i18n.changeLanguage(userLang.toLowerCase());
     }
@@ -526,6 +541,15 @@ const MemoriWidget = ({
     'center'
   );
   const [hideEmissions, setHideEmissions] = useState(false);
+
+  const {
+    addVisemeToQueue,
+    processVisemeQueue,
+    clearVisemes,
+    emotion,
+    getAzureStyleForEmotion,
+  } = useViseme();
+
   useEffect(() => {
     setIsPlayingAudio(!!speechSynthesizer);
     memoriSpeaking = !!speechSynthesizer;
@@ -1602,6 +1626,7 @@ const MemoriWidget = ({
     speechConfig.speechSynthesisLanguage = getCultureCodeByLanguage(userLang);
     speechConfig.speechSynthesisVoiceName = getTTSVoice(userLang); // https://docs.microsoft.com/it-it/azure/cognitive-services/speech-service/language-support#text-to-speech
     speechConfig.speechRecognitionLanguage = getCultureCodeByLanguage(userLang);
+    speechConfig.setProperty('speechSynthesis.outputFormat', 'viseme');
 
     if (hasTouchscreen())
       speechConfig.speechSynthesisOutputFormat =
@@ -1936,19 +1961,42 @@ const MemoriWidget = ({
       onEndSpeakStartListen();
     };
 
+    // Clear any existing visemes before starting new speech
+    clearVisemes();
+
+    // Set up the viseme event handler
+    speechSynthesizer.visemeReceived = function (_, e) {
+      addVisemeToQueue({
+        visemeId: e.visemeId,
+        audioOffset: e.audioOffset,
+      });
+    };
+
+    const textToSpeak = escapeHTML(
+      stripMarkdown(stripEmojis(stripHTML(stripOutputTags(text))))
+    );
+
     speechSynthesizer.speakSsmlAsync(
       `<speak version="1.0" xmlns="http://www.w3.org/2001/10/synthesis" xmlns:mstts="https://www.w3.org/2001/mstts" xmlns:emo="http://www.w3.org/2009/10/emotionml" xml:lang="${getCultureCodeByLanguage(
         userLang
-      )}"><voice name="${getTTSVoice(userLang)}"><s>${replaceTextWithPhonemes(
-        escapeHTML(stripMarkdown(stripEmojis(stripOutputTags(text)))),
+      )}"><voice name="${getTTSVoice(
+        userLang
+      )}"><mstts:express-as style="${getAzureStyleForEmotion(
+        emotion
+      )}"><s>${replaceTextWithPhonemes(
+        textToSpeak,
         userLang.toLowerCase()
-      )}</s></voice></speak>`,
+      )}</s></mstts:express-as></voice></speak>`,
       result => {
         if (result) {
           setIsPlayingAudio(true);
           memoriSpeaking = true;
 
+          // Process the viseme data
+          processVisemeQueue();
+
           try {
+            // Decode the audio data
             audioContext.decodeAudioData(result.audioData, function (buffer) {
               source.buffer = buffer;
               source.connect(audioContext.destination);
@@ -1958,6 +2006,7 @@ const MemoriWidget = ({
               }
             });
 
+            // Handle the audio context state changes
             audioContext.onstatechange = () => {
               if (
                 audioContext.state === 'suspended' ||
@@ -1980,6 +2029,7 @@ const MemoriWidget = ({
           } catch (e) {
             console.warn('speak error: ', e);
             window.speechSynthesis.speak(new SpeechSynthesisUtterance(text));
+            clearVisemes();
             setIsPlayingAudio(false);
             memoriSpeaking = false;
 
@@ -1991,6 +2041,7 @@ const MemoriWidget = ({
           }
         } else {
           audioContext.resume();
+          clearVisemes();
           setIsPlayingAudio(false);
           memoriSpeaking = false;
           emitEndSpeakEvent();
@@ -3134,6 +3185,10 @@ const MemoriWidget = ({
     ? FullPageLayout
     : selectedLayout === 'WEBSITE_ASSISTANT'
     ? WebsiteAssistantLayout
+    : selectedLayout === 'HIDDEN_CHAT'
+    ? HiddenChatLayout
+    : selectedLayout === 'ZOOMED_FULL_BODY'
+    ? ZoomedFullBodyLayout
     : FullPageLayout;
 
   return (

package/src/components/StartPanel/StartPanel.tsx

@@ -269,7 +269,7 @@ const StartPanel: React.FC<Props> = ({
           </Button>
 
           <CompletionProviderStatus
-            provider={memori.completionConfigForQuestionAnswering?.provider}
+            provider={memori?.completionConfigForQuestionAnswering?.provider}
             forceStatus={_TEST_forceProviderStatus}
           />
 

package/src/components/layouts/Chat.test.tsx

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 import Memori from '../MemoriWidget/MemoriWidget';
 import { integration, memori, tenant } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';
-
+import { VisemeProvider } from '../../context/visemeContext';
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: jest.fn().mockImplementation(query => ({
@@ -20,15 +20,17 @@ Object.defineProperty(window, 'matchMedia', {
 it('renders Chat layout unchanged', () => {
   const { container } = render(
     <I18nWrapper>
-      <Memori
-        showShare={true}
+      <VisemeProvider>
+        <Memori
+          showShare={true}
         showSettings={true}
         memori={memori}
         tenant={tenant}
         tenantID="aisuru.com"
         integration={integration}
-        layout="CHAT"
-      />
+          layout="CHAT"
+        />
+      </VisemeProvider>
     </I18nWrapper>
   );
   expect(container).toMatchSnapshot();

package/src/components/layouts/FullPage.test.tsx

@@ -2,6 +2,7 @@ import { render } from '@testing-library/react';
 import Memori from '../MemoriWidget/MemoriWidget';
 import { integration, memori, tenant } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';
+import { VisemeProvider } from '../../context/visemeContext';
 
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
@@ -20,15 +21,17 @@ Object.defineProperty(window, 'matchMedia', {
 it('renders FullPage layout unchanged', () => {
   const { container } = render(
     <I18nWrapper>
-      <Memori
-        showShare={true}
-        showSettings={true}
-        memori={memori}
-        tenant={tenant}
-        tenantID="aisuru.com"
-        integration={integration}
+      <VisemeProvider>
+        <Memori
+          showShare={true}
+          showSettings={true}
+          memori={memori}
+          tenant={tenant}
+          tenantID="aisuru.com"
+          integration={integration}
         layout="FULLPAGE"
-      />
+        />
+      </VisemeProvider>
     </I18nWrapper>
   );
   expect(container).toMatchSnapshot();

package/src/components/layouts/HiddenChat.test.tsx

@@ -0,0 +1,37 @@
+import { render } from '@testing-library/react';
+import Memori from '../MemoriWidget/MemoriWidget';
+import { integration, memori, tenant } from '../../mocks/data';
+import I18nWrapper from '../../I18nWrapper';
+import { VisemeProvider } from '../../context/visemeContext';
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+it('renders HIDDEN_CHAT layout unchanged', () => {
+  const { container } = render(
+    <I18nWrapper>
+      <VisemeProvider>
+        <Memori
+          showShare={true}
+          showSettings={true}
+          memori={memori}
+          tenant={tenant}
+          tenantID="aisuru.com"
+          integration={integration}
+          layout="HIDDEN_CHAT"
+        />
+      </VisemeProvider>
+    </I18nWrapper>
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/layouts/HiddenChat.tsx

@@ -0,0 +1,107 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import Spin from '../ui/Spin';
+import { LayoutProps } from '../MemoriWidget/MemoriWidget';
+import { useTranslation } from 'react-i18next';
+import QuestionHelp from '../icons/QuestionHelp';
+import Close from '../icons/Close';
+
+const HiddenChatLayout: React.FC<LayoutProps> = ({
+  Header,
+  headerProps,
+  Chat,
+  chatProps,
+  startPanelProps,
+  sessionId,
+  hasUserActivatedSpeak,
+}) => {
+  const { t } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const initChat = () => {
+    try {
+      window.speechSynthesis.speak(new SpeechSynthesisUtterance(''));
+    } catch (e) {
+      console.error(e);
+    }
+    if (startPanelProps && startPanelProps?.initializeTTS)
+      startPanelProps?.initializeTTS();
+    if (startPanelProps && startPanelProps?.onClickStart)
+      startPanelProps?.onClickStart();
+  };
+
+  useEffect(() => {
+    const mainDiv = document.body;
+    if (mainDiv) {
+      if (isOpen) {
+        mainDiv.style.width = 'calc(100% - 350px)';
+        mainDiv.style.marginRight = '300px';
+        mainDiv.style.transition = 'all 0.5s';
+      } else {
+        mainDiv.style.width = '100%';
+        mainDiv.style.marginLeft = '0';
+      }
+    }
+  }, [isOpen]);
+
+  const handleSidebarToggle = () => {
+    setIsOpen(!isOpen);
+    initChat();
+  };
+
+  return (
+    <>
+      <input
+        type="checkbox"
+        id="memori-sidebar-toggle"
+        className="memori-sidebar-toggle"
+        checked={isOpen}
+        onChange={handleSidebarToggle}
+      />
+      <div className="memori-sidebar-container">
+        <label
+          htmlFor="memori-sidebar-toggle"
+          className="memori-sidebar-toggle-label memori-open-label"
+        >
+          <QuestionHelp className="memori-icon" aria-label={t('expand')} />
+        </label>
+        <aside className="memori-sidebar">
+          <label
+            htmlFor="memori-sidebar-toggle"
+            className="memori-sidebar-toggle-label memori-close-label"
+          >
+            <span>
+              <Close className="memori-icon-close" aria-label={t('collapse')} />
+            </span>
+          </label>
+          <div className="memori-sidebar-content">
+            <div className="memori-hidden-chat-layout--header">
+              {Header && headerProps && (
+                <Header
+                  position={{
+                    latitude: 0,
+                    longitude: 0,
+                    placeName: '',
+                  }}
+                  {...headerProps}
+                  className="memori-hidden-chat-layout-header--layout"
+                />
+              )}
+            </div>
+          </div>
+          <div id="extension" />
+          <div className="memori-hidden-chat-layout--controls">
+            {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
+              <Chat {...chatProps} />
+            ) : (
+              <div className="memori-loading">
+                <Spin />
+              </div>
+            )}
+          </div>
+        </aside>
+      </div>
+    </>
+  );
+};
+
+export default HiddenChatLayout;

package/src/components/layouts/Totem.test.tsx

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 import Memori from '../MemoriWidget/MemoriWidget';
 import { integration, memori, tenant } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';
-
+import { VisemeProvider } from '../../context/visemeContext';
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: jest.fn().mockImplementation(query => ({
@@ -20,15 +20,17 @@ Object.defineProperty(window, 'matchMedia', {
 it('renders Totem layout unchanged', () => {
   const { container } = render(
     <I18nWrapper>
-      <Memori
+      <VisemeProvider>
+        <Memori
         showShare={true}
         showSettings={true}
         memori={memori}
         tenant={tenant}
         tenantID="aisuru.com"
         integration={integration}
-        layout="TOTEM"
-      />
+          layout="TOTEM"
+        />
+      </VisemeProvider>
     </I18nWrapper>
   );
   expect(container).toMatchSnapshot();

package/src/components/layouts/WebsiteAssistant.test.tsx

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 import Memori from '../MemoriWidget/MemoriWidget';
 import { integration, memori, tenant } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';
-
+import { VisemeProvider } from '../../context/visemeContext';
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: jest.fn().mockImplementation(query => ({
@@ -20,15 +20,17 @@ Object.defineProperty(window, 'matchMedia', {
 it('renders WEBSITE_ASSISTANT layout unchanged', () => {
   const { container } = render(
     <I18nWrapper>
-      <Memori
-        showShare={true}
+      <VisemeProvider>
+        <Memori
+          showShare={true}
         showSettings={true}
         memori={memori}
         tenant={tenant}
         tenantID="aisuru.com"
         integration={integration}
-        layout="WEBSITE_ASSISTANT"
-      />
+          layout="WEBSITE_ASSISTANT"
+        />
+      </VisemeProvider>
     </I18nWrapper>
   );
   expect(container).toMatchSnapshot();

package/src/components/layouts/ZoomedFullBody.test.tsx

@@ -0,0 +1,37 @@
+import { render } from '@testing-library/react';
+import Memori from '../MemoriWidget/MemoriWidget';
+import { integration, memori, tenant } from '../../mocks/data';
+import I18nWrapper from '../../I18nWrapper';
+import { VisemeProvider } from '../../context/visemeContext';
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+it('renders ZOOMED_FULL_BODY layout unchanged', () => {
+  const { container } = render(
+    <I18nWrapper>
+      <VisemeProvider>
+        <Memori
+          showShare={true}
+          showSettings={true}
+          memori={memori}
+          tenant={tenant}
+          tenantID="aisuru.com"
+          integration={integration}
+          layout="ZOOMED_FULL_BODY"
+        />
+      </VisemeProvider>
+    </I18nWrapper>
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/layouts/ZoomedFullBody.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import Spin from '../ui/Spin';
+import { LayoutProps } from '../MemoriWidget/MemoriWidget';
+
+const FullPageLayout: React.FC<LayoutProps> = ({
+  Header,
+  headerProps,
+  Avatar,
+  avatarProps,
+  Chat,
+  chatProps,
+  StartPanel,
+  startPanelProps,
+  integrationStyle,
+  integrationBackground,
+  ChangeMode,
+  changeModeProps,
+  sessionId,
+  hasUserActivatedSpeak,
+  showInstruct = false,
+  loading = false,
+  poweredBy,
+}) => (
+  <>
+    {integrationStyle}
+    {integrationBackground}
+
+    <Spin spinning={loading}>
+      {showInstruct && ChangeMode && changeModeProps && (
+        <ChangeMode {...changeModeProps} />
+      )}
+
+      {Header && headerProps && <Header {...headerProps} />}
+
+      <div className="memori--grid">
+        <div className="memori--grid-column memori--grid-column-left">
+          {Avatar && avatarProps && <Avatar chatProps={chatProps} isZoomed {...avatarProps} />}
+
+          <div id="extension" />
+        </div>
+        <div className="memori--grid-column memori--grid-column-right">
+          {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
+            <Chat {...chatProps} />
+          ) : startPanelProps ? (
+            <StartPanel {...startPanelProps} />
+          ) : null}
+        </div>
+
+        {poweredBy}
+      </div>
+    </Spin>
+  </>
+);
+
+export default FullPageLayout;