@memori.ai/memori-react 2.1.0 → 2.2.0

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.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/ui/Button.tsx

@@ -23,7 +23,19 @@ export interface Props {
   id?: string;
   htmlType?: 'button' | 'submit' | 'reset';
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  onTouchEnd?: (event: React.TouchEvent<HTMLButtonElement>) => void;
+  onMouseDown?: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void;
+  onMouseUp?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onMouseLeave?: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void;
+  onTouchStart?: (
+    event: React.TouchEvent<HTMLButtonElement> | React.MouseEvent
+  ) => void;
+  onTouchEnd?: (
+    event: React.TouchEvent<HTMLButtonElement> | React.MouseEvent
+  ) => void;
 }
 
 const Button: FC<Props> = ({
@@ -42,6 +54,10 @@ const Button: FC<Props> = ({
   id,
   htmlType,
   onClick,
+  onMouseDown,
+  onMouseUp,
+  onMouseLeave,
+  onTouchStart,
   onTouchEnd,
   children,
 }) => (
@@ -49,6 +65,10 @@ const Button: FC<Props> = ({
     id={id}
     type={htmlType}
     onClick={onClick}
+    onMouseDown={onMouseDown}
+    onMouseUp={onMouseUp}
+    onMouseLeave={onMouseLeave}
+    onTouchStart={onTouchStart}
     onTouchEnd={onTouchEnd}
     title={title}
     disabled={loading || disabled}

package/src/components/ui/Tooltip.css

@@ -1,3 +1,5 @@
+/* stylelint-disable no-descending-specificity */
+
 .memori-tooltip {
     position: relative;
     display: inline-block;
@@ -23,7 +25,8 @@
     transition: 0.3s 0.1s all ease;
 }
 
-.memori-tooltip.memori-tooltip--align-left .memori-tooltip--content {
+.memori-tooltip.memori-tooltip--align-left .memori-tooltip--content,
+.memori-tooltip.memori-tooltip--align-topLeft .memori-tooltip--content {
     right: 100%;
     left: initial;
     margin: initial;
@@ -52,6 +55,15 @@
     margin-left: 0;
 }
 
+.memori-tooltip.memori-tooltip--align-topRight .memori-tooltip--content::before {
+    top: 100%;
+    right: auto;
+    left: 10px;
+    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
+    margin-top: 10px;
+    margin-left: 5px;
+}
+
 .memori-tooltip:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content,
 .memori-tooltip:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content::before {
     display: block;
@@ -69,6 +81,25 @@
     opacity: 1;
 }
 
+.memori-tooltip.memori-tooltip--align-topRight:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content,
+.memori-tooltip.memori-tooltip--align-topRight:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover .memori-tooltip--content {
+    transform: translateY(-150%) translateX(-33%);
+}
+
+.memori-tooltip.memori-tooltip--align-topLeft .memori-tooltip--content::before {
+    top: 100%;
+    right: 10px;
+    left: auto;
+    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
+    margin-top: 10px;
+    margin-left: 5px;
+}
+
+.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content,
+.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover .memori-tooltip--content {
+    transform: translateY(-150%) translateX(33%);
+}
+
 .memori-tooltip:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content a,
 .memori-tooltip:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover .memori-tooltip--content a {
     color: #fff;
@@ -77,4 +108,4 @@
 
 .memori-tooltip.memori-tooltip--disabled {
     cursor: not-allowed;
-}
+}

package/src/components/ui/Tooltip.stories.tsx

@@ -20,9 +20,21 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => <Tooltip {...args} />;
+const Template: Story<Props> = args => (
+  <div
+    style={{
+      display: 'flex',
+      justifyContent: 'flex-start',
+      paddingTop: '10rem',
+    }}
+  >
+    <Tooltip {...args} />
+  </div>
+);
 const TemplateRight: Story<Props> = args => (
-  <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+  <div
+    style={{ display: 'flex', justifyContent: 'flex-end', paddingTop: '10rem' }}
+  >
     <Tooltip {...args} />
   </div>
 );
@@ -68,5 +80,30 @@ export const AlignLeft = TemplateRight.bind({});
 AlignLeft.args = {
   content: 'Here is some tooltip content',
   children: <span>Hover me</span>,
-  alignLeft: true,
+  align: 'left',
+  visible: true,
+};
+
+export const AlignRight = Template.bind({});
+AlignRight.args = {
+  content: 'Here is some tooltip content',
+  children: <span>Hover me</span>,
+  align: 'right',
+  visible: true,
+};
+
+export const AlignTopLeft = TemplateRight.bind({});
+AlignTopLeft.args = {
+  content: 'Here is some tooltip content',
+  children: <span>Hover me</span>,
+  align: 'topLeft',
+  visible: true,
+};
+
+export const AlignTopRight = Template.bind({});
+AlignTopRight.args = {
+  content: 'Here is some tooltip content',
+  children: <span>Hover me</span>,
+  align: 'topRight',
+  visible: true,
 };

package/src/components/ui/Tooltip.test.tsx

@@ -48,3 +48,55 @@ it('renders Tooltip visible unchanged', () => {
   );
   expect(container).toMatchSnapshot();
 });
+
+it('renders Tooltip aligned left unchanged', () => {
+  const { container } = render(
+    <Tooltip
+      content="Here is some tooltip content by default as I am controlled"
+      visible
+      align="left"
+    >
+      Hover me
+    </Tooltip>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Tooltip aligned top left unchanged', () => {
+  const { container } = render(
+    <Tooltip
+      content="Here is some tooltip content by default as I am controlled"
+      visible
+      align="topLeft"
+    >
+      Hover me
+    </Tooltip>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Tooltip aligned right unchanged', () => {
+  const { container } = render(
+    <Tooltip
+      content="Here is some tooltip content by default as I am controlled"
+      visible
+      align="right"
+    >
+      Hover me
+    </Tooltip>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Tooltip aligned top right unchanged', () => {
+  const { container } = render(
+    <Tooltip
+      content="Here is some tooltip content by default as I am controlled"
+      visible
+      align="topRight"
+    >
+      Hover me
+    </Tooltip>
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/ui/Tooltip.tsx

@@ -4,7 +4,8 @@ import cx from 'classnames';
 export interface Props {
   content: string | JSX.Element | React.ReactNode;
   className?: string;
-  alignLeft?: boolean;
+  align?: 'left' | 'right' | 'topLeft' | 'topRight';
+  alignTop?: boolean;
   disabled?: boolean;
   children: React.ReactNode;
   visible?: boolean;
@@ -13,17 +14,21 @@ export interface Props {
 const Tooltip: FC<Props> = ({
   content,
   className,
-  alignLeft = false,
+  align = 'right',
   disabled = false,
   visible = false,
   children,
 }) => (
   <div
-    className={cx('memori-tooltip', className, {
-      'memori-tooltip--align-left': alignLeft,
-      'memori-tooltip--disabled': disabled,
-      'memori-tooltip--visible': visible,
-    })}
+    className={cx(
+      'memori-tooltip',
+      `memori-tooltip--align-${align}`,
+      className,
+      {
+        'memori-tooltip--disabled': disabled,
+        'memori-tooltip--visible': visible,
+      }
+    )}
   >
     <div className="memori-tooltip--content">{content}</div>
     <div className="memori-tooltip--trigger">{children}</div>