@memori.ai/memori-react 2.18.8 → 2.19.0

package/src/components/ChatBubble/ChatBubble.stories.tsx

@@ -120,3 +120,60 @@ WithAllAddonsContents.args = {
   showFeedback: true,
   simulateUserPrompt: () => {},
 };
+
+export const FromUserWithAvatar = Template.bind({});
+FromUserWithAvatar.args = {
+  memori,
+  tenant,
+  user: { avatarURL: 'https://picsum.photos/200' },
+  message: {
+    fromUser: true,
+    text: 'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+    initial: false,
+    translatedText:
+      'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+  },
+};
+
+export const FromUserWithCustomAvatar = Template.bind({});
+FromUserWithCustomAvatar.args = {
+  memori,
+  tenant,
+  userAvatar: 'https://picsum.photos/200',
+  message: {
+    fromUser: true,
+    text: 'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+    initial: false,
+    translatedText:
+      'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+  },
+};
+
+export const FromUserWithCustomAvatarElement = Template.bind({});
+FromUserWithCustomAvatarElement.args = {
+  memori,
+  tenant,
+  userAvatar: <span>USER</span>,
+  message: {
+    fromUser: true,
+    text: 'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+    initial: false,
+    translatedText:
+      'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+  },
+};
+
+export const FromUserWithAvatarAndCustomAvatar = Template.bind({});
+FromUserWithAvatarAndCustomAvatar.args = {
+  memori,
+  tenant,
+  userAvatar: () => <span>USER</span>,
+  user: { avatarURL: 'https://picsum.photos/200' },
+  message: {
+    fromUser: true,
+    text: 'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+    initial: false,
+    translatedText:
+      'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+  },
+};

package/src/components/ChatBubble/ChatBubble.test.tsx

@@ -71,3 +71,58 @@ it('renders ChatBubble with msg generated by AI unchanged', () => {
   );
   expect(container).toMatchSnapshot();
 });
+
+it('renders ChatBubble from user with avatar unchanged', () => {
+  const { container } = render(
+    <ChatBubble
+      memori={memori}
+      tenant={tenant}
+      user={{ avatarURL: 'https://picsum.photos/200' }}
+      message={{
+        fromUser: true,
+        text: 'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+        initial: false,
+        translatedText:
+          'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+      }}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ChatBubble from user with custom avatar unchanged', () => {
+  const { container } = render(
+    <ChatBubble
+      memori={memori}
+      tenant={tenant}
+      userAvatar="https://picsum.photos/200"
+      message={{
+        fromUser: true,
+        text: 'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+        initial: false,
+        translatedText:
+          'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+      }}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ChatBubble from user with avatar as react element unchanged', () => {
+  const { container } = render(
+    <ChatBubble
+      memori={memori}
+      tenant={tenant}
+      user={{ avatarURL: 'https://picsum.photos/200' }}
+      userAvatar={<span>USER</span>}
+      message={{
+        fromUser: true,
+        text: 'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+        initial: false,
+        translatedText:
+          'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+      }}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/ChatBubble/ChatBubble.tsx

@@ -4,10 +4,12 @@ import {
   Memori,
   Message,
   Tenant,
+  User,
 } from '@memori.ai/memori-api-client/dist/types';
+import { Props as MemoriProps } from '../MemoriWidget/MemoriWidget';
 import { Transition } from '@headlessui/react';
 import { getResourceUrl } from '../../helpers/media';
-import User from '../icons/User';
+import UserIcon from '../icons/User';
 import AI from '../icons/AI';
 import Tooltip from '../ui/Tooltip';
 import FeedbackButtons from '../FeedbackButtons/FeedbackButtons';
@@ -23,6 +25,8 @@ export interface Props {
   simulateUserPrompt?: (msg: string) => void;
   showAIicon?: boolean;
   isFirst?: boolean;
+  userAvatar?: MemoriProps['userAvatar'];
+  user?: User;
 }
 
 const ChatBubble: React.FC<Props> = ({
@@ -35,6 +39,8 @@ const ChatBubble: React.FC<Props> = ({
   simulateUserPrompt,
   showAIicon = true,
   isFirst = false,
+  user,
+  userAvatar,
 }) => {
   const { t } = useTranslation();
 
@@ -156,22 +162,65 @@ const ChatBubble: React.FC<Props> = ({
         </Transition.Child>
 
         {message.fromUser && (
-          <Transition.Child
-            as="div"
-            className="memori-chat--bubble-avatar"
-            enter="transition ease-in-out duration-300"
-            enterFrom={`opacity-0 scale-075 ${
-              message.fromUser ? 'translate-x-15' : 'translate-x--15'
-            }`}
-            enterTo="opacity-1 scale-1 translate-x-0"
-            leave="transition ease-in-out duration-300"
-            leaveFrom="opacity-1 scale-1 translate-x-0"
-            leaveTo={`opacity-0 scale-075 ${
-              message.fromUser ? 'translate-x-15' : 'translate-x--15'
-            }`}
-          >
-            <User />
-          </Transition.Child>
+          <>
+            {(!!userAvatar && typeof userAvatar === 'string') ||
+            (!userAvatar && !!user?.avatarURL?.length) ? (
+              <Transition.Child
+                as="picture"
+                className="memori-chat--bubble-avatar"
+                enter="transition ease-in-out duration-300"
+                enterFrom={`opacity-0 scale-075 ${
+                  message.fromUser ? 'translate-x-15' : 'translate-x--15'
+                }`}
+                enterTo="opacity-1 scale-1 translate-x-0"
+                leave="transition ease-in-out duration-300"
+                leaveFrom="opacity-1 scale-1 translate-x-0"
+                leaveTo={`opacity-0 scale-075 ${
+                  message.fromUser ? 'translate-x-15' : 'translate-x--15'
+                }`}
+              >
+                <img
+                  className="memori-chat--bubble-avatar-img"
+                  alt={user?.userName ?? 'User'}
+                  src={userAvatar ?? user?.avatarURL}
+                />
+              </Transition.Child>
+            ) : !!userAvatar ? (
+              <Transition.Child
+                as="div"
+                className="memori-chat--bubble-avatar"
+                enter="transition ease-in-out duration-300"
+                enterFrom={`opacity-0 scale-075 ${
+                  message.fromUser ? 'translate-x-15' : 'translate-x--15'
+                }`}
+                enterTo="opacity-1 scale-1 translate-x-0"
+                leave="transition ease-in-out duration-300"
+                leaveFrom="opacity-1 scale-1 translate-x-0"
+                leaveTo={`opacity-0 scale-075 ${
+                  message.fromUser ? 'translate-x-15' : 'translate-x--15'
+                }`}
+              >
+                {userAvatar}
+              </Transition.Child>
+            ) : (
+              <Transition.Child
+                as="div"
+                className="memori-chat--bubble-avatar"
+                enter="transition ease-in-out duration-300"
+                enterFrom={`opacity-0 scale-075 ${
+                  message.fromUser ? 'translate-x-15' : 'translate-x--15'
+                }`}
+                enterTo="opacity-1 scale-1 translate-x-0"
+                leave="transition ease-in-out duration-300"
+                leaveFrom="opacity-1 scale-1 translate-x-0"
+                leaveTo={`opacity-0 scale-075 ${
+                  message.fromUser ? 'translate-x-15' : 'translate-x--15'
+                }`}
+              >
+                <UserIcon />
+              </Transition.Child>
+            )}
+          </>
         )}
       </Transition>
     </>

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

@@ -1,5 +1,78 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders ChatBubble from user with avatar as react element unchanged 1`] = `
+<div>
+  <div
+    class="memori-chat--bubble-container memori-chat--bubble-from-user"
+  >
+    <div
+      class="memori-chat--bubble memori-chat--user-bubble transition ease-in-out duration-300 opacity-0 scale-09 translate-x-30"
+    >
+      <p>
+        Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+      </p>
+    </div>
+    <div
+      class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x-15"
+    >
+      <span>
+        USER
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ChatBubble from user with avatar unchanged 1`] = `
+<div>
+  <div
+    class="memori-chat--bubble-container memori-chat--bubble-from-user"
+  >
+    <div
+      class="memori-chat--bubble memori-chat--user-bubble transition ease-in-out duration-300 opacity-0 scale-09 translate-x-30"
+    >
+      <p>
+        Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+      </p>
+    </div>
+    <picture
+      class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x-15"
+    >
+      <img
+        alt="User"
+        class="memori-chat--bubble-avatar-img"
+        src="https://picsum.photos/200"
+      />
+    </picture>
+  </div>
+</div>
+`;
+
+exports[`renders ChatBubble from user with custom avatar unchanged 1`] = `
+<div>
+  <div
+    class="memori-chat--bubble-container memori-chat--bubble-from-user"
+  >
+    <div
+      class="memori-chat--bubble memori-chat--user-bubble transition ease-in-out duration-300 opacity-0 scale-09 translate-x-30"
+    >
+      <p>
+        Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+      </p>
+    </div>
+    <picture
+      class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x-15"
+    >
+      <img
+        alt="User"
+        class="memori-chat--bubble-avatar-img"
+        src="https://picsum.photos/200"
+      />
+    </picture>
+  </div>
+</div>
+`;
+
 exports[`renders ChatBubble unchanged 1`] = `
 <div>
   <div

package/src/components/MemoriWidget/MemoriWidget.stories.tsx

@@ -170,3 +170,17 @@ WithCustomMediaRenderer.args = {
     </div>
   ),
 };
+
+export const WithUserAvatar = Template.bind({});
+WithUserAvatar.args = {
+  memori,
+  tenant,
+  userAvatar: 'https://picsum.photos/200',
+};
+
+export const WithUserAvatarAsElement = Template.bind({});
+WithUserAvatarAsElement.args = {
+  memori,
+  tenant,
+  userAvatar: <span>USER</span>,
+};

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -14,6 +14,7 @@ import {
   Tenant,
   Asset,
   MemoriSession,
+  User,
 } from '@memori.ai/memori-api-client/src/types';
 import {
   SpeakerAudioDestination,
@@ -122,8 +123,18 @@ const typeMessage = (
       hasBatchQueued,
     },
   });
-
   document.dispatchEvent(e);
+
+  const isSafariIOS =
+    window.navigator.userAgent.includes('Safari') &&
+    !window.navigator.userAgent.includes('Chrome') &&
+    /iPad|iPhone|iPod/.test(navigator.userAgent);
+
+  if (isSafariIOS) {
+    setTimeout(() => {
+      document.dispatchEvent(new CustomEvent('MemoriEndSpeak'));
+    }, 300);
+  }
 };
 const typeMessageHidden = (
   message: string,
@@ -189,6 +200,11 @@ const typeBatchMessages = (
       ?.hasAttribute('disabled');
   }
 
+  const isSafariIOS =
+    window.navigator.userAgent.includes('Safari') &&
+    !window.navigator.userAgent.includes('Chrome') &&
+    /iPad|iPhone|iPod/.test(navigator.userAgent);
+
   const stepsGenerator = (function* () {
     yield* messages;
   })();
@@ -200,20 +216,35 @@ const typeBatchMessages = (
     const step = next.value;
 
     if (step) {
+      if (!areInputsDisabled()) {
+        disableInputs();
+      }
+
+      let waitForPrevious = step.waitForPrevious;
+      if (isSafariIOS) waitForPrevious = false;
+
       typeMessage(
         step.message,
-        step.waitForPrevious,
+        waitForPrevious,
         step.hidden,
         step.typingText,
         step.useLoaderTextAsMsg,
         !next.done
       );
+
+      if (isSafariIOS) {
+        setTimeout(() => {
+          document.dispatchEvent(new CustomEvent('MemoriEndSpeak'));
+          reEnableInputs();
+        }, 3000);
+      }
     } else if (areInputsDisabled()) {
       reEnableInputs();
     }
 
     if (next.done) {
       document.removeEventListener('MemoriEndSpeak', submitNewMessage);
+      if (areInputsDisabled()) reEnableInputs();
       return;
     }
   };
@@ -323,6 +354,7 @@ export interface Props {
   additionalInfo?: OpenSession['additionalInfo'] & { [key: string]: string };
   customMediaRenderer?: ChatProps['customMediaRenderer'];
   additionalSettings?: JSX.Element | null;
+  userAvatar?: string | JSX.Element;
 }
 
 const MemoriWidget = ({
@@ -360,6 +392,7 @@ const MemoriWidget = ({
   additionalInfo,
   additionalSettings,
   customMediaRenderer,
+  userAvatar,
 }: Props) => {
   const { t, i18n } = useTranslation();
 
@@ -382,6 +415,10 @@ const MemoriWidget = ({
 
   const [instruct, setInstruct] = useState(false);
 
+  const [user, setUser] = useState<User>({
+    avatarURL: typeof userAvatar === 'string' ? userAvatar : undefined,
+  } as User);
+
   const [clickedStart, setClickedStart] = useState(false);
   const [gotErrorInOpening, setGotErrorInOpening] = useState(false);
 
@@ -776,13 +813,14 @@ const MemoriWidget = ({
   /**
    * Age verification
    */
-  const minAge = memori.ageRestriction
-    ? memori.ageRestriction
-    : memori.nsfw
-    ? 18
-    : memori.enableCompletions
-    ? 14
-    : 0;
+  const minAge =
+    memori.ageRestriction !== undefined
+      ? memori.ageRestriction
+      : memori.nsfw
+      ? 18
+      : memori.enableCompletions
+      ? 14
+      : 0;
   const [birthDate, setBirthDate] = useState<string | undefined>();
   const [showAgeVerification, setShowAgeVerification] = useState(false);
 
@@ -1544,35 +1582,6 @@ const MemoriWidget = ({
       audioContext.resume().then(() => speak(text));
       return;
     }
-    if (isIOS && isSafari) {
-      audioContext.suspend();
-
-      if (isPlayingAudio) {
-        try {
-          memoriSpeaking = false;
-          if (speechSynthesizer) {
-            speechSynthesizer.close();
-            speechSynthesizer = null;
-          }
-          if (audioDestination) {
-            audioDestination.pause();
-            audioDestination.close();
-          }
-          if (audioContext) {
-            // audioContext.close().then(() => {
-            //   audioContext = new AudioContext();
-            //   let buffer = audioContext.createBuffer(1, 10000, 22050);
-            //   let source = audioContext.createBufferSource();
-            //   source.buffer = buffer;
-            //   source.connect(audioContext.destination);
-            // });
-            audioContext.destination.disconnect();
-          }
-        } catch (e) {
-          console.error('stopAudio error: ', e);
-        }
-      }
-    }
     if (audioContext.state === 'closed') {
       audioContext = new AudioContext();
       let buffer = audioContext.createBuffer(1, 10000, 22050);
@@ -1590,7 +1599,9 @@ const MemoriWidget = ({
     }
 
     if (!speechSynthesizer) {
-      audioDestination = new speechSdk.SpeakerAudioDestination();
+      if (!isIOS) {
+        audioDestination = new speechSdk.SpeakerAudioDestination();
+      }
       let audioConfig =
         speechSdk.AudioConfig.fromSpeakerOutput(audioDestination);
       speechSynthesizer = new speechSdk.SpeechSynthesizer(
@@ -1628,9 +1639,6 @@ const MemoriWidget = ({
           memoriSpeaking = true;
 
           try {
-            // if (audioContext.destination.context.state === 'running') {
-            //   audioContext.destination.disconnect();
-            // }
             audioContext.decodeAudioData(result.audioData, function (buffer) {
               source.buffer = buffer;
               source.connect(audioContext.destination);
@@ -1669,11 +1677,13 @@ const MemoriWidget = ({
               speechSynthesizer.close();
               speechSynthesizer = null;
             }
+            emitEndSpeakEvent();
           }
         } else {
           audioContext.resume();
           setIsPlayingAudio(false);
           memoriSpeaking = false;
+          emitEndSpeakEvent();
         }
       },
       error => {
@@ -1681,6 +1691,7 @@ const MemoriWidget = ({
         window.speechSynthesis.speak(new SpeechSynthesisUtterance(text));
         setIsPlayingAudio(false);
         memoriSpeaking = false;
+        emitEndSpeakEvent();
       }
     );
 
@@ -2658,6 +2669,8 @@ const MemoriWidget = ({
     listening,
     isPlayingAudio,
     customMediaRenderer,
+    user,
+    userAvatar,
   };
 
   const integrationBackground =

package/src/index.stories.tsx

@@ -52,6 +52,65 @@ Localhost.args = {
   integrationID: '82f017cc-450b-4c47-acf5-47910d336ce9',
 };
 
+const TemplateWithBatchButton: Story<Props> = args => (
+  <div>
+    <button
+      style={{
+        position: 'fixed',
+        top: '0.5rem',
+        left: '0.5rem',
+        zIndex: 99999,
+      }}
+      onClick={() => {
+        window.typeBatchMessages([
+          {
+            message: 'uno di tre',
+            hidden: false,
+            waitForPrevious: true,
+          },
+          {
+            message: 'due di tre',
+            hidden: false,
+            waitForPrevious: true,
+          },
+          {
+            message: 'tre di tre',
+            hidden: false,
+            waitForPrevious: true,
+          },
+        ]);
+      }}
+    >
+      Start Batch
+    </button>
+    <Memori {...args} />
+  </div>
+);
+export const WithBatch = TemplateWithBatchButton.bind({});
+WithBatch.args = {
+  ownerUserName: 'nzambello',
+  memoriName: 'Nicola',
+  tenantID: 'app.memorytwin.com',
+  apiURL: 'https://backend.memori.ai',
+  baseURL: 'https://app.memorytwin.com',
+  uiLang: 'it',
+  showShare: true,
+  showSettings: true,
+};
+
+export const WithCustomUserAvatar = Template.bind({});
+WithCustomUserAvatar.args = {
+  ownerUserName: 'nzambello',
+  memoriName: 'Nicola',
+  tenantID: 'app.memorytwin.com',
+  apiURL: 'https://backend.memori.ai',
+  baseURL: 'https://app.memorytwin.com',
+  uiLang: 'it',
+  showShare: true,
+  showSettings: true,
+  userAvatar: 'https://picsum.photos/200',
+};
+
 // export const Instruction = Template.bind({});
 // Instruction.args = {
 //   ownerUserName: 'nzambello',
@@ -65,42 +124,3 @@ Localhost.args = {
 //   pin: 'giver pin',
 //   authToken: 'your login token',
 // };
-
-export const DemoSophia = Template.bind({});
-DemoSophia.args = {
-  layout: 'TOTEM',
-  memoriName: 'Sophia',
-  ownerUserName: 'francescoimpellizzeri',
-  memoriID: '57405959-a2c5-4499-adb8-bb8dcc848ad5',
-  ownerUserID: '44ccefdb-d7a2-447e-9851-2a76be055a40',
-  tenantID: 'nextpresent.aclambda.online',
-  apiURL: 'https://backend.memori.ai',
-  baseURL: 'https://nextpresent.aclambda.online',
-  uiLang: 'it',
-  lang: 'it',
-  showShare: true,
-  showSettings: true,
-  integrationID: 'd10bbffd-26f3-4614-a092-15b215d04ffa',
-  initialQuestion: 'Welcome Totem',
-  contextVars: 'CONTEXT:TOTEM',
-  // https://assets.memori.ai/api/v2/asset/6af08bf1-f011-40ea-92a2-699b7b53a53c.glb
-};
-
-export const DemoStefano = Template.bind({});
-DemoStefano.args = {
-  layout: 'TOTEM',
-  memoriName: 'Stefano Zingoni',
-  ownerUserName: 'roberta.bianchi',
-  memoriID: 'd6df4c75-8dfb-4e6d-b19f-193fa8a9bcce',
-  ownerUserID: 'b242160e-c19c-468f-b7f8-b2dc1ce51045',
-  tenantID: 'gruppoe.aclambda.online',
-  apiURL: 'https://backend.memori.ai',
-  baseURL: 'https://gruppoe.aclambda.online',
-  uiLang: 'it',
-  lang: 'it',
-  showShare: true,
-  showSettings: true,
-  contextVars: 'CONTEXT:TOTEM',
-  integrationID: '5712601d-6174-45e7-bfb1-b4ac71c4ff80',
-  // https://assets.memori.ai/api/v2/asset/ed50c6a4-37cd-458b-9209-8cabfa256b30.glb
-};

package/src/index.tsx

@@ -48,6 +48,7 @@ export interface Props {
   additionalInfo?: WidgetProps['additionalInfo'];
   customMediaRenderer?: WidgetProps['customMediaRenderer'];
   additionalSettings?: WidgetProps['additionalSettings'];
+  userAvatar?: WidgetProps['userAvatar'];
 }
 
 const getPreferredLanguages = () => {
@@ -103,6 +104,7 @@ const Memori: React.FC<Props> = ({
   additionalInfo,
   customMediaRenderer,
   additionalSettings,
+  userAvatar,
 }) => {
   const [memori, setMemori] = useState<IMemori>();
   const [speechKey, setSpeechKey] = useState<string | undefined>(
@@ -237,6 +239,7 @@ const Memori: React.FC<Props> = ({
       additionalInfo={additionalInfo}
       customMediaRenderer={customMediaRenderer}
       additionalSettings={additionalSettings}
+      userAvatar={userAvatar}
       {...(tag && pin ? { personification: { tag, pin } } : {})}
     />
   ) : (
@@ -296,6 +299,7 @@ Memori.propTypes = {
   additionalInfo: PropTypes.objectOf(PropTypes.any),
   customMediaRenderer: PropTypes.func,
   additionalSettings: PropTypes.any,
+  userAvatar: PropTypes.oneOfType([PropTypes.string, PropTypes.any]),
 };
 
 export default Memori;