@memori.ai/memori-react 8.21.0 → 8.23.0

package/esm/version.js

@@ -1,2 +1,2 @@
-export const version = '8.21.0';
+export const version = '8.23.0';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "8.21.0",
+  "version": "8.23.0",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -32,7 +32,7 @@ import React, {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import memoriApiClient from '@memori.ai/memori-api-client';
-import { AudioContext, IAudioContext } from 'standardized-audio-context';
+import { IAudioContext } from 'standardized-audio-context';
 import cx from 'classnames';
 import { DateTime } from 'luxon';
 import toast from 'react-hot-toast';
@@ -72,7 +72,6 @@ import {
   hasTouchscreen,
   stripDuplicates,
   installMathJax,
-  stripReasoningTags,
 } from '../../helpers/utils';
 import { getTTSVoice } from '../../helpers/tts/ttsVoiceUtility';
 import {
@@ -82,7 +81,6 @@ import {
 } from '../../helpers/constants';
 import { getErrori18nKey } from '../../helpers/error';
 import { getCredits } from '../../helpers/credits';
-import { useViseme } from '../../context/visemeContext';
 import { sanitizeText } from '../../helpers/sanitizer';
 import { TTSConfig, useTTS } from '../../helpers/tts/useTTS';
 import ChatHistoryDrawer from '../ChatHistoryDrawer/ChatHistory';
@@ -369,6 +367,8 @@ export interface LayoutProps {
   loading?: boolean;
   autoStart?: boolean;
   onSidebarToggle?: (isOpen: boolean) => void;
+  /** When true (e.g. from integrationConfig for website_assistant layout), hide the 3D avatar. */
+  avatar3dHidden?: boolean;
 }
 
 export interface Props {
@@ -378,6 +378,10 @@ export interface Props {
   tenantID: string;
   memoriConfigs?: MemoriConfig[];
   memoriLang?: string;
+  /** UI language: labels, buttons, page translation (i18n) */
+  uiLang?: string;
+  /** Spoken/chat language: select box in StartPanel and conversation language */
+  spokenLang?: string;
   multilingual?: boolean;
   integration?: Integration;
   layout?: LayoutName;
@@ -441,6 +445,8 @@ const MemoriWidget = ({
   ownerUserName,
   tenantID,
   memoriLang,
+  uiLang,
+  spokenLang,
   multilingual,
   integration,
   layout,
@@ -505,7 +511,6 @@ const MemoriWidget = ({
     postTextEnteredEvent,
     postPlaceChangedEvent,
     postDateChangedEvent,
-    postTimeoutEvent,
     postTagChangedEvent,
     getSession,
     getExpertReferences,
@@ -565,7 +570,8 @@ const MemoriWidget = ({
       : !!integrationConfig?.multilanguage;
   const forcedTimeout = integrationConfig?.forcedTimeout as number | undefined;
   const [userLang, setUserLang] = useState(
-    memoriLang ??
+    spokenLang ??
+      memoriLang ??
       integrationConfig?.lang ??
       language ??
       integrationConfig?.uiLang ??
@@ -573,6 +579,13 @@ const MemoriWidget = ({
       'IT'
   );
 
+  // Sync userLang when parent passes spokenLang (select box in StartPanel)
+  useEffect(() => {
+    if (spokenLang != null) {
+      setUserLang(spokenLang);
+    }
+  }, [spokenLang]);
+
   const applyMathFormatting =
     useMathFormatting !== undefined
       ? useMathFormatting
@@ -582,18 +595,20 @@ const MemoriWidget = ({
   }, [applyMathFormatting]);
 
   /**
-   * Sets the language in the i18n instance
+   * Sets the UI language in the i18n instance (page translation). uiLang takes precedence.
    */
   useEffect(() => {
-    if (
-      isMultilanguageEnabled &&
-      userLang &&
-      uiLanguages.includes(userLang.toLowerCase())
-    ) {
+    const langToApply =
+      uiLang && uiLanguages.includes(uiLang.toLowerCase())
+        ? uiLang.toLowerCase()
+        : userLang && uiLanguages.includes(userLang.toLowerCase())
+        ? userLang.toLowerCase()
+        : null;
+    if (langToApply && typeof i18n?.changeLanguage === 'function') {
       // @ts-ignore
-      i18n.changeLanguage(userLang.toLowerCase());
+      i18n.changeLanguage(langToApply);
     }
-  }, [userLang]);
+  }, [uiLang, userLang]);
 
   const [loading, setLoading] = useState(false);
   const [memoriTyping, setMemoriTyping] = useState<boolean>(false);
@@ -604,8 +619,8 @@ const MemoriWidget = ({
     typeof layout === 'string'
       ? layout
       : typeof integrationConfig?.layout === 'string'
-        ? integrationConfig.layout
-        : integrationConfig?.layout?.name;
+      ? integrationConfig.layout
+      : integrationConfig?.layout?.name;
   const selectedLayout = layoutName || 'DEFAULT';
   const piiDetection: PiiDetectionConfig | undefined =
     typeof integrationConfig?.layout === 'object' &&
@@ -614,6 +629,21 @@ const MemoriWidget = ({
       ? integrationConfig.layout.piiDetection
       : undefined;
 
+  // website_assistant: hide 3D avatar from layout when integrationConfig has avatar_3d_hidden
+  const layoutObj =
+    typeof layout === 'object' && layout !== null ? layout : null;
+  const integrationLayoutObj =
+    typeof integrationConfig?.layout === 'object' &&
+    integrationConfig?.layout !== null
+      ? (integrationConfig.layout as { avatar_3d_hidden?: boolean })
+      : null;
+  const avatar3dHidden =
+    selectedLayout === 'WEBSITE_ASSISTANT' &&
+    ((layoutObj as { avatar_3d_hidden?: boolean } | null)?.avatar_3d_hidden ===
+      true ||
+      integrationLayoutObj?.avatar_3d_hidden === true ||
+      integrationConfig?.avatar_3d_hidden === true);
+
   const defaultEnableAudio =
     enableAudio ?? integrationConfig?.enableAudio ?? true;
 
@@ -816,6 +846,10 @@ const MemoriWidget = ({
       (window.getMemoriState() as MemoriSession)?.sessionID;
     if (!sessionID || !text?.length) return;
 
+    if (memori.needsDateTime) {
+      await sendDateChangedEvent({ sessionID: sessionID });
+    }
+
     // Build full message text (same as what will be sent) so we can run PII check on it.
     // Order: user text -> optional translation -> appended document attachment content.
     let msg = text;
@@ -837,9 +871,7 @@ const MemoriWidget = ({
       m => (m as any).type === 'document' && m.properties?.isAttachedFile
     );
     if (mediaDocuments && mediaDocuments.length > 0) {
-      const documentContents = mediaDocuments
-        .map(doc => doc.content)
-        .join(' ');
+      const documentContents = mediaDocuments.map(doc => doc.content).join(' ');
       msg = msg + ' ' + documentContents;
     }
 
@@ -990,14 +1022,17 @@ const MemoriWidget = ({
           }
         });
       } else if (response.resultCode === 500 && response.resultMessage) {
-        setHistory(h => [...h, {
-          text: 'Error: ' + response.resultMessage,
-          emitter: 'system',
-          fromUser: false,
-          initial: false,
-          contextVars: {},
-          date: new Date().toISOString(),
-        }]);
+        setHistory(h => [
+          ...h,
+          {
+            text: 'Error: ' + response.resultMessage,
+            emitter: 'system',
+            fromUser: false,
+            initial: false,
+            contextVars: {},
+            date: new Date().toISOString(),
+          },
+        ]);
       } else {
         console.warn('[SEND_MESSAGE]', response);
         return Promise.reject(response);
@@ -1357,7 +1392,11 @@ const MemoriWidget = ({
             params.additionalInfo?.loginToken ??
             additionalInfo?.loginToken ??
             authToken,
-          language: (userLang ?? memori.culture?.split('-')?.[0] ?? 'IT').toLowerCase(),
+          language: (
+            userLang ??
+            memori.culture?.split('-')?.[0] ??
+            'IT'
+          ).toLowerCase(),
           referral: referral,
           timeZoneOffset: new Date().getTimezoneOffset().toString(),
         },
@@ -1381,6 +1420,13 @@ const MemoriWidget = ({
         if (position && memori.needsPosition)
           applyPosition(position, session.sessionID);
 
+        if (memori.needsDateTime) {
+          await sendDateChangedEvent({
+            sessionID: session.sessionID,
+            state: session?.currentState,
+          });
+        }
+
         setLoading(false);
         return {
           dialogState: session.currentState,
@@ -1526,7 +1572,11 @@ const MemoriWidget = ({
             additionalInfoProp?.loginToken ??
             additionalInfo?.loginToken ??
             authToken,
-          language: (userLang ?? memori.culture?.split('-')?.[0] ?? 'IT').toLowerCase(),
+          language: (
+            userLang ??
+            memori.culture?.split('-')?.[0] ??
+            'IT'
+          ).toLowerCase(),
           referral: referral,
           timeZoneOffset: new Date().getTimezoneOffset().toString(),
         },
@@ -1722,7 +1772,11 @@ const MemoriWidget = ({
                 loginToken ??
                 additionalInfo?.loginToken ??
                 authToken,
-              language: (userLang ?? memori.culture?.split('-')?.[0] ?? 'IT').toLowerCase(),
+              language: (
+                userLang ??
+                memori.culture?.split('-')?.[0] ??
+                'IT'
+              ).toLowerCase(),
               referral: referral,
               timeZoneOffset: new Date().getTimezoneOffset().toString(),
             },
@@ -1786,70 +1840,6 @@ const MemoriWidget = ({
     },
     [currentDialogState, memori.needsDateTime, sessionId]
   );
-  useEffect(() => {
-    if (sessionId && memori.needsDateTime) {
-      sendDateChangedEvent({ sessionID: sessionId, state: currentDialogState });
-
-      let datePolling: NodeJS.Timeout | null = null;
-      let isTabVisible = !document.hidden;
-
-      const startDatePolling = () => {
-        // stop the polling if it is already running
-        if (datePolling) {
-          clearInterval(datePolling);
-        }
-        // start the polling
-        datePolling = setInterval(() => {
-          if (!document.hidden) {
-            sendDateChangedEvent({
-              sessionID: sessionId,
-            });
-          }
-        }, 60 * 1000); // 1 minute
-      };
-
-      const stopDatePolling = () => {
-        if (datePolling) {
-          clearInterval(datePolling);
-          datePolling = null;
-        }
-      };
-
-      const handleVisibilityChange = () => {
-        const isVisible = !document.hidden;
-
-        if (isVisible && !isTabVisible) {
-          // Tab became visible - start polling and send immediate date event
-          sendDateChangedEvent({
-            sessionID: sessionId,
-            state: currentDialogState,
-          });
-          startDatePolling();
-        } else if (!isVisible && isTabVisible) {
-          // Tab became hidden - stop polling
-          stopDatePolling();
-        }
-
-        isTabVisible = isVisible;
-      };
-
-      // Start polling if tab is initially visible
-      if (isTabVisible) {
-        startDatePolling();
-      }
-
-      // Add visibility change listener
-      document.addEventListener('visibilitychange', handleVisibilityChange);
-
-      return () => {
-        stopDatePolling();
-        document.removeEventListener(
-          'visibilitychange',
-          handleVisibilityChange
-        );
-      };
-    }
-  }, [memori.needsDateTime, sessionId]);
 
   /**
    * Timeout conversazione
@@ -2443,7 +2433,11 @@ const MemoriWidget = ({
               loginToken ??
               additionalInfo?.loginToken ??
               authToken,
-            language: (userLang ?? memori.culture?.split('-')?.[0] ?? 'IT').toLowerCase(),
+            language: (
+              userLang ??
+              memori.culture?.split('-')?.[0] ??
+              'IT'
+            ).toLowerCase(),
             timeZoneOffset: new Date().getTimezoneOffset().toString(),
           },
         });
@@ -2723,14 +2717,17 @@ const MemoriWidget = ({
 
             // Handle 500 error from TextEnteredEvent
             if (response.resultCode === 500 && response.resultMessage) {
-              setHistory(h => [...h, {
-                text: 'Error: ' + response.resultMessage,
-                emitter: 'system',
-                fromUser: false,
-                initial: false,
-                contextVars: {},
-                date: new Date().toISOString(),
-              }]);
+              setHistory(h => [
+                ...h,
+                {
+                  text: 'Error: ' + response.resultMessage,
+                  emitter: 'system',
+                  fromUser: false,
+                  initial: false,
+                  contextVars: {},
+                  date: new Date().toISOString(),
+                },
+              ]);
               setMemoriTyping(false);
               return;
             }
@@ -3157,6 +3154,7 @@ const MemoriWidget = ({
         sessionId={sessionId}
         hasUserActivatedSpeak={hasUserActivatedSpeak}
         loading={loading}
+        avatar3dHidden={avatar3dHidden}
       />
 
       <ArtifactAPIBridge

package/src/components/layouts/WebsiteAssistant.tsx

@@ -20,6 +20,7 @@ const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
   hasUserActivatedSpeak,
   loading = false,
   poweredBy,
+  avatar3dHidden = false,
 }) => {
   const { t } = useTranslation();
   const [collapsed, _setCollapsed] = useState(true);
@@ -86,28 +87,30 @@ const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
                   />
               )}
 
-              <div className="memori-website_assistant-layout--avatar">
-                {Avatar && avatarProps && (
-                  <Avatar
-                    {...avatarProps}
-                    integrationConfig={
-                      avatarProps.integrationConfig
-                        ? {
-                            ...avatarProps.integrationConfig,
-                            avatarURL: avatarProps.integrationConfig?.avatarURL
-                              ? `${
-                                  avatarProps.integrationConfig?.avatarURL.split(
-                                    '#'
-                                  )[0]
-                                }#${expandedKey}`
-                              : undefined,
-                          }
-                        : {}
-                    }
-                    key={expandedKey}
-                  />
-                )}
-              </div>
+              {!avatar3dHidden && (
+                <div className="memori-website_assistant-layout--avatar">
+                  {Avatar && avatarProps && (
+                    <Avatar
+                      {...avatarProps}
+                      integrationConfig={
+                        avatarProps.integrationConfig
+                          ? {
+                              ...avatarProps.integrationConfig,
+                              avatarURL: avatarProps.integrationConfig?.avatarURL
+                                ? `${
+                                    avatarProps.integrationConfig?.avatarURL.split(
+                                      '#'
+                                    )[0]
+                                  }#${expandedKey}`
+                                : undefined,
+                            }
+                          : {}
+                      }
+                      key={expandedKey}
+                    />
+                  )}
+                </div>
+              )}
 
               <div id="extension" />
 

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

@@ -50,6 +50,7 @@ DefaultLayout.args = {
   showUpload: true,
   showReasoning: false,
   showLogin: true,
+  multilingual: true,
 };
 
 
@@ -207,6 +208,26 @@ WebsiteAssistant.args = {
   },
 };
 
+export const WebsiteAssistantWithout3DAvatar = Template.bind({});
+WebsiteAssistantWithout3DAvatar.args = {
+  ...WebsiteAssistant.args,
+  integration: {
+    ...integration,
+    customData: JSON.stringify({
+      textColor: '#2a2a2a',
+      buttonBgColor: '#653165',
+      buttonTextColor: '#ffffff',
+      blurBackground: true,
+      innerBgColor: 'light',
+      innerBgAlpha: 0.8,
+      multilanguage: true,
+      avatar: 'readyplayerme',
+      avatarURL: 'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
+      avatar_3d_hidden: true,
+    }),
+  },
+};
+
 export const HiddenChat = Template.bind({});
 HiddenChat.args = {
   ...DefaultLayout.args,

package/src/index.tsx

@@ -346,6 +346,8 @@ const Memori: React.FC<Props> = ({
           | undefined,
         showLogin: memori?.enableDeepThought,
         memoriLang: memori?.culture?.split('-')?.[0],
+        uiLang,
+        spokenLang,
         autoStart:
           layout === 'HIDDEN_CHAT'
             ? true
@@ -383,7 +385,9 @@ const Memori: React.FC<Props> = ({
         enableAudio,
         defaultSpeakerActive,
         useMathFormatting,
-        memoriLang: uiLang ?? spokenLang ?? memori?.culture?.split('-')?.[0],
+        memoriLang: memori?.culture?.split('-')?.[0],
+        uiLang,
+        spokenLang,
       };
 
   const [pulseSent, setPulseSent] = useState(false);

package/src/version.ts

@@ -1,2 +1,2 @@
 // This file is auto-generated. Do not edit manually.
-export const version = '8.21.0';
+export const version = '8.23.0';