@memori.ai/memori-react 2.11.0 → 2.13.0

package/src/components/Chat/__snapshots__/Chat.test.tsx.snap

@@ -3506,17 +3506,21 @@ exports[`renders Chat with memori typing unchanged 1`] = `
           class="memori-chat--bubble"
         >
           <div
-            id="wave"
+            class="memori-chat--bubble-typing"
           >
-            <span
-              class="dot"
-            />
-            <span
-              class="dot"
-            />
-            <span
-              class="dot"
-            />
+            <div
+              id="wave"
+            >
+              <span
+                class="dot"
+              />
+              <span
+                class="dot"
+              />
+              <span
+                class="dot"
+              />
+            </div>
           </div>
         </div>
         <div

package/src/components/ChatBubble/ChatBubble.css

@@ -35,7 +35,7 @@
 
 .memori-chat--bubble #wave {
     position: relative;
-    width: 100px;
+    width: 50px;
     margin-right: auto;
     margin-left: auto;
     text-align: center;
@@ -43,8 +43,8 @@
 
 .memori-chat--bubble #wave .dot {
     display: inline-block;
-    width: 8px;
-    height: 8px;
+    width: 6px;
+    height: 6px;
     border-radius: 50%;
     margin-right: 3px;
     animation: wave 1.5s linear infinite;
@@ -59,12 +59,16 @@
     animation-delay: -1.1s;
 }
 
+.memori-chat--bubble-typing {
+    display: flex;
+}
+
 .memori-chat--bubble p {
     margin-top: 0;
     margin-bottom: 0;
 }
 
-.memori-chat--bubble p + p {
+.memori-chat--bubble p+p {
     margin-top: 0.5em;
 }
 
@@ -215,6 +219,7 @@
 }
 
 @keyframes wave {
+
     0%,
     60%,
     100% {
@@ -224,4 +229,4 @@
     30% {
         transform: translateY(-10px);
     }
-}
+}

package/src/components/MediaWidget/MediaItemWidget.tsx

@@ -1,5 +1,5 @@
 import { Medium } from '@memori.ai/memori-api-client/dist/types';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState, memo } from 'react';
 import { getResourceUrl } from '../../helpers/media';
 import { getTranslation } from '../../helpers/translations';
 import { prismSyntaxLangs } from '../../helpers/constants';
@@ -285,21 +285,6 @@ const MediaItemWidget: React.FC<Props> = ({
     if (translateTo) translateMediaCaptions();
   }, [translateTo, translateMediaCaptions]);
 
-  useEffect(() => {
-    let executableScripts = items.filter(
-      m => m.mimeType === 'text/javascript' && !!m.properties?.executable
-    );
-    executableScripts.forEach(s => {
-      try {
-        // eslint-disable-next-line no-new-func
-        new Function(s.content ?? '')();
-      } catch (e) {
-        console.error(e);
-      }
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   return (
     <Transition appear show as="div" className="memori-media-items">
       <div className="memori-media-items--grid">
@@ -407,4 +392,4 @@ const MediaItemWidget: React.FC<Props> = ({
   );
 };
 
-export default MediaItemWidget;
+export default memo(MediaItemWidget);

package/src/components/MediaWidget/MediaWidget.tsx

@@ -2,7 +2,7 @@ import {
   Medium,
   TranslatedHint,
 } from '@memori.ai/memori-api-client/dist/types';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, memo } from 'react';
 import Button from '../ui/Button';
 import LinkItemWidget from './LinkItemWidget';
 import MediaItemWidget, { Props as MediaItemProps } from './MediaItemWidget';
@@ -103,4 +103,4 @@ const MediaWidget: React.FC<Props> = ({
   );
 };
 
-export default MediaWidget;
+export default memo(MediaWidget);

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -98,25 +98,31 @@ type MemoriTextEnteredEvent = CustomEvent<{
   text: string;
   waitForPrevious?: boolean;
   hidden?: boolean;
+  typingText?: string;
 }>;
 
 const typeMessage = (
   message: string,
   waitForPrevious = true,
-  hidden = false
+  hidden = false,
+  typingText?: string
 ) => {
   const e: MemoriTextEnteredEvent = new CustomEvent('MemoriTextEntered', {
     detail: {
       text: message,
       waitForPrevious,
       hidden,
+      typingText,
     },
   });
 
   document.dispatchEvent(e);
 };
-const typeMessageHidden = (message: string, waitForPrevious = true) =>
-  typeMessage(message, waitForPrevious, true);
+const typeMessageHidden = (
+  message: string,
+  waitForPrevious = true,
+  typingText?: string
+) => typeMessage(message, waitForPrevious, true, typingText);
 
 interface CustomEventMap {
   MemoriTextEntered: MemoriTextEnteredEvent;
@@ -189,6 +195,7 @@ export interface Props {
   showDates?: boolean;
   showContextPerLine?: boolean;
   showSettings?: boolean;
+  showTypingText?: boolean;
   preview?: boolean;
   embed?: boolean;
   height?: number | string;
@@ -229,6 +236,7 @@ const MemoriWidget = ({
   showDates = false,
   showContextPerLine = false,
   showSettings = true,
+  showTypingText = false,
   height = '100vh',
   secret,
   baseUrl = 'https://app.twincreator.com',
@@ -293,7 +301,7 @@ const MemoriWidget = ({
   );
 
   const [loading, setLoading] = useState(false);
-  const [memoriTyping, setMemoriTyping] = useState(false);
+  const [memoriTyping, setMemoriTyping] = useState<boolean | string>(false);
 
   const selectedLayout = layout || integrationConfig?.layout || 'DEFAULT';
 
@@ -400,7 +408,17 @@ const MemoriWidget = ({
   const [listening, setListening] = useState(false);
   const [history, setHistory] = useState<Message[]>([]);
   const pushMessage = (message: Message) => {
-    setHistory(history => [...history, { ...message }]);
+    setHistory(history => [
+      ...history,
+      {
+        ...message,
+        media:
+          message.media?.filter(
+            m =>
+              !(m.mimeType === 'text/javascript' && !!m.properties?.executable)
+          ) ?? [],
+      },
+    ]);
   };
   const sendMessage = async (
     text: string,
@@ -408,7 +426,8 @@ const MemoriWidget = ({
     newSessionId?: string,
     translate: boolean = true,
     translatedText?: string,
-    hidden: boolean = false
+    hidden: boolean = false,
+    typingText?: string
   ) => {
     const sessionID =
       newSessionId ||
@@ -427,7 +446,7 @@ const MemoriWidget = ({
           : !!newSessionId,
       });
 
-    setMemoriTyping(true);
+    setMemoriTyping(typingText ?? true);
 
     let msg = text;
 
@@ -654,6 +673,38 @@ const MemoriWidget = ({
     if (onStateChange) {
       onStateChange(state);
     }
+
+    const executableSnippets = state?.media?.filter(
+      m => m.mimeType === 'text/javascript' && !!m.properties?.executable
+    );
+    executableSnippets?.forEach(s => {
+      try {
+        setTimeout(() => {
+          console.log('snippet', s);
+          // eslint-disable-next-line no-new-func
+          new Function(s.content ?? '')();
+
+          setTimeout(() => {
+            if (document.body.classList.contains('chat-focused')) {
+              document.querySelector('.ant-tabs-nav')?.scrollIntoView();
+              document
+                .querySelector('.memori-chat--content')
+                ?.scrollTo(
+                  0,
+                  document.querySelector('.memori-chat--content')
+                    ?.scrollHeight ?? 0
+                );
+            } else {
+              document.querySelector('#end-messages-ref')?.scrollIntoView({
+                behavior: 'smooth',
+              });
+            }
+          }, 400);
+        }, 3000);
+      } catch (e) {
+        console.error(e);
+      }
+    });
   };
   const fetchSession = async (
     params: OpenSession
@@ -705,6 +756,7 @@ const MemoriWidget = ({
         ...params,
         additionalInfo: {
           ...(additionalInfo || {}),
+          loginToken: additionalInfo?.loginToken ?? authToken,
           language: getCultureCodeByLanguage(userLang),
           referral: referral,
         },
@@ -792,6 +844,7 @@ const MemoriWidget = ({
         birthDate: birthDate || storageBirthDate || undefined,
         additionalInfo: {
           ...(additionalInfo || {}),
+          loginToken: additionalInfo?.loginToken ?? authToken,
           language: getCultureCodeByLanguage(userLang),
           referral: referral,
         },
@@ -912,6 +965,7 @@ const MemoriWidget = ({
             birthDate: birthDate || storageBirthDate || undefined,
             additionalInfo: {
               ...(additionalInfo || {}),
+              loginToken: additionalInfo?.loginToken ?? authToken,
               language: getCultureCodeByLanguage(userLang),
               referral: referral,
             },
@@ -987,7 +1041,7 @@ const MemoriWidget = ({
       !!speechSynthesizer ||
       isPlayingAudio ||
       !!userMessage.length ||
-      memoriTyping ||
+      !!memoriTyping ||
       listening
     ) {
       resetInteractionTimeout();
@@ -1053,7 +1107,7 @@ const MemoriWidget = ({
     timeoutRef.current = uiTimeout;
   };
   useEffect(() => {
-    if (!!userMessage.length || isPlayingAudio || memoriTyping)
+    if (!!userMessage.length || isPlayingAudio || !!memoriTyping)
       clearInteractionTimeout();
     if (sessionId && !!!userMessage.length) resetInteractionTimeout();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1954,17 +2008,14 @@ const MemoriWidget = ({
   // to use in integrations or snippets
   const memoriTextEnteredHandler = useCallback(
     (e: MemoriTextEnteredEvent) => {
-      const { text, waitForPrevious, hidden } = e.detail;
-
-      const sessionID =
-        sessionId || (window.getMemoriState() as MemoriSession)?.sessionID;
+      const { text, waitForPrevious, hidden, typingText } = e.detail;
 
       if (text) {
         // wait to finish reading previous emission
         if (
           waitForPrevious &&
           !speakerMuted &&
-          (memoriSpeaking || memoriTyping)
+          (memoriSpeaking || !!memoriTyping)
         ) {
           setTimeout(() => {
             memoriTextEnteredHandler(e);
@@ -1972,7 +2023,15 @@ const MemoriWidget = ({
         } else {
           stopListening();
           stopAudio();
-          sendMessage(text, undefined, undefined, undefined, undefined, hidden);
+          sendMessage(
+            text,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            hidden,
+            typingText
+          );
         }
       }
     },
@@ -2328,7 +2387,7 @@ const MemoriWidget = ({
     setAvatar3dVisible,
     hasUserActivatedSpeak,
     isPlayingAudio,
-    loading: memoriTyping,
+    loading: !!memoriTyping,
     baseUrl,
     apiUrl,
   };
@@ -2369,6 +2428,7 @@ const MemoriWidget = ({
     baseUrl,
     apiUrl,
     memoriTyping,
+    showTypingText,
     history: layout === 'TOTEM' ? history.slice(-2) : history,
     authToken: loginToken,
     dialogState: currentDialogState,

package/src/components/Typing/Typing.stories.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import Typing, { Props } from './Typing';
+
+const meta: Meta = {
+  title: 'Widget/Typing',
+  component: Typing,
+  argTypes: {
+    useDefaultSentences: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    lang: {
+      control: {
+        type: 'select',
+        options: ['en', 'it'],
+      },
+    },
+    sentence: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: false },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => <Typing {...args} />;
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});
+Default.args = {};
+
+export const WithLoadingTextIT = Template.bind({});
+WithLoadingTextIT.args = {
+  useDefaultSentences: true,
+  lang: 'it',
+};
+
+export const WithLoadingTextEN = Template.bind({});
+WithLoadingTextEN.args = {
+  useDefaultSentences: true,
+  lang: 'en',
+};
+
+export const WithCustomLoadingText = Template.bind({});
+WithCustomLoadingText.args = {
+  sentence: 'Chiedo agli unicorni cosa ne pensano...',
+};

package/src/components/Typing/Typing.test.tsx

@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react';
+import Typing from './Typing';
+
+it('renders Typing unchanged', () => {
+  const { container } = render(<Typing />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Typing with default loading text unchanged', () => {
+  const { container } = render(<Typing useDefaultSentences lang="en" />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Typing with default italian loading text unchanged', () => {
+  const { container } = render(<Typing useDefaultSentences lang="it" />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Typing with custom loading text unchanged', () => {
+  const { container } = render(
+    <Typing sentence="Chiedo agli unicorni cosa ne pensano..." />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/Typing/Typing.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from 'react';
+
+const separator = '                                        ';
+const sentences = {
+  en: [
+    'Generating an accurate and fancy response...',
+    'Generating a response that will blow your mind...',
+    'Generating a response that will make you smile...',
+    'Thinking of a response...',
+    'Thinking of a response that will make you smile...',
+    'Gathering my thoughts...',
+    'Gathering my thoughts to give you a response...',
+  ],
+  it: [
+    'Sto generando una risposta accurata e fantasiosa...',
+    'Sto generando una risposta che ti farà impazzire...',
+    'Sto generando una risposta che ti farà sorridere...',
+    'Sto pensando ad una risposta...',
+    'Sto pensando ad una risposta che ti farà sorridere...',
+    'Sto raccogliendo i miei pensieri...',
+    'Sto raccogliendo i miei pensieri per darti una risposta...',
+  ],
+};
+
+export interface Props {
+  useDefaultSentences?: boolean;
+  lang?: 'en' | 'it';
+  sentence?: string;
+}
+
+const Typing = ({
+  useDefaultSentences = false,
+  lang = 'en',
+  sentence,
+}: Props) => {
+  const [text, setText] = useState(sentence ? `${sentence}${separator}` : '');
+  const [shownText, setShownText] = useState('');
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const letter = text[shownText.length];
+      if (letter !== undefined && text.length > 0) {
+        setShownText(prev => prev + letter);
+      } else if (!sentence && useDefaultSentences) {
+        setShownText('');
+        setText(
+          sentences[lang][Math.floor(Math.random() * sentences[lang].length)] +
+            separator
+        );
+      }
+    }, 50);
+
+    return () => clearInterval(interval);
+  });
+
+  return (
+    <div className="memori-chat--bubble">
+      <div className="memori-chat--bubble-typing">
+        <div id="wave">
+          <span className="dot"></span>
+          <span className="dot"></span>
+          <span className="dot"></span>
+        </div>
+        {text.length > 0 && <p>{shownText}</p>}
+      </div>
+    </div>
+  );
+};
+
+export default Typing;

package/src/components/Typing/__snapshots__/Typing.test.tsx.snap

@@ -0,0 +1,106 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders Typing unchanged 1`] = `
+<div>
+  <div
+    class="memori-chat--bubble"
+  >
+    <div
+      class="memori-chat--bubble-typing"
+    >
+      <div
+        id="wave"
+      >
+        <span
+          class="dot"
+        />
+        <span
+          class="dot"
+        />
+        <span
+          class="dot"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Typing with custom loading text unchanged 1`] = `
+<div>
+  <div
+    class="memori-chat--bubble"
+  >
+    <div
+      class="memori-chat--bubble-typing"
+    >
+      <div
+        id="wave"
+      >
+        <span
+          class="dot"
+        />
+        <span
+          class="dot"
+        />
+        <span
+          class="dot"
+        />
+      </div>
+      <p />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Typing with default italian loading text unchanged 1`] = `
+<div>
+  <div
+    class="memori-chat--bubble"
+  >
+    <div
+      class="memori-chat--bubble-typing"
+    >
+      <div
+        id="wave"
+      >
+        <span
+          class="dot"
+        />
+        <span
+          class="dot"
+        />
+        <span
+          class="dot"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Typing with default loading text unchanged 1`] = `
+<div>
+  <div
+    class="memori-chat--bubble"
+  >
+    <div
+      class="memori-chat--bubble-typing"
+    >
+      <div
+        id="wave"
+      >
+        <span
+          class="dot"
+        />
+        <span
+          class="dot"
+        />
+        <span
+          class="dot"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -22,7 +22,7 @@ const meta: Meta = {
 
 export default meta;
 
-const CustomLayout: React.FC<LayoutProps> = ({
+export const CustomLayout: React.FC<LayoutProps> = ({
   Header,
   headerProps,
   Avatar,

package/src/index.tsx

@@ -26,6 +26,7 @@ export interface Props {
   showShare?: boolean;
   showSettings?: boolean;
   showInstruct?: boolean;
+  showTypingText?: boolean;
   height?: number | string;
   baseURL?: string;
   apiURL?: string;
@@ -75,6 +76,7 @@ const Memori: React.FC<Props> = ({
   showShare = true,
   showSettings = true,
   showInstruct = false,
+  showTypingText = false,
   height = '100%',
   baseURL,
   apiURL = 'https://backend.memori.ai',
@@ -204,6 +206,7 @@ const Memori: React.FC<Props> = ({
       showShare={showShare}
       showSettings={showSettings}
       showInstruct={showInstruct}
+      showTypingText={showTypingText}
       integration={memori?.integrations?.find(i =>
         integrationID
           ? i.integrationID === integrationID
@@ -248,7 +251,7 @@ Memori.propTypes = {
   showShare: PropTypes.bool,
   showSettings: PropTypes.bool,
   showInstruct: PropTypes.bool,
-  layout: PropTypes.oneOf(['DEFAULT', 'FULLPAGE', 'TOTEM']),
+  layout: PropTypes.oneOf(['DEFAULT', 'FULLPAGE', 'TOTEM', 'CHAT']),
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   baseURL: PropTypes.string,
   apiURL: PropTypes.string,