@memori.ai/memori-react 6.1.7 → 6.3.0

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

@@ -12,8 +12,6 @@ exports[`renders ChatBubble from user with avatar as react element unchanged 1`]
         <p>
           Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
         </p>
-        
-
       </div>
     </div>
     <div
@@ -39,8 +37,6 @@ exports[`renders ChatBubble from user with avatar unchanged 1`] = `
         <p>
           Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
         </p>
-        
-
       </div>
     </div>
     <picture
@@ -68,8 +64,6 @@ exports[`renders ChatBubble from user with custom avatar unchanged 1`] = `
         <p>
           Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
         </p>
-        
-
       </div>
     </div>
     <picture
@@ -107,8 +101,6 @@ exports[`renders ChatBubble unchanged 1`] = `
         <p>
           Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
         </p>
-        
-
       </div>
     </div>
   </div>
@@ -140,8 +132,6 @@ exports[`renders ChatBubble with initial msg unchanged 1`] = `
         <p>
           Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
         </p>
-        
-
       </div>
     </div>
   </div>
@@ -170,16 +160,13 @@ exports[`renders ChatBubble with markdown unchanged 1`] = `
         <h2>
           Test
         </h2>
-        
-
+        <br />
         <p>
           Ecco tutte le possibili personalizzazioni che puoi applicare:
         </p>
-        
-
+        <br />
         <ul>
-          
-
+          <br />
           <li>
             <p>
               <strong>
@@ -187,27 +174,21 @@ exports[`renders ChatBubble with markdown unchanged 1`] = `
               </strong>
               :
             </p>
-            
-
+            <br />
             <ul>
-              
-
+              <br />
               <li>
                 Girocollo
               </li>
-              
-
+              <br />
               <li>
                 Scollo a V
               </li>
-              
-
+              <br />
             </ul>
-            
-
+            <br />
           </li>
-          
-
+          <br />
           <li>
             <p>
               <strong>
@@ -215,27 +196,21 @@ exports[`renders ChatBubble with markdown unchanged 1`] = `
               </strong>
               :
             </p>
-            
-
+            <br />
             <ul>
-              
-
+              <br />
               <li>
                 Manica Lunga
               </li>
-              
-
+              <br />
               <li>
                 Manica Corta
               </li>
-              
-
+              <br />
             </ul>
-            
-
+            <br />
           </li>
-          
-
+          <br />
           <li>
             <p>
               <strong>
@@ -243,52 +218,41 @@ exports[`renders ChatBubble with markdown unchanged 1`] = `
               </strong>
               :
             </p>
-            
-
+            <br />
             <ul>
-              
-
+              <br />
               <li>
                 XS
               </li>
-              
-
+              <br />
               <li>
                 S
               </li>
-              
-
+              <br />
               <li>
                 M
               </li>
-              
-
+              <br />
               <li>
                 L
               </li>
-              
-
+              <br />
               <li>
                 XL
               </li>
-              
-
+              <br />
               <li>
                 XXL
               </li>
-              
-
+              <br />
               <li>
                 3XL
               </li>
-              
-
+              <br />
             </ul>
-            
-
+            <br />
           </li>
-          
-
+          <br />
           <li>
             <p>
               <strong>
@@ -296,37 +260,29 @@ exports[`renders ChatBubble with markdown unchanged 1`] = `
               </strong>
               :
             </p>
-            
-
+            <br />
             <ul>
-              
-
+              <br />
               <li>
                 Fronte Petto
               </li>
-              
-
+              <br />
               <li>
                 Retro Schiena
               </li>
-              
-
+              <br />
               <li>
                 Fronte DX
               </li>
-              
-
+              <br />
               <li>
                 Fronte SX
               </li>
-              
-
+              <br />
             </ul>
-            
-
+            <br />
           </li>
-          
-
+          <br />
           <li>
             <p>
               <strong>
@@ -334,30 +290,23 @@ exports[`renders ChatBubble with markdown unchanged 1`] = `
               </strong>
               :
             </p>
-            
-
+            <br />
             <ul>
-              
-
+              <br />
               <li>
                 Prompt generazione immagine
               </li>
-              
-
+              <br />
             </ul>
-            
-
+            <br />
           </li>
-          
-
+          <br />
         </ul>
-        
-
+        <br />
         <p>
           Seleziona le personalizzazioni che desideri applicare.
         </p>
-        
-
+        <br />
         <p>
           <a
             href="https://memori.ai"
@@ -367,8 +316,6 @@ exports[`renders ChatBubble with markdown unchanged 1`] = `
             Vedi altro
           </a>
         </p>
-        
-
       </div>
     </div>
   </div>
@@ -387,8 +334,6 @@ exports[`renders ChatBubble with msg from BoE expert unchanged 1`] = `
         <p>
           Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
         </p>
-        
-
       </div>
       <div
         class="memori-chat--bubble-addon"
@@ -471,8 +416,6 @@ exports[`renders ChatBubble with msg generated by AI unchanged 1`] = `
         <p>
           Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
         </p>
-        
-
       </div>
       <div
         class="memori-chat--bubble-addon"
@@ -555,8 +498,6 @@ exports[`renders ChatBubble with user msg unchanged 1`] = `
         <p>
           Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
         </p>
-        
-
       </div>
     </div>
     <div

package/src/components/Header/Header.css

@@ -48,11 +48,19 @@
 }
 
 .memori-header--position {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
 }
 
 .memori-header--position .memori-header--position-placeName {
+    display: inline-block;
+    overflow: hidden;
+    max-width: 250px;
+    padding-right: 0.25rem;
+    margin: 0;
     font-style: italic;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .memori-header--position .memori-header--button {
@@ -60,7 +68,12 @@
     margin-left: 0.5rem;
 }
 
+.memori-header .memori-header--button--position,
 .memori-header .memori-share-button,
 .memori-header .memori-header--button-login {
     margin-left: 0.25rem;
+}
+
+.memori-header .memori-header--button--position {
+    margin-right: 0.25rem;
 }

package/src/components/Header/Header.tsx

@@ -109,13 +109,17 @@ const Header: React.FC<Props> = ({
       )}
       {memori.needsPosition && position && (
         <div className="memori-header--position">
-          <span className="memori-header--position-placeName">
-            {position.placeName}
-          </span>
+          {position.latitude !== 0 && position.longitude !== 0 && (
+            <span className="memori-header--position-placeName">
+              {position.placeName}
+            </span>
+          )}
           <Button
-            icon={<MapMarker />}
+            primary
             shape="circle"
             className="memori-header--button memori-header--button--position"
+            title={t('widget.position') || 'Position'}
+            icon={<MapMarker />}
             onClick={() => setShowPositionDrawer(true)}
           />
         </div>

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

@@ -757,7 +757,8 @@ exports[`renders Header with position unchanged 1`] = `
         Berlin
       </span>
       <button
-        class="memori-button memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--position"
+        class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--position"
+        title="widget.position"
       >
         <span
           class="memori-button--icon"

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

@@ -56,6 +56,15 @@ WithPosition.args = {
   tenant,
 };
 
+export const WithDates = Template.bind({});
+WithDates.args = {
+  memori: {
+    ...memori,
+    needsDateTime: true,
+  },
+  tenant,
+};
+
 export const WithPublicPageIntegration = Template.bind({});
 WithPublicPageIntegration.args = {
   memori,

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -12,7 +12,6 @@ import {
   Invitation,
   GamificationLevel,
   Tenant,
-  Asset,
   MemoriSession,
   User,
   ExpertReference,
@@ -37,7 +36,7 @@ import memoriApiClient from '@memori.ai/memori-api-client';
 import { AudioContext, IAudioContext } from 'standardized-audio-context';
 import * as speechSdk from 'microsoft-cognitiveservices-speech-sdk';
 import cx from 'classnames';
-
+import { DateTime } from 'luxon';
 import toast from 'react-hot-toast';
 
 // Components
@@ -416,6 +415,7 @@ const MemoriWidget = ({
     initSession,
     postTextEnteredEvent,
     postPlaceChangedEvent,
+    postDateChangedEvent,
     postTimeoutEvent,
     postTagChangedEvent,
     getSession,
@@ -560,7 +560,11 @@ const MemoriWidget = ({
       });
 
       if (currentState && response.resultCode === 0) {
-        setCurrentDialogState({ ...currentDialogState, ...currentState });
+        _setCurrentDialogState(cds => ({
+          ...cds,
+          ...currentState,
+          hints: currentState.hints?.length ? currentState.hints : cds?.hints,
+        }));
       }
     }
   };
@@ -568,8 +572,21 @@ const MemoriWidget = ({
   const setPosition = (venue?: Venue) => {
     _setPosition(venue);
     applyPosition(venue);
+
+    if (venue) {
+      setLocalConfig('position', JSON.stringify(venue));
+    } else {
+      removeLocalConfig('position');
+    }
   };
 
+  useEffect(() => {
+    const position = getLocalConfig<Venue | undefined>('position', undefined);
+    if (position) {
+      _setPosition(position);
+    }
+  }, []);
+
   /**
    * History e gestione invio messaggi
    */
@@ -1082,6 +1099,8 @@ const MemoriWidget = ({
         }
 
         if (position) applyPosition(position, sessionID);
+        if (memori.needsDateTime)
+          sendDateChangedEvent({ sessionID: sessionID, state: currentState });
 
         setLoading(false);
         return {
@@ -1228,6 +1247,64 @@ const MemoriWidget = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  /**
+   * Polling dates
+   */
+  const sendDateChangedEvent = useCallback(
+    async ({
+      sessionID,
+      date,
+      state,
+    }: {
+      sessionID?: string;
+      date?: string;
+      state?: DialogState;
+    }) => {
+      const session = sessionID ?? sessionId;
+      const dialogState = state ?? currentDialogState;
+
+      if (!session || !memori.needsDateTime || dialogState?.hints?.length) {
+        return;
+      }
+
+      const now = (date ? DateTime.fromISO(date) : DateTime.now())
+        .toUTC()
+        .toFormat('yyyy/MM/dd HH:mm:ss ZZ')
+        .split(':')
+        .slice(0, -1)
+        .join(':');
+
+      const { currentState, ...response } = await postDateChangedEvent(
+        session,
+        now
+      );
+
+      if (response.resultCode === 0 && currentState) {
+        _setCurrentDialogState(cds => ({
+          ...cds,
+          ...currentState,
+          hints: currentState.hints?.length ? currentState.hints : cds?.hints,
+        }));
+      }
+    },
+    [currentDialogState, memori.needsDateTime, sessionId]
+  );
+  useEffect(() => {
+    if (sessionId && memori.needsDateTime) {
+      sendDateChangedEvent({ sessionID: sessionId, state: currentDialogState });
+
+      let datePolling = setInterval(() => {
+        sendDateChangedEvent({
+          sessionID: sessionId,
+        });
+      }, 60 * 1000); // 1 minute
+
+      return () => {
+        clearInterval(datePolling);
+      };
+    }
+  }, [memori.needsDateTime, sessionId]);
+
   /**
    * Timeout conversazione
    */
@@ -2321,8 +2398,9 @@ const MemoriWidget = ({
           tag: personification?.tag,
           pin: personification?.pin,
           initialContextVars: {
-            PATHNAME: window.location.pathname,
-            ROUTE: window.location.pathname?.split('/')?.pop() || '',
+            PATHNAME: window.location.pathname?.toUpperCase(),
+            ROUTE:
+              window.location.pathname?.split('/')?.pop()?.toUpperCase() || '',
             ...(initialContextVars || {}),
           },
           initialQuestion,
@@ -2371,6 +2449,11 @@ const MemoriWidget = ({
         // reset history
         setHistory([]);
 
+        // date and place events
+        if (position) applyPosition(position, sessionID);
+        if (memori.needsDateTime)
+          sendDateChangedEvent({ sessionID: sessionID, state: currentState });
+
         // checks engine state for current tag
         // opening session would have already correct tag
         // otherwise change tag to anonymous for test, giver for instruct, receiver if set
@@ -2416,8 +2499,10 @@ const MemoriWidget = ({
               memori?.giverTag,
               memori?.giverPIN,
               {
-                PATHNAME: window.location.pathname,
-                ROUTE: window.location.pathname?.split('/')?.pop() || '',
+                PATHNAME: window.location.pathname?.toUpperCase(),
+                ROUTE:
+                  window.location.pathname?.split('/')?.pop()?.toUpperCase() ||
+                  '',
                 ...(initialContextVars || {}),
               },
               initialQuestion,
@@ -2467,8 +2552,10 @@ const MemoriWidget = ({
               personification.tag,
               personification.pin,
               {
-                PATHNAME: window.location.pathname,
-                ROUTE: window.location.pathname?.split('/')?.pop() || '',
+                PATHNAME: window.location.pathname?.toUpperCase(),
+                ROUTE:
+                  window.location.pathname?.split('/')?.pop()?.toUpperCase() ||
+                  '',
                 ...(initialContextVars || {}),
               },
               initialQuestion,
@@ -2518,8 +2605,10 @@ const MemoriWidget = ({
               undefined,
               undefined,
               {
-                PATHNAME: window.location.pathname,
-                ROUTE: window.location.pathname?.split('/')?.pop() || '',
+                PATHNAME: window.location.pathname?.toUpperCase(),
+                ROUTE:
+                  window.location.pathname?.split('/')?.pop()?.toUpperCase() ||
+                  '',
                 ...(initialContextVars || {}),
               },
               initialQuestion,
@@ -2540,6 +2629,11 @@ const MemoriWidget = ({
               setHasUserActivatedSpeak(true);
             });
         }
+
+        // date and place events
+        if (position) applyPosition(position, sessionID);
+        if (memori.needsDateTime)
+          sendDateChangedEvent({ sessionID: sessionID, state: currentState });
       } else {
         // reset history
         setHistory([]);
@@ -2556,7 +2650,7 @@ const MemoriWidget = ({
           });
       }
     },
-    [memoriPwd, memori, memoriTokens, birthDate, sessionId, userLang]
+    [memoriPwd, memori, memoriTokens, birthDate, sessionId, userLang, position]
   );
   useEffect(() => {
     const targetNode =
@@ -2889,8 +2983,10 @@ const MemoriWidget = ({
               instruct ? memori.giverTag : personification?.tag,
               instruct ? memori.giverPIN : personification?.pin,
               {
-                PATHNAME: window.location.pathname,
-                ROUTE: window.location.pathname?.split('/')?.pop() || '',
+                PATHNAME: window.location.pathname?.toUpperCase(),
+                ROUTE:
+                  window.location.pathname?.split('/')?.pop()?.toUpperCase() ||
+                  '',
                 ...(initialContextVars || {}),
               },
               initialQuestion,
@@ -2928,8 +3024,12 @@ const MemoriWidget = ({
                 instruct ? memori.giverTag : personification?.tag,
                 instruct ? memori.giverPIN : personification?.pin,
                 {
-                  PATHNAME: window.location.pathname,
-                  ROUTE: window.location.pathname?.split('/')?.pop() || '',
+                  PATHNAME: window.location.pathname?.toUpperCase(),
+                  ROUTE:
+                    window.location.pathname
+                      ?.split('/')
+                      ?.pop()
+                      ?.toUpperCase() || '',
                   ...(initialContextVars || {}),
                 },
                 initialQuestion,
@@ -2969,6 +3069,19 @@ const MemoriWidget = ({
         />
       )}
 
+      {showPositionDrawer && (
+        <PositionDrawer
+          memori={memori}
+          open={!!showPositionDrawer}
+          venue={position}
+          setVenue={setPosition}
+          onClose={position => {
+            if (position) applyPosition(position);
+            setShowPositionDrawer(false);
+          }}
+        />
+      )}
+
       {showKnownFactsDrawer && sessionId && (
         <KnownFacts
           apiURL={apiUrl}