@memori.ai/memori-react 6.2.0 → 6.3.1

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -12,7 +12,6 @@ import {
   Invitation,
   GamificationLevel,
   Tenant,
-  Asset,
   MemoriSession,
   User,
   ExpertReference,
@@ -561,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,
+        }));
       }
     }
   };
@@ -569,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
    */
@@ -966,6 +982,8 @@ const MemoriWidget = ({
       ) {
         setSessionId(session.sessionID);
 
+        if (position) applyPosition(position, session.sessionID);
+
         setLoading(false);
         return {
           dialogState: session.currentState,
@@ -1245,7 +1263,6 @@ const MemoriWidget = ({
       const session = sessionID ?? sessionId;
       const dialogState = state ?? currentDialogState;
 
-      console.log('sendDateChangedEvent', dialogState);
       if (!session || !memori.needsDateTime || dialogState?.hints?.length) {
         return;
       }
@@ -2381,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,
@@ -2481,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,
@@ -2532,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,
@@ -2583,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,
@@ -2959,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,
@@ -2998,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,
@@ -3041,6 +3071,7 @@ const MemoriWidget = ({
 
       {showPositionDrawer && (
         <PositionDrawer
+          memori={memori}
           open={!!showPositionDrawer}
           venue={position}
           setVenue={setPosition}

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

@@ -3,7 +3,7 @@ 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';
+import { venue, memori } from '../../mocks/data';
 
 const meta: Meta = {
   title: 'Widget/PositionDrawer',
@@ -27,7 +27,12 @@ const Template: Story<Props> = args => {
 
   return (
     <I18nWrapper>
-      <PositionDrawer {...args} venue={venue} setVenue={setVenue} />
+      <PositionDrawer
+        {...args}
+        memori={memori}
+        venue={venue}
+        setVenue={setVenue}
+      />
     </I18nWrapper>
   );
 };

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import PositionDrawer from './PositionDrawer';
-import { venue } from '../../mocks/data';
+import { venue, memori } from '../../mocks/data';
 
 beforeEach(() => {
   // @ts-ignore
@@ -15,7 +15,12 @@ beforeEach(() => {
 
 it('renders PositionDrawer unchanged', () => {
   const { container } = render(
-    <PositionDrawer open={false} onClose={jest.fn()} setVenue={jest.fn()} />
+    <PositionDrawer
+      memori={memori}
+      open={true}
+      onClose={jest.fn()}
+      setVenue={jest.fn()}
+    />
   );
   expect(container).toMatchSnapshot();
 });
@@ -23,7 +28,8 @@ it('renders PositionDrawer unchanged', () => {
 it('renders VenueWidget with venue set', () => {
   const { container } = render(
     <PositionDrawer
-      open={false}
+      memori={memori}
+      open={true}
       onClose={jest.fn()}
       venue={venue}
       setVenue={jest.fn()}

package/src/components/PositionDrawer/PositionDrawer.tsx

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

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

@@ -1,5 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders PositionDrawer unchanged 1`] = `<div />`;
+exports[`renders PositionDrawer unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
 
-exports[`renders VenueWidget with venue set 1`] = `<div />`;
+exports[`renders VenueWidget with venue set 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;

package/src/components/StartPanel/StartPanel.tsx

@@ -18,6 +18,7 @@ import AI from '../icons/AI';
 import Group from '../icons/Group';
 import DeepThought from '../icons/DeepThought';
 import CompletionProviderStatus from '../CompletionProviderStatus/CompletionProviderStatus';
+import MapMarker from '../icons/MapMarker';
 
 export interface Props {
   memori: Memori;
@@ -192,11 +193,14 @@ const StartPanel: React.FC<Props> = ({
       <h2 className="memori--title">{memori.name}</h2>
       {memori.needsPosition && !position && (
         <div className="memori--needsPosition">
-          <p>{t('write_and_speak.requirePosition')}</p>
+          <p>
+            {t('write_and_speak.requirePositionHelp', { name: memori.name })}
+          </p>
           <Button
             primary
             onClick={() => openPositionDrawer()}
             className="memori--start-button"
+            icon={<MapMarker />}
           >
             {t('widget.position')}
           </Button>

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

@@ -1448,11 +1448,27 @@ exports[`renders StartPanel with position required unchanged 1`] = `
       class="memori--needsPosition"
     >
       <p>
-        write_and_speak.requirePosition
+        write_and_speak.requirePositionHelp
       </p>
       <button
-        class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"
+        class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori-button--with-icon memori--start-button"
       >
+        <span
+          class="memori-button--icon"
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            role="img"
+            viewBox="0 0 384 512"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
         widget.position
       </button>
     </div>

package/src/components/VenueWidget/VenueWidget.tsx

@@ -6,7 +6,6 @@ import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
 import { useLeafletContext } from '@react-leaflet/core';
 import L from 'leaflet';
 import toast from 'react-hot-toast';
-import Select from '../ui/Select';
 import Button from '../ui/Button';
 import { useDebounceFn } from '../../helpers/utils';
 import { Combobox, Transition } from '@headlessui/react';
@@ -40,9 +39,10 @@ export type NominatimItem = {
 
 export interface Props {
   venue?: Venue;
-  setVenue: (venue?: Venue) => void;
+  setVenue: (venue: Venue) => void;
   showUncertainty?: boolean;
   showGpsButton?: boolean;
+  saveAndClose?: (venue: Venue) => void;
 }
 
 const Circle = ({
@@ -122,7 +122,10 @@ const getPlaceName = (venue?: NominatimItem) => {
         venue.address.state,
       venue.address.country,
     ]
+      // remove undefined values
       .filter(Boolean)
+      // remove duplicates
+      .filter((v, i, a) => a.indexOf(v) === i)
       .join(', ');
   } else if (venue?.display_name) {
     placeName = venue.display_name;
@@ -136,6 +139,7 @@ const VenueWidget = ({
   setVenue,
   showUncertainty = false,
   showGpsButton = true,
+  saveAndClose,
 }: Props) => {
   const { t } = useTranslation();
   const [isClient, setIsClient] = useState(false);
@@ -150,6 +154,13 @@ const VenueWidget = ({
 
     navigator.geolocation.getCurrentPosition(
       async coords => {
+        let venue: Venue = {
+          latitude: coords.coords.latitude,
+          longitude: coords.coords.longitude,
+          placeName: 'Position',
+          uncertainty: coords.coords.accuracy / 1000,
+        };
+
         try {
           const result = await fetch(
             `https://nominatim.openstreetmap.org/reverse?lat=${coords.coords.latitude}&lon=${coords.coords.longitude}&format=jsonv2&addressdetails=1`
@@ -157,24 +168,21 @@ const VenueWidget = ({
           const response = (await result.json()) as NominatimItem;
 
           const placeName = getPlaceName(response);
-
-          setVenue({
+          venue = {
             latitude: coords.coords.latitude,
             longitude: coords.coords.longitude,
             placeName: placeName,
             uncertainty: coords.coords.accuracy / 1000,
-          });
+          };
+          setVenue(venue);
         } catch (e) {
           let err = e as Error;
           console.error('[POSITION ERROR]', err);
           if (err?.message) toast.error(err.message);
 
-          setVenue({
-            latitude: coords.coords.latitude,
-            longitude: coords.coords.longitude,
-            placeName: 'Position',
-            uncertainty: coords.coords.accuracy / 1000,
-          });
+          setVenue(venue);
+        } finally {
+          if (saveAndClose) saveAndClose(venue);
         }
 
         setUpdatingPosition(false);
@@ -253,7 +261,7 @@ const VenueWidget = ({
               <div className="memori--venue-widget-search">
                 <Combobox
                   value={
-                    (venue
+                    (venue?.latitude && venue?.longitude
                       ? {
                           place_id: 0,
                           lat: venue?.latitude,
@@ -266,7 +274,9 @@ const VenueWidget = ({
                 >
                   <Combobox.Input
                     className="memori--venue-widget-search--input"
-                    displayValue={(i: NominatimItem) => getPlaceName(i)}
+                    displayValue={(i: NominatimItem) =>
+                      i ? getPlaceName(i) : ''
+                    }
                     placeholder={t('searchVenue')}
                     onChange={e => onQueryChange(e.target.value)}
                   />
@@ -320,10 +330,11 @@ const VenueWidget = ({
                   )}
                 </Combobox>
               </div>
+
               {showGpsButton && (
                 <Button
                   className="memori--venue-widget__gps-button"
-                  outlined
+                  primary
                   loading={updatingPosition}
                   onClick={() => {
                     setUpdatingPosition(true);
@@ -336,6 +347,24 @@ const VenueWidget = ({
             </>
           )}
         </div>
+        <div>
+          <Button
+            outlined
+            className="memori--venue-widget__no-location-button"
+            onClick={() => {
+              let venue: Venue = {
+                latitude: 0,
+                longitude: 0,
+                placeName: 'Position',
+                uncertainty: 0,
+              };
+              setVenue(venue);
+              if (saveAndClose) saveAndClose(venue);
+            }}
+          >
+            {t('write_and_speak.dontWantToProvidePosition')}
+          </Button>
+        </div>
         {showUncertainty && (
           <label className="memori--venue-widget__select-label">
             <span>{t('uncertain')}: </span>
@@ -374,7 +403,7 @@ const VenueWidget = ({
         )}
       </div>
       <div className="memori--venue-widget__form-item">
-        {venue?.placeName && (
+        {venue?.placeName && venue.placeName !== 'Position' && (
           <p className="memori--venue--widget__place-name">
             <strong>{t('venue')}</strong>: {venue.placeName}
           </p>

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

@@ -30,11 +30,18 @@ exports[`renders VenueWidget with venue set, exact location 1`] = `
           />
         </div>
         <button
-          class="memori-button memori-button--outlined memori-button--rounded memori-button--padded memori--venue-widget__gps-button"
+          class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--venue-widget__gps-button"
         >
           write_and_speak.useMyPosition
         </button>
       </div>
+      <div>
+        <button
+          class="memori-button memori-button--outlined memori-button--rounded memori-button--padded memori--venue-widget__no-location-button"
+        >
+          write_and_speak.dontWantToProvidePosition
+        </button>
+      </div>
     </div>
     <div
       class="memori--venue-widget__form-item"
@@ -101,11 +108,18 @@ exports[`renders VenueWidget with venue set, with uncertainty radius 1`] = `
           />
         </div>
         <button
-          class="memori-button memori-button--outlined memori-button--rounded memori-button--padded memori--venue-widget__gps-button"
+          class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--venue-widget__gps-button"
         >
           write_and_speak.useMyPosition
         </button>
       </div>
+      <div>
+        <button
+          class="memori-button memori-button--outlined memori-button--rounded memori-button--padded memori--venue-widget__no-location-button"
+        >
+          write_and_speak.dontWantToProvidePosition
+        </button>
+      </div>
     </div>
     <div
       class="memori--venue-widget__form-item"
@@ -172,6 +186,13 @@ exports[`renders VenueWidget without gps button unchanged 1`] = `
           />
         </div>
       </div>
+      <div>
+        <button
+          class="memori-button memori-button--outlined memori-button--rounded memori-button--padded memori--venue-widget__no-location-button"
+        >
+          write_and_speak.dontWantToProvidePosition
+        </button>
+      </div>
     </div>
     <div
       class="memori--venue-widget__form-item"
@@ -238,11 +259,18 @@ exports[`renders VenueWidget without uncertainty unchanged 1`] = `
           />
         </div>
         <button
-          class="memori-button memori-button--outlined memori-button--rounded memori-button--padded memori--venue-widget__gps-button"
+          class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--venue-widget__gps-button"
         >
           write_and_speak.useMyPosition
         </button>
       </div>
+      <div>
+        <button
+          class="memori-button memori-button--outlined memori-button--rounded memori-button--padded memori--venue-widget__no-location-button"
+        >
+          write_and_speak.dontWantToProvidePosition
+        </button>
+      </div>
     </div>
     <div
       class="memori--venue-widget__form-item"
@@ -309,11 +337,18 @@ exports[`renders empty VenueWidget unchanged 1`] = `
           />
         </div>
         <button
-          class="memori-button memori-button--outlined memori-button--rounded memori-button--padded memori--venue-widget__gps-button"
+          class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--venue-widget__gps-button"
         >
           write_and_speak.useMyPosition
         </button>
       </div>
+      <div>
+        <button
+          class="memori-button memori-button--outlined memori-button--rounded memori-button--padded memori--venue-widget__no-location-button"
+        >
+          write_and_speak.dontWantToProvidePosition
+        </button>
+      </div>
     </div>
     <div
       class="memori--venue-widget__form-item"

package/src/components/ui/Drawer.tsx

@@ -14,6 +14,7 @@ export interface Props {
   children: JSX.Element | React.ReactNode;
   footer?: JSX.Element | React.ReactNode;
   loading?: boolean;
+  animated?: boolean;
   closable?: boolean;
   side?: 'left' | 'right';
   width?: string;
@@ -30,6 +31,7 @@ const Drawer: FC<Props> = ({
   children,
   footer,
   loading = false,
+  animated = true,
   side = 'right',
   closable = true,
   width = '100%',
@@ -56,13 +58,14 @@ const Drawer: FC<Props> = ({
       <div className="memori-drawer--container">
         <div className="memori-drawer--container-scrollable">
           <Transition.Child
+            static
             as={React.Fragment}
             enter="ease-out duration-300"
-            enterFrom="max-w-0 opacity-0"
+            enterFrom={animated ? 'max-w-0 opacity-0' : 'opacity-0'}
             enterTo="max-w-80 opacity-100"
             leave="ease-in duration-200"
             leaveFrom="max-w-80 opacity-100"
-            leaveTo="max-w-0 opacity-0"
+            leaveTo={animated ? 'max-w-0 opacity-0' : 'opacity-0'}
           >
             <Dialog.Panel
               className={cx('memori-drawer--panel', {

package/src/helpers/configuration.ts

@@ -7,6 +7,7 @@ export const keys: { [key: string]: string } = {
   controlsPosition: '@memori:controlsPosition',
   hideEmissions: '@memori:hideEmissions',
   loginToken: '@memori:loginToken',
+  location: '@memori:location',
 };
 
 export const getLocalConfig = <Type>(key: string, defaultValue: Type): Type => {

package/src/locales/en.json

@@ -86,7 +86,7 @@
     "instruct": "Instruct",
     "test": "Test",
     "sound": "Sound",
-    "position": "Position",
+    "position": "Position preferences",
     "settings": "Settings",
     "share": "Share",
     "sendOnKeypress": "Hit Enter to send",
@@ -126,6 +126,8 @@
     "updatingPosition": "Updating position...",
     "placeNotFound": "Place not found!",
     "requirePosition": "Insert your position before start",
+    "requirePositionHelp": "To talk to {{name}} you have to decide whether to provide your position or not. This is because different answers that it can provide you may depend on where you are.",
+    "dontWantToProvidePosition": "I don't want to provide my position",
     "attachmentsLabel": "Enrich your message",
     "iWantToTalkToIn": "I want to talk to {{name}} in"
   },

package/src/locales/it.json

@@ -86,7 +86,7 @@
     "instruct": "Istruisci",
     "test": "Prova",
     "sound": "Audio",
-    "position": "Posizione",
+    "position": "Preferenze posizione",
     "settings": "Impostazioni",
     "share": "Condividi",
     "sendOnKeypress": "Premi Invio per inviare",
@@ -125,7 +125,8 @@
     "myPosition": "Posizione corrente",
     "updatingPosition": "Aggiorno la posizione...",
     "placeNotFound": "Luogo sconosciuto!",
-    "requirePosition": "Inserisci la posizione prima di iniziare",
+    "requirePositionHelp": "Per parlare con {{name}} devi decidere se fornire o meno la tua posizione. Questo perchè diverse risposte che potrà fornirti potrebbero dipendere da dove ti trovi.",
+    "dontWantToProvidePosition": "Non voglio fornire la mia posizione",
     "attachmentsLabel": "Arricchisci il tuo messaggio",
     "iWantToTalkToIn": "Voglio parlare con {{name}} in"
   },