@memori.ai/memori-react 2.1.0 → 2.2.1

package/esm/locales/it.json

@@ -70,6 +70,10 @@
         "conversationStartedLabel": "Conversazione avvenuta il",
         "settingsHeaderLabel": "Configura qui il memori se vuoi impostare una conversazione continua. Setta i secondi di silenzio prima dell'invio.",
         "continuousSpeechLabel": "Conversazione continua",
+        "holdToSpeak": "Tieni premuto per parlare",
+        "releaseToEndListening": "Rilascia per smettere di parlare",
+        "pressAndHoldToSpeak": "Premi e tieni premuto per parlare",
+        "microphoneMode": "Modalità microfono",
         "hideEmissionsLabel": "Nascondi testo emesso dal Twin",
         "secondsLabel": "Secondi",
         "controlsPosition": "Posizione dei controlli",

package/esm/styles.css

@@ -17,6 +17,7 @@
 @import url('./components/Chat/Chat.css');
 @import url('./components/ChatBubble/ChatBubble.css');
 @import url('./components/ChatInputs/ChatInputs.css');
+@import url('./components/MicrophoneButton/MicrophoneButton.css');
 @import url('./components/ChatTextArea/ChatTextArea.css');
 @import url('./components/CustomGLBModelViewer/ModelViewer.css');
 @import url('./components/SettingsDrawer/SettingsDrawer.css');
@@ -55,7 +56,7 @@
 
 memori-client,
 memori-client #root,
-memori-client + #headlessui-portal-root,
+memori-client ~ #headlessui-portal-root,
 body.sb-show-main #root,
 body.sb-show-main #headlessui-portal-root,
 #storybook-root,

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.1.0",
+  "version": "2.2.1",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",

package/src/components/Avatar/Avatar.css

@@ -61,7 +61,6 @@
 }
 
 @media (max-width: 870px) {
-
     .memori--avatar-wrapper div,
     .memori--avatar-wrapper canvas,
     .memori--avatar-wrapper model-viewer {

package/src/components/Blob/Blob.css

@@ -93,20 +93,25 @@
         filter: brightness(1);
         transform: scale(1);
     }
+
     15% {
         filter: brightness(1.1);
     }
+
     30% {
         filter: brightness(1);
         transform: scale(0.99);
     }
+
     50% {
         filter: brightness(1.05);
         transform: scale(1.01);
     }
+
     75% {
         filter: brightness(1.15);
     }
+
     100% {
         filter: brightness(1.1);
         transform: scale(0.99);
@@ -140,7 +145,7 @@
     object-fit: contain;
 }
 
-.memori-blob figure~.mainDiv {
+.memori-blob figure ~ .mainDiv {
     opacity: 0.2;
 }
 

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

@@ -3,7 +3,7 @@
 exports[`renders BlockedMemoriBadge unchanged 1`] = `
 <div>
   <div
-    class="memori-tooltip blocked-memori-badge--tooltip"
+    class="memori-tooltip memori-tooltip--align-right blocked-memori-badge--tooltip"
   >
     <div
       class="memori-tooltip--content"
@@ -41,7 +41,7 @@ exports[`renders BlockedMemoriBadge unchanged 1`] = `
 exports[`renders BlockedMemoriBadge with giver info unchanged 1`] = `
 <div>
   <div
-    class="memori-tooltip blocked-memori-badge--tooltip"
+    class="memori-tooltip memori-tooltip--align-right blocked-memori-badge--tooltip"
   >
     <div
       class="memori-tooltip--content"
@@ -83,7 +83,7 @@ memoriBlockedGiverHelper
 exports[`renders BlockedMemoriBadge with margin left unchanged 1`] = `
 <div>
   <div
-    class="memori-tooltip blocked-memori-badge--tooltip"
+    class="memori-tooltip memori-tooltip--align-right blocked-memori-badge--tooltip"
   >
     <div
       class="memori-tooltip--content"
@@ -121,7 +121,7 @@ exports[`renders BlockedMemoriBadge with margin left unchanged 1`] = `
 exports[`renders BlockedMemoriBadge with title unchanged 1`] = `
 <div>
   <div
-    class="memori-tooltip blocked-memori-badge--tooltip"
+    class="memori-tooltip memori-tooltip--align-right blocked-memori-badge--tooltip"
   >
     <div
       class="memori-tooltip--content"

package/src/components/ChangeMode/ChangeMode.css

@@ -17,6 +17,6 @@
     border-top-left-radius: 0;
 }
 
-.memori--changeMode-instruct-radio-button[data-headlessui-state="checked"] button {
+.memori--changeMode-instruct-radio-button[data-headlessui-state='checked'] button {
     font-weight: 600;
 }

package/src/components/Chat/Chat.css

@@ -12,6 +12,7 @@
     padding: calc(var(--memori-inner-content-pad) / 4) calc(var(--memori-inner-content-pad) / 2);
     border-radius: 10px;
     margin: 1rem 0;
+    -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
     background-color: var(--memori-inner-bg);
 }
@@ -48,7 +49,7 @@
     border-top-right-radius: 3px;
 }
 
-.memori-chat--cover+.memori-chat--bubble-initial {
+.memori-chat--cover + .memori-chat--bubble-initial {
     display: none;
 }
 
@@ -102,7 +103,7 @@
     white-space: nowrap;
 }
 
-.memori-chat--context-tag+.memori-chat--context-tag {
+.memori-chat--context-tag + .memori-chat--context-tag {
     margin-top: 0.5rem;
 }
 

package/src/components/Chat/Chat.tsx

@@ -34,6 +34,7 @@ export interface Props {
   client: ReturnType<typeof memoriApiClient>;
   selectReceiverTag: (tag: string) => Promise<void>;
   preview?: boolean;
+  microphoneMode?: 'CONTINUOUS' | 'HOLD_TO_TALK';
   sendOnEnter?: 'keypress' | 'click';
   setSendOnEnter: (sendOnEnter: 'keypress' | 'click') => void;
   attachmentsMenuOpen?: 'link' | 'media';
@@ -72,6 +73,7 @@ const Chat: React.FC<Props> = ({
   instruct = false,
   showInputs = true,
   showMicrophone = false,
+  microphoneMode = 'HOLD_TO_TALK',
   sendOnEnter,
   setSendOnEnter,
   attachmentsMenuOpen,
@@ -309,6 +311,7 @@ const Chat: React.FC<Props> = ({
           instruct={instruct}
           authToken={authToken}
           sendMessage={sendMessage}
+          microphoneMode={microphoneMode}
           sendOnEnter={sendOnEnter}
           setSendOnEnter={setSendOnEnter}
           attachmentsMenuOpen={attachmentsMenuOpen}

package/src/components/ChatBubble/ChatBubble.css

@@ -64,7 +64,7 @@
     margin-bottom: 0;
 }
 
-.memori-chat--bubble p+p {
+.memori-chat--bubble p + p {
     margin-top: 0.5em;
 }
 

package/src/components/ChatBubble/ChatBubble.tsx

@@ -138,7 +138,7 @@ const ChatBubble: React.FC<Props> = ({
 
               {message.generatedByAI && showAIicon && (
                 <Tooltip
-                  alignLeft
+                  align="left"
                   content={t('generatedByAI')}
                   className="memori-chat--bubble-ai-icon"
                 >

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

@@ -74,7 +74,7 @@ exports[`renders ChatBubble with msg generated by AI unchanged 1`] = `
         class="memori-chat--bubble-addon"
       >
         <div
-          class="memori-tooltip memori-chat--bubble-ai-icon memori-tooltip--align-left"
+          class="memori-tooltip memori-tooltip--align-left memori-chat--bubble-ai-icon"
         >
           <div
             class="memori-tooltip--content"

package/src/components/ChatInputs/ChatInputs.css

@@ -11,7 +11,7 @@
     margin: 0;
 }
 
-.memori-chat-inputs .memori-upload-menu+.memori-send-on-enter-menu {
+.memori-chat-inputs .memori-upload-menu + .memori-send-on-enter-menu {
     margin-left: 0.33rem;
 }
 
@@ -19,43 +19,3 @@
     background: #fff;
     color: #000;
 }
-
-.memori-chat-inputs--mic {
-    z-index: 1;
-    margin-left: 0.33rem;
-}
-
-.memori-chat-inputs--mic svg {
-    color: var(--memori-primary-text, #fff);
-    font-size: 1em;
-}
-
-.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;
-}
-
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening {
-    color: red !important;
-}
-
-.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/ChatInputs/ChatInputs.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Meta, Story } from '@storybook/react';
 import ChatInputs, { Props } from './ChatInputs';
 import { dialogState } from '../../mocks/data';
@@ -22,13 +22,40 @@ const meta: Meta = {
 
 export default meta;
 
+const text =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    .split(' ')
+    .reverse();
+
 const Template: Story<Props> = args => {
   const [userMessage, setUserMessage] = React.useState(args.userMessage);
+  const [listening, setListening] = React.useState(args.listening);
+  const startListening = () => setListening(true);
+  const stopListening = () => setListening(false);
+
+  useEffect(() => {
+    if (listening) {
+      const interval = setInterval(() => {
+        let nextWord = text.pop();
+
+        if (!nextWord) {
+          clearInterval(interval);
+          return;
+        }
+
+        setUserMessage(prev => `${prev || ''}${prev ? ' ' : ''}${nextWord}`);
+      }, Math.random() * 500 + 100);
+      return () => clearInterval(interval);
+    }
+  }, [listening]);
 
   return (
     <div style={{ paddingTop: '10rem' }}>
       <ChatInputs
         {...args}
+        listening={listening}
+        startListening={startListening}
+        stopListening={stopListening}
         userMessage={userMessage}
         onChangeUserMessage={setUserMessage}
       />
@@ -159,8 +186,27 @@ Disabled.args = {
   showMicrophone: true,
 };
 
-export const Listening = Template.bind({});
-Listening.args = {
+export const ContinuousSpeech = Template.bind({});
+ContinuousSpeech.args = {
+  dialogState,
+  userMessage: 'Suspendisse sit amet volutpat velit.',
+  sendMessage: (msg: string) => console.log(msg),
+  onTextareaBlur: () => {},
+  onTextareaFocus: () => {},
+  onTextareaPressEnter: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+  listening: false,
+  isPlayingAudio: false,
+  stopAudio: () => {},
+  startListening: () => {},
+  stopListening: () => {},
+  showMicrophone: true,
+  microphoneMode: 'CONTINUOUS',
+};
+
+export const ContinuousSpeechListening = Template.bind({});
+ContinuousSpeechListening.args = {
   dialogState,
   userMessage: 'Suspendisse sit amet volutpat velit.',
   sendMessage: (msg: string) => console.log(msg),
@@ -175,6 +221,7 @@ Listening.args = {
   startListening: () => {},
   stopListening: () => {},
   showMicrophone: true,
+  microphoneMode: 'CONTINUOUS',
 };
 
 export const WithoutMicrophone = Template.bind({});

package/src/components/ChatInputs/ChatInputs.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { DialogState } from '@memori.ai/memori-api-client/dist/types';
 import UploadMenu from '../UploadMenu/UploadMenu';
 import SendOnEnterMenu from '../SendOnEnterMenu/SendOnEnterMenu';
 import ChatTextArea from '../ChatTextArea/ChatTextArea';
 import Button from '../ui/Button';
 import { useTranslation } from 'react-i18next';
-import cx from 'classnames';
 import Send from '../icons/Send';
+import MicrophoneButton from '../MicrophoneButton/MicrophoneButton';
+import cx from 'classnames';
 import Microphone from '../icons/Microphone';
 
 export interface Props {
@@ -28,6 +29,7 @@ export interface Props {
   startListening: () => void;
   stopListening: () => void;
   showMicrophone?: boolean;
+  microphoneMode?: 'CONTINUOUS' | 'HOLD_TO_TALK';
   authToken?: string;
 }
 
@@ -45,6 +47,7 @@ const ChatInputs: React.FC<Props> = ({
   onTextareaBlur,
   onTextareaPressEnter,
   showMicrophone = false,
+  microphoneMode = 'HOLD_TO_TALK',
   listening = false,
   stopAudio,
   startListening,
@@ -94,7 +97,21 @@ const ChatInputs: React.FC<Props> = ({
         title={t('send') || 'Send'}
         icon={<Send />}
       />
-      {showMicrophone && (
+      {showMicrophone && microphoneMode === 'HOLD_TO_TALK' && (
+        <MicrophoneButton
+          listening={listening}
+          startListening={startListening}
+          stopListening={() => {
+            stopListening();
+
+            if (!!userMessage?.length) {
+              sendMessage(userMessage);
+            }
+          }}
+          stopAudio={stopAudio}
+        />
+      )}
+      {showMicrophone && microphoneMode === 'CONTINUOUS' && (
         <Button
           primary
           className={cx('memori-chat-inputs--mic', {