@memori.ai/memori-react 6.8.1 → 6.8.4

package/src/index.test.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { memori, tenant, integration } from './mocks/data';
+import Memori from './index';
+
+// Mock matchMedia for tests
+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(),
+  })),
+});
+
+// Mock window.location
+const mockLocation = {
+  hostname: 'localhost',
+};
+
+Object.defineProperty(window, 'location', {
+  value: mockLocation,
+  writable: true,
+});
+
+it('renders client', () => {
+  const { container } = render(
+    <Memori
+      memoriID={memori.memoriID}
+      ownerUserID={memori.ownerUserID}
+      tenantID={tenant.tenantID}
+      integration={{
+        ...integration,
+        customData: JSON.stringify({}),
+      }}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders client with all the props', () => {
+  const { container } = render(
+    <Memori
+      memoriID={memori.memoriID}
+      ownerUserID={memori.ownerUserID}
+      tenantID={tenant.tenantID}
+      integration={{
+        ...integration,
+        customData: JSON.stringify({}),
+      }}
+      secretToken="1234567890"
+      height="100%"
+      tag="🌻"
+      pin="123456"
+      showShare={true}
+      showChatHistory={true}
+      showCopyButton={true}
+      showTranslationOriginal={true}
+      showSettings={true}
+      showTypingText={true}
+      showClear={true}
+      showLogin={true}
+      showUpload={true}
+      showReasoning={true}
+      showContextPerLine={true}
+      context={{
+        name: 'John Doe',
+        email: 'john.doe@example.com',
+        phone: '+39 333 333 3333',
+      }}
+      initialQuestion="What is the capital of France?"
+      autoStart={true}
+      enableAudio={true}
+      defaultSpeakerActive={true}
+      useMathFormatting={true}
+      spokenLang="EL"
+      multilingual={true}
+      authToken="1234567890"
+      onStateChange={() => {}}
+      additionalInfo={{}}
+      customMediaRenderer={() => <div>Custom Media Renderer</div>}
+      additionalSettings={<div>Additional Settings</div>}
+      userAvatar="https://memori.ai/avatar.png"
+      applyVarsToRoot={true}
+      disableTextEnteredEvents={true}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders client with whiteListedDomains on allowed domains', () => {
+  mockLocation.hostname = 'memori.ai';
+  const { container } = render(
+    <Memori
+      memoriID={memori.memoriID}
+      ownerUserID={memori.ownerUserID}
+      tenantID={tenant.tenantID}
+      integration={{
+        ...integration,
+        customData: JSON.stringify({
+          whiteListedDomains: ['localhost', 'memori.ai'],
+        }),
+      }}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders client with whiteListedDomains on not allowed domains', () => {
+  mockLocation.hostname = 'aisuru.com';
+  const { container } = render(
+    <Memori
+      memoriID={memori.memoriID}
+      ownerUserID={memori.ownerUserID}
+      tenantID={tenant.tenantID}
+      integration={{
+        ...integration,
+        customData: JSON.stringify({
+          whiteListedDomains: ['localhost', 'memori.ai'],
+        }),
+      }}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/index.tsx

@@ -1,25 +1,34 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
+
 import {
   DialogState,
   Memori as IMemori,
   Tenant,
+  Integration,
 } from '@memori.ai/memori-api-client/dist/types';
 import memoriApiClient from '@memori.ai/memori-api-client';
+
 import MemoriWidget, {
   Props as WidgetProps,
 } from './components/MemoriWidget/MemoriWidget';
+import { VisemeProvider } from './context/visemeContext';
+
 import { Toaster } from 'react-hot-toast';
-import { getTenant } from './helpers/tenant';
+import toast from 'react-hot-toast';
+import { safeParseJSON } from './helpers/utils';
 
 import i18n from './i18n';
-import { I18nextProvider, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
+import I18nWrapper from './I18nWrapper';
+import { ArtifactProvider } from './components/MemoriArtifactSystem/context/ArtifactContext';
 
 export interface Props {
   memoriName?: string | null;
   memoriID?: string | null;
   ownerUserName?: string | null;
   ownerUserID?: string | null;
+  integration?: Integration;
   integrationID?: string;
   tenantID: string;
   secretToken?: string;
@@ -27,7 +36,9 @@ export interface Props {
   layout?: WidgetProps['layout'];
   customLayout?: WidgetProps['customLayout'];
   showShare?: boolean;
-  showInstruct?: boolean;
+  showChatHistory?: boolean;
+  showCopyButton?: boolean;
+  showTranslationOriginal?: boolean;
   showInputs?: boolean;
   showDates?: boolean;
   showContextPerLine?: boolean;
@@ -36,24 +47,31 @@ export interface Props {
   showOnlyLastMessages?: boolean;
   showTypingText?: boolean;
   showLogin?: boolean;
+  showUpload?: boolean;
+  showReasoning?: boolean;
   height?: number | string;
   baseURL?: string;
   apiURL?: string;
+  engineURL?: string;
   tag?: string;
   pin?: string;
   context?: { [key: string]: string };
   initialQuestion?: string;
-  uiLang?: 'en' | 'it' | 'IT' | 'EN';
+  uiLang?: 'en' | 'it' | 'fr' | 'es' | 'de' | 'IT' | 'EN' | 'FR' | 'ES' | 'DE';
   spokenLang?: string;
   multilingual?: boolean;
   authToken?: string;
+  enableAudio?: boolean;
   defaultSpeakerActive?: boolean;
-  AZURE_COGNITIVE_SERVICES_TTS_KEY?: string;
+  disableTextEnteredEvents?: boolean;
   onStateChange?: (state?: DialogState) => void;
   additionalInfo?: WidgetProps['additionalInfo'];
   customMediaRenderer?: WidgetProps['customMediaRenderer'];
   additionalSettings?: WidgetProps['additionalSettings'];
   userAvatar?: WidgetProps['userAvatar'];
+  useMathFormatting?: boolean;
+  autoStart?: boolean;
+  applyVarsToRoot?: boolean;
 }
 
 const getPreferredLanguages = () => {
@@ -73,51 +91,68 @@ const getPreferredLanguages = () => {
   };
 };
 
+const getParsedContext = (context?: string | null) => {
+  if (!context) return {};
+  const parsedContext = context?.split(',')?.reduce((acc, cur) => {
+    const [key, value] = cur.split(':').map(t => t.trim());
+    return { ...acc, [key]: value };
+  }, {});
+  return parsedContext;
+};
+
 const Memori: React.FC<Props> = ({
   ownerUserName,
   ownerUserID,
   memoriName,
   memoriID,
+  integration,
   integrationID,
   tenantID,
   secretToken,
   sessionID,
-  layout = 'DEFAULT',
+  layout,
   customLayout,
-  showShare = true,
-  showSettings = true,
-  showInstruct = false,
+  showShare,
+  showCopyButton = true,
+  showTranslationOriginal = false,
+  showSettings,
   showTypingText = false,
   showClear = false,
-  showOnlyLastMessages = false,
+  showOnlyLastMessages,
   showInputs = true,
   showDates = false,
   showContextPerLine = false,
+  showUpload,
   showLogin,
+  showReasoning,
   height = '100%',
   baseURL,
   apiURL = 'https://backend.memori.ai',
+  engineURL = 'https://engine.memori.ai',
   tag,
   pin,
   context,
   initialQuestion,
+  showChatHistory = true,
   uiLang,
   spokenLang,
   multilingual,
   authToken,
-  AZURE_COGNITIVE_SERVICES_TTS_KEY,
+  enableAudio,
   defaultSpeakerActive = true,
+  disableTextEnteredEvents = false,
   onStateChange,
   additionalInfo,
   customMediaRenderer,
   additionalSettings,
   userAvatar,
+  useMathFormatting = false,
+  autoStart,
+  applyVarsToRoot = false,
 }) => {
   const [memori, setMemori] = useState<IMemori>();
   const [tenant, setTenant] = useState<Tenant>();
-  const [speechKey, setSpeechKey] = useState<string | undefined>(
-    AZURE_COGNITIVE_SERVICES_TTS_KEY
-  );
+  const [provider, setProvider] = useState<string | undefined>();
   const { t } = useTranslation();
 
   if (!((memoriID && ownerUserID) || (memoriName && ownerUserName))) {
@@ -126,24 +161,35 @@ const Memori: React.FC<Props> = ({
     );
   }
 
-  const client = memoriApiClient(apiURL);
+  const client = memoriApiClient(apiURL, engineURL);
 
   const fetchSpeechKey = useCallback(async () => {
     const url =
       baseURL ||
       (tenantID.startsWith('https://') ? tenantID : `https://${tenantID}`);
-    const result = await fetch(`${url}/api/speechkey`);
-    const data = await result.json();
+    try {
+      const result = await fetch(`${url}/api/speechkey?tenant=${tenantID}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
 
-    if (data.AZURE_COGNITIVE_SERVICES_TTS_KEY) {
-      setSpeechKey(data.AZURE_COGNITIVE_SERVICES_TTS_KEY);
+      const data = await result.json();
+
+      if (data.provider) {
+        setProvider(data.provider);
+      } else {
+        console.warn('Provider not found in speech key response');
+      }
+    } catch (error) {
+      console.error('Error fetching speech key:', error);
     }
-  }, []);
+  }, [baseURL, tenantID]);
+
   useEffect(() => {
-    if (!AZURE_COGNITIVE_SERVICES_TTS_KEY) {
-      fetchSpeechKey();
-    }
-  }, [AZURE_COGNITIVE_SERVICES_TTS_KEY]);
+    fetchSpeechKey();
+  }, []);
 
   /**
    * Fetches the Memori data from the backend
@@ -169,6 +215,10 @@ const Memori: React.FC<Props> = ({
       );
 
       if (resp.resultCode === 0 && !!memori) {
+        if (!memori.ownerUserID && ownerUserID) {
+          memori.ownerUserID = ownerUserID;
+        }
+
         setMemori(memori);
       } else {
         console.error('[MEMORI]', resp, memori);
@@ -183,8 +233,9 @@ const Memori: React.FC<Props> = ({
    * Fetches the Tenant data from the backend
    */
   const fetchTenant = useCallback(async () => {
-    const tenant = await getTenant(tenantID, baseURL);
-    if (tenant) setTenant(tenant);
+    const { tenant, ...resp } = await client.backend.tenant.getTenant(tenantID);
+    if (tenant && resp.resultCode === 0) setTenant(tenant);
+    else console.debug('[TENANT]', resp, tenant);
   }, [tenantID, apiURL]);
   useEffect(() => {
     fetchTenant();
@@ -207,135 +258,154 @@ const Memori: React.FC<Props> = ({
     }
   }, [uiLang]);
 
-  useEffect(() => {
-    // @ts-ignore
-    window.MathJax = {
-      startup: {
-        elements: ['.memori-chat--bubble-content'],
-      },
-      options: {
-        processHtmlClass: 'memori-chat--bubble-content',
-      },
-      tex: {
-        inlineMath: [
-          ['$', '$'],
-          ['\\$', '\\$'],
-          ['(', '\\)'],
-          ['\\(', ')'],
-          ['(', ')'],
-          ['[', '\\]'],
-          ['[', ']'],
-          ['\\(', '\\)'],
-          ['\\[', '\\]'],
-          ['\\\\[', '\\\\]'],
-          ['\\\\\\[', '\\\\\\]'],
-          ['((', '))'],
-        ],
-        displayMath: [
-          ['$$', '$$'],
-          ['\\[[', '\\]]'],
-          ['\\\\[[', '\\\\]]'],
-          ['\\\\\\[[', '\\\\\\]]'],
-        ],
-        processEscapes: false,
-      },
-      asciimath: {
-        fixphi: true,
-        displaystyle: true,
-        decimalsign: '.',
-      },
-      skipStartupTypeset: true,
-      chtml: {
-        displayAlign: 'left',
-      },
-      svg: {
-        fontCache: 'global',
-      },
-    };
-
-    const script = document.createElement('script');
-    script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js';
-    script.async = true;
-    script.id = 'mathjax-script';
-    document.head.appendChild(script);
-  }, []);
+  const layoutIntegration =
+    integration ??
+    memori?.integrations?.find(i =>
+      integrationID
+        ? i.integrationID === integrationID
+        : !!i.publish && i.type === 'LANDING_EXPERIENCE'
+    );
+  const layoutIntegrationConfig = safeParseJSON(
+    layoutIntegration?.customData ?? '{}'
+  );
 
-  const renderer = memori ? (
-    <MemoriWidget
-      layout={layout}
-      customLayout={customLayout}
-      height={height}
-      baseUrl={
-        baseURL ||
-        (tenantID.startsWith('https://') ? tenantID : `https://${tenantID}`)
+  const whiteListedDomains = layoutIntegrationConfig.whiteListedDomains;
+  if (whiteListedDomains) {
+    // check if we are client side
+    if (typeof window !== 'undefined') {
+      // In whitelist bypass logic
+      const isPreview =
+        window.parent !== window &&
+        document.referrer &&
+        (document.referrer.includes(window.location.hostname)); 
+      // Skip whitelist check for preview
+      if (!isPreview) {
+        // check if the current domain is in the whiteListedDomains with Regex
+        if (
+          !whiteListedDomains.some((domain: string) =>
+            new RegExp(domain).test(window.location.hostname)
+          )
+        ) {
+          return null;
+        }
       }
-      apiUrl={apiURL}
-      memori={{
-        ...memori,
-        secretToken,
-      }}
-      ownerUserName={ownerUserName ?? memori.ownerUserName}
-      ownerUserID={ownerUserID ?? memori.ownerUserID}
-      tenantID={tenantID}
-      memoriLang={spokenLang ?? memori.culture?.split('-')?.[0]}
-      multilingual={multilingual}
-      tenant={tenant}
-      secret={secretToken}
-      sessionID={sessionID}
-      showShare={showShare}
-      showSettings={showSettings}
-      showInstruct={showInstruct}
-      showTypingText={showTypingText}
-      showClear={showClear}
-      showOnlyLastMessages={showOnlyLastMessages}
-      showInputs={showInputs}
-      showDates={showDates}
-      showContextPerLine={showContextPerLine}
-      showLogin={showLogin ?? memori?.enableDeepThought}
-      integration={memori?.integrations?.find(i =>
-        integrationID
-          ? i.integrationID === integrationID
-          : !!i.publish && i.type === 'LANDING_EXPERIENCE'
-      )}
-      initialContextVars={context}
-      initialQuestion={initialQuestion}
-      authToken={authToken}
-      AZURE_COGNITIVE_SERVICES_TTS_KEY={
-        speechKey || AZURE_COGNITIVE_SERVICES_TTS_KEY
+    }
+  }
+
+  const ignoreClientAttributes =
+    layoutIntegrationConfig.ignoreClientAttributes ?? false;
+
+  const clientAttributes = ignoreClientAttributes
+    ? {
+        initialContextVars: getParsedContext(
+          layoutIntegrationConfig.contextVars
+        ),
+        initialQuestion: layoutIntegrationConfig.initialQuestion as
+          | string
+          | undefined,
+        showLogin: memori?.enableDeepThought,
+        memoriLang: memori?.culture?.split('-')?.[0],
+        autoStart: layout === 'HIDDEN_CHAT',
       }
-      defaultSpeakerActive={defaultSpeakerActive}
-      onStateChange={onStateChange}
-      additionalInfo={additionalInfo}
-      customMediaRenderer={customMediaRenderer}
-      additionalSettings={additionalSettings}
-      userAvatar={userAvatar}
-      {...(tag && pin ? { personification: { tag, pin } } : {})}
-    />
-  ) : (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <p
-        style={{
-          textAlign: 'center',
-          margin: '2rem auto',
-          textTransform: 'capitalize',
-        }}
-      >
-        {t('loading') || 'Loading'}...
-      </p>
-    </div>
-  );
+    : {
+        ...(tag && pin ? { personification: { tag, pin } } : {}),
+        multilingual,
+        showCopyButton,
+        showTranslationOriginal,
+        showSettings,
+        showChatHistory,
+        showShare,
+        showTypingText,
+        showClear,
+        showLogin: showLogin ?? memori?.enableDeepThought,
+        showUpload,
+        showReasoning,
+        showContextPerLine,
+        initialContextVars:
+          context ?? getParsedContext(layoutIntegrationConfig.contextVars),
+        initialQuestion:
+          initialQuestion ??
+          (layoutIntegrationConfig.initialQuestion as string | undefined),
+        autoStart:
+          autoStart !== undefined
+            ? autoStart
+            : layout === 'HIDDEN_CHAT'
+            ? true
+            : autoStart,
+        enableAudio,
+        defaultSpeakerActive,
+        useMathFormatting,
+        memoriLang: spokenLang ?? memori?.culture?.split('-')?.[0],
+      };
 
   return (
-    <I18nextProvider i18n={i18n}>
-      <Toaster position="top-center" reverseOrder={true} />
-      {renderer}
-    </I18nextProvider>
+    <I18nWrapper>
+      <VisemeProvider>
+        <ArtifactProvider>
+        <Toaster position="top-center" reverseOrder={true} />
+        {memori ? (
+          <MemoriWidget
+            // General props
+            layout={layout}
+            customLayout={customLayout}
+            height={height}
+            baseUrl={
+              baseURL ||
+              (tenantID.startsWith('https://') || tenantID.startsWith('http://')
+                ? tenantID
+                : `https://${tenantID}`)
+            }
+            apiURL={apiURL}
+            engineURL={engineURL}
+            memori={{
+              ...memori,
+              secretToken,
+            }}
+            ownerUserName={ownerUserName ?? memori.ownerUserName}
+            ownerUserID={ownerUserID ?? memori.ownerUserID}
+            tenant={tenant}
+            tenantID={tenantID}
+            sessionID={sessionID}
+            secret={secretToken}
+            ttsProvider={provider ? (provider as 'azure' | 'openai') : 'azure'}
+            integration={layoutIntegration}
+            authToken={authToken}
+            onStateChange={onStateChange}
+            additionalInfo={additionalInfo}
+            customMediaRenderer={customMediaRenderer}
+            additionalSettings={additionalSettings}
+            userAvatar={userAvatar}
+            applyVarsToRoot={applyVarsToRoot}
+            disableTextEnteredEvents={disableTextEnteredEvents}
+            // From layout, from client if allowed
+            {...clientAttributes}
+            // Client only
+            showOnlyLastMessages={showOnlyLastMessages}
+            showInputs={showInputs}
+            showDates={showDates}
+          />
+        ) : (
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <p
+              style={{
+                textAlign: 'center',
+                margin: '2rem auto',
+                textTransform: 'capitalize',
+              }}
+            >
+              {t('loading') || 'Loading'}...
+            </p>
+          </div>
+        )}
+        </ArtifactProvider>
+      </VisemeProvider>
+    </I18nWrapper>
   );
 };
 
@@ -345,6 +415,7 @@ Memori.propTypes = {
   ownerUserName: PropTypes.string,
   ownerUserID: PropTypes.string,
   integrationID: PropTypes.string,
+  integration: PropTypes.any,
   tenantID: PropTypes.string.isRequired,
   secretToken: PropTypes.string,
   sessionID: PropTypes.string,
@@ -354,10 +425,13 @@ Memori.propTypes = {
     'TOTEM',
     'WEBSITE_ASSISTANT',
     'CHAT',
+    'HIDDEN_CHAT',
+    'ZOOMED_FULL_BODY',
   ]),
   customLayout: PropTypes.any,
   showShare: PropTypes.bool,
-  showInstruct: PropTypes.bool,
+  showCopyButton: PropTypes.bool,
+  showTranslationOriginal: PropTypes.bool,
   showInputs: PropTypes.bool,
   showDates: PropTypes.bool,
   showContextPerLine: PropTypes.bool,
@@ -366,24 +440,42 @@ Memori.propTypes = {
   showOnlyLastMessages: PropTypes.bool,
   showTypingText: PropTypes.bool,
   showLogin: PropTypes.bool,
+  showUpload: PropTypes.bool,
+  showReasoning: PropTypes.bool,
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   baseURL: PropTypes.string,
   apiURL: PropTypes.string,
+  engineURL: PropTypes.string,
   tag: PropTypes.string,
   pin: PropTypes.string,
   context: PropTypes.objectOf(PropTypes.any),
   initialQuestion: PropTypes.string,
-  uiLang: PropTypes.oneOf(['en', 'it', 'EN', 'IT']),
+  uiLang: PropTypes.oneOf([
+    'en',
+    'it',
+    'fr',
+    'es',
+    'de',
+    'EN',
+    'IT',
+    'FR',
+    'ES',
+    'DE',
+  ]),
   spokenLang: PropTypes.string,
   multilingual: PropTypes.bool,
   authToken: PropTypes.string,
-  AZURE_COGNITIVE_SERVICES_TTS_KEY: PropTypes.string,
+  enableAudio: PropTypes.bool,
   defaultSpeakerActive: PropTypes.bool,
+  disableTextEnteredEvents: PropTypes.bool,
   onStateChange: PropTypes.func,
   additionalInfo: PropTypes.objectOf(PropTypes.any),
   customMediaRenderer: PropTypes.func,
   additionalSettings: PropTypes.any,
   userAvatar: PropTypes.oneOfType([PropTypes.string, PropTypes.any]),
+  useMathFormatting: PropTypes.bool,
+  autoStart: PropTypes.bool,
+  applyVarsToRoot: PropTypes.bool,
 };
 
 export default Memori;