@memori.ai/memori-react 8.38.5 → 9.0.0-alpha.0

package/src/components/Typing/Typing.tsx

@@ -1,4 +1,10 @@
 import { useEffect, useState } from 'react';
+import {
+  ExpertReference,
+  Memori,
+  Tenant,
+} from '@memori.ai/memori-api-client/dist/types';
+import { getResourceUrl } from '../../helpers/media';
 
 const separator = ' ';
 const defaultDelay = 15;
@@ -55,6 +61,12 @@ export interface Props {
   useDefaultSentences?: boolean;
   lang?: 'en' | 'it';
   sentence?: string;
+  memori?: Memori;
+  tenant?: Tenant;
+  baseUrl?: string;
+  apiUrl?: string;
+  experts?: ExpertReference[];
+  emitter?: string;
   sentences?: {
     [lang: string]: {
       /**
@@ -76,6 +88,12 @@ const Typing = ({
   useDefaultSentences = false,
   lang = 'en',
   sentence,
+  memori,
+  tenant,
+  baseUrl,
+  apiUrl,
+  experts,
+  emitter,
   sentences,
 }: Props) => {
   const [index, setIndex] = useState(0);
@@ -137,15 +155,75 @@ const Typing = ({
     return () => clearInterval(interval);
   });
 
+  const renderAssistantAvatar = () => {
+    if (!memori) return null;
+
+    return (
+      <picture
+        className="memori-chat--bubble-avatar"
+        title={!!emitter?.length && !!memori.enableBoardOfExperts ? emitter : memori.name}
+      >
+        <img
+          className="memori-chat--bubble-avatar-img"
+          alt={!!emitter?.length && !!memori.enableBoardOfExperts ? emitter : memori.name}
+          src={
+            !!emitter?.length &&
+            !!memori.enableBoardOfExperts &&
+            experts?.find(e => e.name === emitter)
+              ? `${new URL(apiUrl ?? '/').origin}/api/v1/memoriai/memori/avatar/${
+                  experts.find(e => e.name === emitter)?.expertMemoriID
+                }`
+              : memori.avatarURL && memori.avatarURL.length > 0
+              ? getResourceUrl({
+                  type: 'avatar',
+                  tenantID: tenant?.name,
+                  resourceURI: memori.avatarURL,
+                  baseURL: baseUrl,
+                  apiURL: apiUrl,
+                })
+              : getResourceUrl({
+                  tenantID: tenant?.name,
+                  type: 'avatar',
+                  baseURL: baseUrl || 'https://www.aisuru.com',
+                  apiURL: apiUrl,
+                })
+          }
+          onError={e => {
+            e.currentTarget.src =
+              memori.avatarURL && memori.avatarURL.length > 0
+                ? getResourceUrl({
+                    type: 'avatar',
+                    tenantID: tenant?.name,
+                    resourceURI: memori.avatarURL,
+                    baseURL: baseUrl,
+                  })
+                : getResourceUrl({
+                    tenantID: tenant?.name,
+                    type: 'avatar',
+                    baseURL: baseUrl,
+                  });
+
+            e.currentTarget.onerror = null;
+          }}
+        />
+      </picture>
+    );
+  };
+
   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 className="memori-chat--bubble-container memori-chat--bubble-container--typing memori-chat-scroll-item">
+      <div className="memori-chat--bubble-message-row">
+        {renderAssistantAvatar()}
+        <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>
-        {text.length > 0 && <p>{shownText}</p>}
       </div>
     </div>
   );

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

@@ -3,23 +3,31 @@
 exports[`renders Typing unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble"
+    class="memori-chat--bubble-container memori-chat--bubble-container--typing memori-chat-scroll-item"
   >
     <div
-      class="memori-chat--bubble-typing"
+      class="memori-chat--bubble-message-row"
     >
       <div
-        id="wave"
+        class="memori-chat--bubble"
       >
-        <span
-          class="dot"
-        />
-        <span
-          class="dot"
-        />
-        <span
-          class="dot"
-        />
+        <div
+          class="memori-chat--bubble-typing"
+        >
+          <div
+            id="wave"
+          >
+            <span
+              class="dot"
+            />
+            <span
+              class="dot"
+            />
+            <span
+              class="dot"
+            />
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -29,25 +37,33 @@ exports[`renders Typing unchanged 1`] = `
 exports[`renders Typing with custom loading text list unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble"
+    class="memori-chat--bubble-container memori-chat--bubble-container--typing memori-chat-scroll-item"
   >
     <div
-      class="memori-chat--bubble-typing"
+      class="memori-chat--bubble-message-row"
     >
       <div
-        id="wave"
+        class="memori-chat--bubble"
       >
-        <span
-          class="dot"
-        />
-        <span
-          class="dot"
-        />
-        <span
-          class="dot"
-        />
+        <div
+          class="memori-chat--bubble-typing"
+        >
+          <div
+            id="wave"
+          >
+            <span
+              class="dot"
+            />
+            <span
+              class="dot"
+            />
+            <span
+              class="dot"
+            />
+          </div>
+          <p />
+        </div>
       </div>
-      <p />
     </div>
   </div>
 </div>
@@ -56,25 +72,33 @@ exports[`renders Typing with custom loading text list unchanged 1`] = `
 exports[`renders Typing with custom loading text unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble"
+    class="memori-chat--bubble-container memori-chat--bubble-container--typing memori-chat-scroll-item"
   >
     <div
-      class="memori-chat--bubble-typing"
+      class="memori-chat--bubble-message-row"
     >
       <div
-        id="wave"
+        class="memori-chat--bubble"
       >
-        <span
-          class="dot"
-        />
-        <span
-          class="dot"
-        />
-        <span
-          class="dot"
-        />
+        <div
+          class="memori-chat--bubble-typing"
+        >
+          <div
+            id="wave"
+          >
+            <span
+              class="dot"
+            />
+            <span
+              class="dot"
+            />
+            <span
+              class="dot"
+            />
+          </div>
+          <p />
+        </div>
       </div>
-      <p />
     </div>
   </div>
 </div>
@@ -83,23 +107,31 @@ exports[`renders Typing with custom loading text unchanged 1`] = `
 exports[`renders Typing with default italian loading text unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble"
+    class="memori-chat--bubble-container memori-chat--bubble-container--typing memori-chat-scroll-item"
   >
     <div
-      class="memori-chat--bubble-typing"
+      class="memori-chat--bubble-message-row"
     >
       <div
-        id="wave"
+        class="memori-chat--bubble"
       >
-        <span
-          class="dot"
-        />
-        <span
-          class="dot"
-        />
-        <span
-          class="dot"
-        />
+        <div
+          class="memori-chat--bubble-typing"
+        >
+          <div
+            id="wave"
+          >
+            <span
+              class="dot"
+            />
+            <span
+              class="dot"
+            />
+            <span
+              class="dot"
+            />
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -109,23 +141,31 @@ exports[`renders Typing with default italian loading text unchanged 1`] = `
 exports[`renders Typing with default loading text unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble"
+    class="memori-chat--bubble-container memori-chat--bubble-container--typing memori-chat-scroll-item"
   >
     <div
-      class="memori-chat--bubble-typing"
+      class="memori-chat--bubble-message-row"
     >
       <div
-        id="wave"
+        class="memori-chat--bubble"
       >
-        <span
-          class="dot"
-        />
-        <span
-          class="dot"
-        />
-        <span
-          class="dot"
-        />
+        <div
+          class="memori-chat--bubble-typing"
+        >
+          <div
+            id="wave"
+          >
+            <span
+              class="dot"
+            />
+            <span
+              class="dot"
+            />
+            <span
+              class="dot"
+            />
+          </div>
+        </div>
       </div>
     </div>
   </div>