@memori.ai/memori-react 2.1.0 → 2.2.0

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', {

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

@@ -88,26 +88,41 @@ exports[`renders ChatInputs disabled unchanged 1`] = `
         </svg>
       </span>
     </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
-      title="write_and_speak.micButtonPopover"
+    <div
+      class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
     >
-      <span
-        class="memori-button--icon"
+      <div
+        class="memori-tooltip--content"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span>
+          write_and_speak.pressAndHoldToSpeak
+        </span>
+      </div>
+      <div
+        class="memori-tooltip--trigger"
+      >
+        <button
+          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
+          title="write_and_speak.micButtonPopover"
         >
-          <path
-            d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
-          />
-        </svg>
-      </span>
-    </button>
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
   </fieldset>
 </div>
 `;
@@ -198,26 +213,41 @@ exports[`renders ChatInputs listening unchanged 1`] = `
         </svg>
       </span>
     </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic memori-chat-inputs--mic--listening"
-      title="write_and_speak.micButtonPopoverListening"
+    <div
+      class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
     >
-      <span
-        class="memori-button--icon"
+      <div
+        class="memori-tooltip--content"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span>
+          write_and_speak.pressAndHoldToSpeak
+        </span>
+      </div>
+      <div
+        class="memori-tooltip--trigger"
+      >
+        <button
+          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic memori-chat-inputs--mic--listening"
+          title="write_and_speak.micButtonPopoverListening"
         >
-          <path
-            d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
-          />
-        </svg>
-      </span>
-    </button>
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
   </fieldset>
 </div>
 `;
@@ -337,26 +367,41 @@ exports[`renders ChatInputs on instruct unchanged 1`] = `
         </svg>
       </span>
     </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
-      title="write_and_speak.micButtonPopover"
+    <div
+      class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
     >
-      <span
-        class="memori-button--icon"
+      <div
+        class="memori-tooltip--content"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span>
+          write_and_speak.pressAndHoldToSpeak
+        </span>
+      </div>
+      <div
+        class="memori-tooltip--trigger"
+      >
+        <button
+          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
+          title="write_and_speak.micButtonPopover"
         >
-          <path
-            d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
-          />
-        </svg>
-      </span>
-    </button>
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
   </fieldset>
 </div>
 `;
@@ -446,26 +491,41 @@ exports[`renders ChatInputs unchanged 1`] = `
         </svg>
       </span>
     </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
-      title="write_and_speak.micButtonPopover"
+    <div
+      class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
     >
-      <span
-        class="memori-button--icon"
+      <div
+        class="memori-tooltip--content"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span>
+          write_and_speak.pressAndHoldToSpeak
+        </span>
+      </div>
+      <div
+        class="memori-tooltip--trigger"
+      >
+        <button
+          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
+          title="write_and_speak.micButtonPopover"
         >
-          <path
-            d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
-          />
-        </svg>
-      </span>
-    </button>
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
   </fieldset>
 </div>
 `;
@@ -556,26 +616,41 @@ exports[`renders ChatInputs with user message unchanged 1`] = `
         </svg>
       </span>
     </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
-      title="write_and_speak.micButtonPopover"
+    <div
+      class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
     >
-      <span
-        class="memori-button--icon"
+      <div
+        class="memori-tooltip--content"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span>
+          write_and_speak.pressAndHoldToSpeak
+        </span>
+      </div>
+      <div
+        class="memori-tooltip--trigger"
+      >
+        <button
+          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
+          title="write_and_speak.micButtonPopover"
         >
-          <path
-            d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
-          />
-        </svg>
-      </span>
-    </button>
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
   </fieldset>
 </div>
 `;

package/src/components/FeedbackButtons/FeedbackButtons.tsx

@@ -122,7 +122,7 @@ const FeedbackButtons = ({
           </Transition>
         </Menu>
       ) : (
-        <Tooltip alignLeft content="Feedback">
+        <Tooltip align="left" content="Feedback">
           <Button
             title="Feedback"
             onClick={() => {

package/src/components/Header/Header.stories.tsx

@@ -46,6 +46,9 @@ const Template: Story<Props> = args => {
         continuousSpeechTimeout={continuousSpeechTimeout}
         setContinuousSpeech={setContinuousSpeech}
         setContinuousSpeechTimeout={setContinuousSpeechTimeout}
+        setControlsPosition={() => {}}
+        controlsPosition="bottom"
+        setHideEmissions={() => {}}
       />
     </>
   );

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,101 @@
+.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: () => {},
+};