@memori.ai/memori-react 6.1.7 → 6.2.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/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

@@ -37,7 +37,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 +416,7 @@ const MemoriWidget = ({
     initSession,
     postTextEnteredEvent,
     postPlaceChangedEvent,
+    postDateChangedEvent,
     postTimeoutEvent,
     postTagChangedEvent,
     getSession,
@@ -965,8 +966,6 @@ const MemoriWidget = ({
       ) {
         setSessionId(session.sessionID);
 
-        if (position) applyPosition(position, session.sessionID);
-
         setLoading(false);
         return {
           dialogState: session.currentState,
@@ -1082,6 +1081,8 @@ const MemoriWidget = ({
         }
 
         if (position) applyPosition(position, sessionID);
+        if (memori.needsDateTime)
+          sendDateChangedEvent({ sessionID: sessionID, state: currentState });
 
         setLoading(false);
         return {
@@ -1228,6 +1229,65 @@ 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;
+
+      console.log('sendDateChangedEvent', dialogState);
+      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
    */
@@ -2371,6 +2431,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
@@ -2540,6 +2605,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 +2626,7 @@ const MemoriWidget = ({
           });
       }
     },
-    [memoriPwd, memori, memoriTokens, birthDate, sessionId, userLang]
+    [memoriPwd, memori, memoriTokens, birthDate, sessionId, userLang, position]
   );
   useEffect(() => {
     const targetNode =
@@ -2969,6 +3039,18 @@ const MemoriWidget = ({
         />
       )}
 
+      {showPositionDrawer && (
+        <PositionDrawer
+          open={!!showPositionDrawer}
+          venue={position}
+          setVenue={setPosition}
+          onClose={position => {
+            if (position) applyPosition(position);
+            setShowPositionDrawer(false);
+          }}
+        />
+      )}
+
       {showKnownFactsDrawer && sessionId && (
         <KnownFacts
           apiURL={apiUrl}

package/src/components/PositionDrawer/PositionDrawer.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
+import PositionDrawer, { Props } from './PositionDrawer';
+import { Venue } from '@memori.ai/memori-api-client/dist/types';
+import { venue } from '../../mocks/data';
+
+const meta: Meta = {
+  title: 'Widget/PositionDrawer',
+  component: PositionDrawer,
+  argTypes: {
+    open: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => {
+  const [venue, setVenue] = React.useState<Venue | undefined>(args.venue);
+
+  return (
+    <I18nWrapper>
+      <PositionDrawer {...args} venue={venue} setVenue={setVenue} />
+    </I18nWrapper>
+  );
+};
+
+// 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 = {
+  open: true,
+};
+
+export const WithVenue = Template.bind({});
+WithVenue.args = {
+  open: true,
+  venue,
+};

package/src/components/PositionDrawer/PositionDrawer.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import PositionDrawer from './PositionDrawer';
+import { venue } from '../../mocks/data';
+
+beforeEach(() => {
+  // @ts-ignore
+  window.IntersectionObserver = jest.fn(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+    takeRecords: jest.fn(),
+  }));
+});
+
+it('renders PositionDrawer unchanged', () => {
+  const { container } = render(
+    <PositionDrawer open={false} onClose={jest.fn()} setVenue={jest.fn()} />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders VenueWidget with venue set', () => {
+  const { container } = render(
+    <PositionDrawer
+      open={false}
+      onClose={jest.fn()}
+      venue={venue}
+      setVenue={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/PositionDrawer/PositionDrawer.tsx

@@ -1,9 +1,28 @@
 import React from 'react';
+import { Venue } from '@memori.ai/memori-api-client/dist/types';
+import Drawer from '../ui/Drawer';
+import { useTranslation } from 'react-i18next';
+import VenueWidget from '../VenueWidget/VenueWidget';
 
-const PositionDrawer = () => (
-  <div>
-    <h1>Position Drawer</h1>
-  </div>
-);
+export interface Props {
+  open: boolean;
+  onClose: (venue?: Venue) => void;
+  venue?: Venue;
+  setVenue: (venue?: Venue) => void;
+}
+
+const PositionDrawer = ({ open, onClose, venue, setVenue }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <Drawer
+      className="memori-position-drawer"
+      open={open}
+      onClose={() => onClose(venue)}
+      title={t('widget.position') || 'Position'}
+    >
+      <VenueWidget venue={venue} setVenue={setVenue} showUncertainty={false} />
+    </Drawer>
+  );
+};
 
 export default PositionDrawer;

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

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders PositionDrawer unchanged 1`] = `<div />`;
+
+exports[`renders VenueWidget with venue set 1`] = `<div />`;