@memori.ai/memori-react 2.1.0 → 2.2.1

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -251,18 +251,19 @@ const MemoriWidget = ({
     ?.find(c => c.memoriConfigID === memori.memoriConfigurationID)
     ?.culture?.split('-')?.[0]
     ?.toUpperCase();
-  // eslint-disable-next-line
+  const integrationConfig = integration?.customData
+    ? JSON.parse(integration.customData)
+    : null;
+  const isMultilanguageEnabled = !!integrationConfig?.multilanguage;
   const [userLang, setUserLang] = useState(
-    memoriLang ??
+    integrationConfig?.lang ??
+      memoriLang ??
       memori?.culture?.split('-')?.[0] ??
       language ??
+      integrationConfig?.uiLang ??
       i18n.language ??
       'IT'
   );
-  const integrationConfig = integration?.customData
-    ? JSON.parse(integration.customData)
-    : null;
-  const isMultilanguageEnabled = !!integrationConfig?.multilanguage;
 
   const [loading, setLoading] = useState(false);
   const [memoriTyping, setMemoriTyping] = useState(false);
@@ -275,7 +276,7 @@ const MemoriWidget = ({
   const [showPositionDrawer, setShowPositionDrawer] = useState(false);
   const [showSettingsDrawer, setShowSettingsDrawer] = useState(false);
   const [muteSpeaker, setMuteSpeaker] = useState(false);
-  const [continuousSpeech, setContinuousSpeech] = useState(true);
+  const [continuousSpeech, setContinuousSpeech] = useState(false);
   const [continuousSpeechTimeout, setContinuousSpeechTimeout] = useState(2);
   const [isPlayingAudio, setIsPlayingAudio] = useState(false);
   const [controlsPosition, setControlsPosition] = useState<'center' | 'bottom'>(
@@ -289,9 +290,16 @@ const MemoriWidget = ({
 
   useEffect(() => {
     let defaultControlsPosition: 'center' | 'bottom' = 'bottom';
-    if (window.innerWidth < 768) {
+    let microphoneMode = getLocalConfig<string>(
+      'microphoneMode',
+      'HOLD_TO_TALK'
+    );
+
+    if (window.innerWidth <= 768) {
       // on mobile, default position is bottom
       defaultControlsPosition = 'bottom';
+      // on mobile, keep only HOLD_TO_TALK mode
+      microphoneMode = 'HOLD_TO_TALK';
     } else if (
       window.matchMedia('(orientation: portrait)').matches ||
       window.innerHeight > window.innerWidth
@@ -304,7 +312,7 @@ const MemoriWidget = ({
     }
 
     setMuteSpeaker(getLocalConfig('muteSpeaker', false));
-    setContinuousSpeech(getLocalConfig('continuousSpeech', true));
+    setContinuousSpeech(microphoneMode === 'CONTINUOUS');
     setContinuousSpeechTimeout(getLocalConfig('continuousSpeechTimeout', 2));
     setControlsPosition(
       getLocalConfig('controlsPosition', defaultControlsPosition)
@@ -944,6 +952,10 @@ const MemoriWidget = ({
       }
     }
 
+    if (memori.enableCompletions) {
+      timeout = timeout + 60;
+    }
+
     let uiTimeout = setTimeout(handleTimeout, timeout * 1000);
     setUserInteractionTimeout(uiTimeout);
     timeoutRef.current = uiTimeout;
@@ -1442,6 +1454,7 @@ const MemoriWidget = ({
 
     clearListening();
     setTranscript('');
+    resetTranscript();
 
     try {
       navigator.mediaDevices
@@ -1498,6 +1511,8 @@ const MemoriWidget = ({
           recognizer.sessionStopped = (_s, _e) => {
             stopListening();
           };
+
+          resetTranscript();
           recognizer.startContinuousRecognitionAsync();
         })
         .catch(console.error);
@@ -1595,7 +1610,8 @@ const MemoriWidget = ({
       'sendOnEnter',
       'keypress'
     );
-    setSendOnEnter(stored);
+    if (window.innerWidth <= 768) setSendOnEnter('click');
+    else setSendOnEnter(stored);
   }, []);
   useEffect(() => {
     setLocalConfig('sendOnEnter', sendOnEnter);
@@ -2217,6 +2233,7 @@ const MemoriWidget = ({
       selectReceiverTag={selectReceiverTag}
       preview={preview}
       sendOnEnter={sendOnEnter}
+      microphoneMode={continuousSpeech ? 'CONTINUOUS' : 'HOLD_TO_TALK'}
       setSendOnEnter={setSendOnEnter}
       attachmentsMenuOpen={attachmentsMenuOpen}
       setAttachmentsMenuOpen={setAttachmentsMenuOpen}
@@ -2405,9 +2422,9 @@ const MemoriWidget = ({
           layout={selectedLayout}
           open={!!showSettingsDrawer}
           onClose={() => setShowSettingsDrawer(false)}
-          continuousSpeech={continuousSpeech}
+          microphoneMode={continuousSpeech ? 'CONTINUOUS' : 'HOLD_TO_TALK'}
           continuousSpeechTimeout={continuousSpeechTimeout}
-          setContinuousSpeech={setContinuousSpeech}
+          setMicrophoneMode={mode => setContinuousSpeech(mode === 'CONTINUOUS')}
           setContinuousSpeechTimeout={setContinuousSpeechTimeout}
           controlsPosition={controlsPosition}
           setControlsPosition={setControlsPosition}

package/src/components/MicrophoneButton/MicrophoneButton.css

@@ -0,0 +1,107 @@
+.memori-mic-btn-tooltip.memori-tooltip.memori-tooltip--align-topLeft:not(
+        .memori-tooltip--disabled
+    ).memori-tooltip--visible
+    .memori-tooltip--content,
+.memori-mic-btn-tooltip.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled):not(
+        .memori-tooltip--visible
+    ):hover
+    .memori-tooltip--content {
+    touch-action: none;
+    transform: translateY(-180%) translateX(27%);
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+.memori-chat-inputs--mic {
+    z-index: 1;
+    margin-left: 0.33rem;
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+.memori-chat-inputs--mic svg {
+    color: var(--memori-primary-text, #fff);
+    font-size: 1em;
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+.memori-chat-inputs--mic:hover,
+.memori-chat-inputs--mic:active,
+.memori-chat-inputs--mic:focus {
+    border-color: var(--memori-primary) !important;
+    color: var(--memori-primary-text, #fff);
+}
+
+.memori-chat-inputs--mic:active,
+.memori-chat-inputs--mic:focus {
+    box-shadow: 0 0.2rem 0.33rem var(--memori-primary) !important;
+}
+
+.memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):active,
+.memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):focus {
+    color: var(--memori-primary) !important;
+}
+
+@keyframes micBtnActivePulse {
+    0% {
+        transform: scale(1.25);
+    }
+
+    25% {
+        transform: scale(1.4);
+    }
+
+    50% {
+        transform: scale(1.3);
+    }
+
+    75% {
+        transform: scale(1.4);
+    }
+
+    100% {
+        transform: scale(1.2);
+    }
+}
+
+.memori-chat-inputs--mic.memori-chat-inputs--mic--listening {
+    position: relative;
+    color: red !important;
+    transform: scale(1.5);
+}
+
+.memori-chat-inputs--mic.memori-chat-inputs--mic--listening::before,
+.memori-chat-inputs--mic.memori-chat-inputs--mic--listening::after {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    animation: micBtnActivePulse 2s infinite;
+    background: var(--memori-primary);
+    content: '';
+    opacity: 0.2;
+}
+
+.memori-chat-inputs--mic.memori-chat-inputs--mic--listening::after {
+    top: 5%;
+    left: 5%;
+    width: 90%;
+    height: 90%;
+    animation-delay: 0.3s;
+    opacity: 0.3;
+}
+
+.memori-chat-inputs--mic.memori-chat-inputs--mic--listening:active,
+.memori-chat-inputs--mic.memori-chat-inputs--mic--listening:focus {
+    border-color: red !important;
+}
+
+.memori-chat-inputs--mic.memori-chat-inputs--mic--listening svg {
+    color: red !important;
+}

package/src/components/MicrophoneButton/MicrophoneButton.stories.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import MicrophoneButton, { Props } from './MicrophoneButton';
+
+import './MicrophoneButton.css';
+
+const meta: Meta = {
+  title: 'Widget/Microphone Button',
+  component: MicrophoneButton,
+  argTypes: {
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => {
+  const [listening, setListening] = React.useState(args.listening);
+  const startListening = () => setListening(true);
+  const stopListening = () => setListening(false);
+
+  return (
+    <div style={{ paddingTop: '10rem', textAlign: 'right' }}>
+      <MicrophoneButton
+        {...args}
+        listening={listening}
+        startListening={startListening}
+        stopListening={stopListening}
+      />
+    </div>
+  );
+};
+
+// 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 = {
+  listening: false,
+  stopAudio: () => {},
+  startListening: () => {},
+  stopListening: () => {},
+};

package/src/components/MicrophoneButton/MicrophoneButton.tsx

@@ -0,0 +1,95 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Props as ChatInputProps } from '../ChatInputs/ChatInputs';
+import Microphone from '../icons/Microphone';
+import Button from '../ui/Button';
+import Tooltip from '../ui/Tooltip';
+import cx from 'classnames';
+import { useTranslation } from 'react-i18next';
+
+export interface Props {
+  listening?: ChatInputProps['listening'];
+  stopAudio: ChatInputProps['stopAudio'];
+  startListening: ChatInputProps['startListening'];
+  stopListening: ChatInputProps['stopListening'];
+}
+
+const MicrophoneButton = ({
+  listening,
+  stopAudio,
+  startListening,
+  stopListening,
+}: Props) => {
+  const { t } = useTranslation();
+  const [micBtnTooltip, setMicBtnTooltip] = useState<string | undefined>();
+
+  const intervalRef = useRef<any>(null);
+
+  const startHold = (
+    e:
+      | React.TouchEvent<HTMLButtonElement>
+      | React.MouseEvent<Element, MouseEvent>
+  ) => {
+    e.preventDefault();
+
+    setMicBtnTooltip(t('write_and_speak.holdToSpeak') || 'Hold to record');
+
+    if (intervalRef.current) return;
+    intervalRef.current = setTimeout(() => {
+      stopAudio();
+      setMicBtnTooltip(
+        t('write_and_speak.releaseToEndListening') || 'Release to end listening'
+      );
+      startListening();
+    }, 300);
+  };
+
+  const stopHold = () => {
+    if (intervalRef.current) {
+      clearTimeout(intervalRef.current);
+      intervalRef.current = null;
+    }
+
+    stopListening();
+    setMicBtnTooltip(undefined);
+  };
+
+  useEffect(() => {
+    return () => stopHold();
+  }, []);
+
+  return (
+    <Tooltip
+      visible={!!micBtnTooltip}
+      content={
+        <span>
+          {micBtnTooltip ||
+            t('write_and_speak.pressAndHoldToSpeak') ||
+            'Press and hold to speak'}
+        </span>
+      }
+      align="topLeft"
+      className="memori-mic-btn-tooltip"
+    >
+      <Button
+        primary
+        className={cx('memori-chat-inputs--mic', {
+          'memori-chat-inputs--mic--listening': listening,
+        })}
+        title={
+          listening
+            ? t('write_and_speak.micButtonPopoverListening') || 'Listening'
+            : t('write_and_speak.micButtonPopover') || 'Start listening'
+        }
+        onMouseDown={startHold}
+        onTouchStart={startHold}
+        onMouseUp={stopHold}
+        onMouseLeave={stopHold}
+        onTouchEnd={stopHold}
+        shape="circle"
+        icon={<Microphone />}
+      />
+    </Tooltip>
+  );
+};
+
+export default MicrophoneButton;

package/src/components/SettingsDrawer/SettingsDrawer.stories.tsx

@@ -21,15 +21,17 @@ const meta: Meta = {
 export default meta;
 
 const Template: Story<Props> = args => {
-  const [continuousSpeech, setContinuousSpeech] = React.useState(false);
+  const [microphoneMode, setMicrophoneMode] = React.useState<
+    'HOLD_TO_TALK' | 'CONTINUOUS'
+  >('HOLD_TO_TALK');
   const [controlsPosition, setControlsPosition] = React.useState<
-    'bottom' | 'center' | 'hidden'
+    'bottom' | 'center'
   >('bottom');
   return (
     <SettingsDrawer
       {...args}
-      continuousSpeech={continuousSpeech}
-      setContinuousSpeech={setContinuousSpeech}
+      microphoneMode={microphoneMode}
+      setMicrophoneMode={setMicrophoneMode}
       controlsPosition={controlsPosition}
       setControlsPosition={setControlsPosition}
     />

package/src/components/SettingsDrawer/SettingsDrawer.test.tsx

@@ -16,9 +16,9 @@ it('renders SettingsDrawer unchanged', () => {
     <SettingsDrawer
       open={false}
       onClose={jest.fn()}
-      continuousSpeech={false}
+      microphoneMode="HOLD_TO_TALK"
+      setMicrophoneMode={jest.fn()}
       continuousSpeechTimeout={2}
-      setContinuousSpeech={jest.fn()}
       setContinuousSpeechTimeout={jest.fn()}
       controlsPosition="bottom"
       setControlsPosition={jest.fn()}
@@ -34,9 +34,9 @@ it('renders SettingsDrawer open unchanged', () => {
     <SettingsDrawer
       open={true}
       onClose={jest.fn()}
-      continuousSpeech={false}
+      microphoneMode="HOLD_TO_TALK"
+      setMicrophoneMode={jest.fn()}
       continuousSpeechTimeout={2}
-      setContinuousSpeech={jest.fn()}
       setContinuousSpeechTimeout={jest.fn()}
       controlsPosition="bottom"
       setControlsPosition={jest.fn()}
@@ -52,9 +52,9 @@ it('renders SettingsDrawer open with continuous speech enabled unchanged', () =>
     <SettingsDrawer
       open={true}
       onClose={jest.fn()}
-      continuousSpeech={true}
+      microphoneMode="CONTINUOUS"
+      setMicrophoneMode={jest.fn()}
       continuousSpeechTimeout={2}
-      setContinuousSpeech={jest.fn()}
       setContinuousSpeechTimeout={jest.fn()}
       controlsPosition="bottom"
       setControlsPosition={jest.fn()}
@@ -70,9 +70,9 @@ it('renders SettingsDrawer open with non-default continuous speech timeout uncha
     <SettingsDrawer
       open={true}
       onClose={jest.fn()}
-      continuousSpeech={false}
+      microphoneMode="CONTINUOUS"
+      setMicrophoneMode={jest.fn()}
       continuousSpeechTimeout={10}
-      setContinuousSpeech={jest.fn()}
       setContinuousSpeechTimeout={jest.fn()}
       controlsPosition="bottom"
       setControlsPosition={jest.fn()}
@@ -89,9 +89,9 @@ it('renders SettingsDrawer for totem layout open unchanged', () => {
       layout="TOTEM"
       open={true}
       onClose={jest.fn()}
-      continuousSpeech={false}
+      microphoneMode="HOLD_TO_TALK"
+      setMicrophoneMode={jest.fn()}
       continuousSpeechTimeout={2}
-      setContinuousSpeech={jest.fn()}
       setContinuousSpeechTimeout={jest.fn()}
       controlsPosition="bottom"
       setControlsPosition={jest.fn()}
@@ -108,9 +108,9 @@ it('renders SettingsDrawer for totem layout open with controls at center unchang
       layout="TOTEM"
       open={true}
       onClose={jest.fn()}
-      continuousSpeech={false}
+      microphoneMode="HOLD_TO_TALK"
+      setMicrophoneMode={jest.fn()}
       continuousSpeechTimeout={2}
-      setContinuousSpeech={jest.fn()}
       setContinuousSpeechTimeout={jest.fn()}
       controlsPosition="center"
       setControlsPosition={jest.fn()}
@@ -127,9 +127,9 @@ it('renders SettingsDrawer for totem layout with continuous speech and hide emis
       layout="TOTEM"
       open={true}
       onClose={jest.fn()}
-      continuousSpeech={true}
+      microphoneMode="HOLD_TO_TALK"
+      setMicrophoneMode={jest.fn()}
       continuousSpeechTimeout={2}
-      setContinuousSpeech={jest.fn()}
       setContinuousSpeechTimeout={jest.fn()}
       controlsPosition="bottom"
       setControlsPosition={jest.fn()}

package/src/components/SettingsDrawer/SettingsDrawer.tsx

@@ -11,9 +11,9 @@ export interface Props {
   open: boolean;
   layout?: 'FULLPAGE' | 'TOTEM' | 'DEFAULT';
   onClose: () => void;
-  continuousSpeech?: boolean;
+  microphoneMode?: 'HOLD_TO_TALK' | 'CONTINUOUS';
   continuousSpeechTimeout?: number;
-  setContinuousSpeech: (value: boolean) => void;
+  setMicrophoneMode: (value: 'HOLD_TO_TALK' | 'CONTINUOUS') => void;
   setContinuousSpeechTimeout: (value: number) => void;
   controlsPosition?: 'center' | 'bottom';
   setControlsPosition: (value: 'center' | 'bottom') => void;
@@ -27,9 +27,9 @@ const SettingsDrawer = ({
   open,
   layout = 'DEFAULT',
   onClose,
-  continuousSpeech,
+  microphoneMode = 'HOLD_TO_TALK',
   continuousSpeechTimeout,
-  setContinuousSpeech,
+  setMicrophoneMode,
   setContinuousSpeechTimeout,
   controlsPosition,
   setControlsPosition,
@@ -46,31 +46,63 @@ const SettingsDrawer = ({
       title={t('widget.settings') || 'Settings'}
       description={t('write_and_speak.settingsHeaderLabel')}
     >
-      <div className="memori-settings-drawer--field">
-        <Checkbox
-          label={t('write_and_speak.continuousSpeechLabel')}
-          name="continuousSpeech"
-          checked={continuousSpeech}
-          onChange={e => {
-            setContinuousSpeech(e.target.checked);
-            setLocalConfig('continuousSpeech', e.target.checked);
-          }}
-        />
-      </div>
-
-      <div className="memori-settings-drawer--field">
-        <Select
-          label={t('write_and_speak.secondsLabel') || 'Seconds'}
-          placeholder={t('write_and_speak.secondsLabel') || 'Seconds'}
-          options={silenceSeconds.map(s => ({ value: s, label: s }))}
-          value={continuousSpeechTimeout}
+      <div className="memori-settings-drawer--field controls">
+        <label htmlFor="#microphoneMode">
+          {t('write_and_speak.microphoneMode') || 'Microphone mode'}:
+        </label>
+        <RadioGroup
+          id="microphoneMode"
+          name="microphoneMode"
+          value={microphoneMode}
+          defaultValue={microphoneMode}
+          className="memori-settings-drawer--microphoneMode-radio"
           onChange={value => {
-            setContinuousSpeechTimeout(value);
-            setLocalConfig('continuousSpeechTimeout', value);
+            let micMode =
+              value === 'CONTINUOUS' ? 'CONTINUOUS' : 'HOLD_TO_TALK';
+
+            setMicrophoneMode(micMode as 'CONTINUOUS' | 'HOLD_TO_TALK');
+            setLocalConfig('microphoneMode', micMode);
           }}
-        />
+        >
+          <RadioGroup.Option
+            value="HOLD_TO_TALK"
+            className="memori-settings-drawer--microphoneMode-radio-button"
+          >
+            {({ checked }) => (
+              <Button primary={checked}>
+                {t('write_and_speak.holdToSpeak') || 'Hold to speak'}
+              </Button>
+            )}
+          </RadioGroup.Option>
+          <RadioGroup.Option
+            value="CONTINUOUS"
+            className="memori-settings-drawer--microphoneMode-radio-button"
+          >
+            {({ checked }) => (
+              <Button primary={checked}>
+                {t('write_and_speak.continuousSpeechLabel') ||
+                  'Continuous speech'}
+              </Button>
+            )}
+          </RadioGroup.Option>
+        </RadioGroup>
       </div>
 
+      {microphoneMode === 'CONTINUOUS' && (
+        <div className="memori-settings-drawer--field">
+          <Select
+            label={t('write_and_speak.secondsLabel') || 'Seconds'}
+            placeholder={t('write_and_speak.secondsLabel') || 'Seconds'}
+            options={silenceSeconds.map(s => ({ value: s, label: s }))}
+            value={continuousSpeechTimeout}
+            onChange={value => {
+              setContinuousSpeechTimeout(value);
+              setLocalConfig('continuousSpeechTimeout', value);
+            }}
+          />
+        </div>
+      )}
+
       {layout === 'TOTEM' && (
         <>
           <div className="memori-settings-drawer--field controls">

package/src/components/StartPanel/StartPanel.css

@@ -23,6 +23,7 @@
     padding: var(--memori-inner-content-pad, 0);
     border-radius: 10px;
     margin-top: 2rem;
+    -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
     background-color: var(--memori-inner-bg, transparent);
     color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
@@ -68,7 +69,6 @@
     box-shadow: 0 0 5px rgba(50, 50, 50, 0.3);
 }
 
-
 .memori--avatar img {
     width: 100%;
     height: 100%;

package/src/components/StartPanel/StartPanel.tsx

@@ -102,7 +102,7 @@ const StartPanel: React.FC<Props> = ({
         {!!gamificationLevel?.badge?.length && (
           <div className="memori--gamification-badge">
             <Tooltip
-              alignLeft
+              align="left"
               content={`${t('gamification.level')} ${
                 gamificationLevel.badge
               }, ${gamificationLevel.points} ${t('gamification.points')}`}
@@ -119,7 +119,7 @@ const StartPanel: React.FC<Props> = ({
         )}
         {!!memori.enableCompletions && (
           <div className="memori--completions-enabled">
-            <Tooltip alignLeft content={t('completionsEnabled')}>
+            <Tooltip align="left" content={t('completionsEnabled')}>
               <span aria-label={t('completionsEnabled') || 'Completions'}>
                 <AI />
               </span>
@@ -128,7 +128,7 @@ const StartPanel: React.FC<Props> = ({
         )}
         {!!memori.nsfw && (
           <div className="memori--nsfw">
-            <Tooltip alignLeft content={t('nsfw')}>
+            <Tooltip align="left" content={t('nsfw')}>
               <span title={t('nsfw') || 'NSFW'}>🔞</span>
             </Tooltip>
           </div>

package/src/components/layouts/__snapshots__/FullPage.test.tsx.snap

@@ -71,7 +71,7 @@ exports[`renders FullPage layout unchanged 1`] = `
           </button>
         </div>
         <button
-          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button"
+          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-settings"
           title="widget.settings"
         >
           <span

package/src/components/layouts/__snapshots__/Totem.test.tsx.snap

@@ -124,7 +124,7 @@ exports[`renders Totem layout unchanged 1`] = `
             </button>
           </div>
           <button
-            class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button"
+            class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-settings"
             title="widget.settings"
           >
             <span