@memori.ai/memori-react 2.1.0 → 2.2.1

package/src/components/layouts/totem.css

@@ -10,8 +10,6 @@
     display: flex;
     height: 100%;
     flex-direction: column;
-
-    /* --memori-text-color: #fff; */
 }
 
 .memori-totem-layout--header {
@@ -31,6 +29,22 @@
     width: 100%;
 }
 
+.memori-totem-layout--avatar .memori--blob-container {
+    display: block;
+}
+
+@media (max-width: 480px) {
+    .memori-totem-layout--avatar .memori--blob-container {
+        display: block;
+    }
+}
+
+@media (max-width: 870px) {
+    .memori-totem-layout--avatar .memori--blob-container {
+        display: block;
+    }
+}
+
 .memori-totem-layout .memori-header {
     position: relative;
     z-index: 100;
@@ -97,6 +111,27 @@
     margin: 0 auto;
 }
 
+@media (max-width: 870px) {
+    .memori-totem-layout--controls .memori--start-panel,
+    .memori-totem-layout--controls .memori-chat--wrapper {
+        width: 100%;
+    }
+
+    .memori-totem-layout--controls .memori-chat--wrapper {
+        padding: 0;
+    }
+}
+
+@media (max-width: 480px) {
+    .memori-send-on-enter-menu {
+        display: none;
+    }
+
+    .memori-header--button-settings {
+        display: none;
+    }
+}
+
 .memori-totem-layout .memori--avatar-toggle {
     display: none;
     width: 100%;
@@ -113,14 +148,20 @@
     background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(200, 200, 200, 0.8));
 }
 
-.memori-widget.memori-controls-center .memori-totem-layout--controls {
-    position: absolute;
-    top: 40%;
-    width: 100%;
+@media (min-width: 481px) {
+    .memori-widget.memori-controls-center .memori-totem-layout--controls {
+        position: absolute;
+        top: 40%;
+        width: 100%;
+    }
 }
 
-.memori-widget.memori-layout-totem.memori--hide-emissions .memori-totem-layout--controls .memori-chat--bubble-container:not(.memori-chat--bubble-from-user),
-.memori-widget.memori-layout-totem.memori--hide-emissions.memori--with-speechkey .memori-totem-layout--controls .memori-chat--bubble-container:not(.memori-chat--bubble-from-user) {
+.memori-widget.memori-layout-totem.memori--hide-emissions
+    .memori-totem-layout--controls
+    .memori-chat--bubble-container:not(.memori-chat--bubble-from-user),
+.memori-widget.memori-layout-totem.memori--hide-emissions.memori--with-speechkey
+    .memori-totem-layout--controls
+    .memori-chat--bubble-container:not(.memori-chat--bubble-from-user) {
     display: none;
 }
 

package/src/components/ui/Button.css

@@ -118,7 +118,7 @@
     line-height: 1;
 }
 
-.memori-button--icon svg[fill="none"] {
+.memori-button--icon svg[fill='none'] {
     fill: none;
 }
 

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/Checkbox.css

@@ -1,5 +1,3 @@
-
-
 .memori-checkbox {
     display: inline-flex;
     box-sizing: border-box;

package/src/components/ui/Drawer.css

@@ -123,7 +123,7 @@
     background-color: #fff;
 }
 
-.memori-drawer--footer button+button {
+.memori-drawer--footer button + button {
     margin-left: 0.5em;
 }
 

package/src/components/ui/Modal.css

@@ -54,7 +54,7 @@
     margin-top: 1.5rem;
 }
 
-.memori-modal--footer button+button {
+.memori-modal--footer button + button {
     margin-left: 0.5em;
 }
 

package/src/components/ui/Select.css

@@ -7,14 +7,15 @@
     position: relative;
     width: 100%;
     min-height: 38px;
-    padding-top: .5rem;
+    padding-top: 0.5rem;
     padding-right: 2.5rem;
-    padding-bottom: .5rem;
-    padding-left: .75rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.75rem;
     border: 1px solid #e5e7eb;
-    border-radius: .5rem;
+    border-radius: 0.5rem;
     background: #fff;
-    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
+    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
+        rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
     cursor: pointer;
     text-align: left;
 }
@@ -46,7 +47,7 @@
 
 @media (min-width: 640px) {
     .memori-select--button {
-        font-size: .875rem;
+        font-size: 0.875rem;
         line-height: 1.25rem;
     }
 }
@@ -74,7 +75,7 @@
     bottom: 0;
     display: flex;
     align-items: center;
-    padding-right: .5rem;
+    padding-right: 0.5rem;
     pointer-events: none;
 }
 
@@ -91,32 +92,33 @@ ul.memori-select--options {
     width: 100%;
     max-width: min(18rem, 30%);
     max-height: 15rem;
-    padding-top: .25rem;
+    padding-top: 0.25rem;
     padding-right: 0;
-    padding-bottom: .25rem;
+    padding-bottom: 0.25rem;
     padding-left: 0;
-    border-radius: .375rem;
-    margin-top: .25rem;
+    border-radius: 0.375rem;
+    margin-top: 0.25rem;
     margin-right: 0;
     margin-bottom: 0;
     margin-left: 0;
     background: #fff;
-    box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
+    box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px,
+        rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
     list-style: none;
 }
 
 @media (min-width: 640px) {
     .memori-select--options {
-        font-size: .875rem;
+        font-size: 0.875rem;
         line-height: 1.25rem;
     }
 }
 
 li.memori-select--option {
     position: relative;
-    padding-top: .5rem;
+    padding-top: 0.5rem;
     padding-right: 1rem;
-    padding-bottom: .5rem;
+    padding-bottom: 0.5rem;
     padding-left: 1rem;
     color: rgb(17 24 39/1);
     cursor: pointer;
@@ -132,4 +134,3 @@ li.memori-select--option:focus {
     outline: 2px solid #63b3ed;
     outline-offset: 2px;
 }
-

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;
@@ -38,10 +41,10 @@
     border: 10px solid rgba(0, 0, 0, 0.8);
     border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
     margin-left: -5px;
-    content: "";
+    content: '';
     opacity: 0;
     transform: translateY(-50%);
-    transition: .3s;
+    transition: 0.3s;
 }
 
 .memori-tooltip.memori-tooltip--align-left .memori-tooltip--content::before {
@@ -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,29 @@
     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;

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>

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

@@ -1,9 +1,85 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders Tooltip aligned left unchanged 1`] = `
+<div>
+  <div
+    class="memori-tooltip memori-tooltip--align-left memori-tooltip--visible"
+  >
+    <div
+      class="memori-tooltip--content"
+    >
+      Here is some tooltip content by default as I am controlled
+    </div>
+    <div
+      class="memori-tooltip--trigger"
+    >
+      Hover me
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Tooltip aligned right unchanged 1`] = `
+<div>
+  <div
+    class="memori-tooltip memori-tooltip--align-right memori-tooltip--visible"
+  >
+    <div
+      class="memori-tooltip--content"
+    >
+      Here is some tooltip content by default as I am controlled
+    </div>
+    <div
+      class="memori-tooltip--trigger"
+    >
+      Hover me
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Tooltip aligned top left unchanged 1`] = `
+<div>
+  <div
+    class="memori-tooltip memori-tooltip--align-topLeft memori-tooltip--visible"
+  >
+    <div
+      class="memori-tooltip--content"
+    >
+      Here is some tooltip content by default as I am controlled
+    </div>
+    <div
+      class="memori-tooltip--trigger"
+    >
+      Hover me
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Tooltip aligned top right unchanged 1`] = `
+<div>
+  <div
+    class="memori-tooltip memori-tooltip--align-topRight memori-tooltip--visible"
+  >
+    <div
+      class="memori-tooltip--content"
+    >
+      Here is some tooltip content by default as I am controlled
+    </div>
+    <div
+      class="memori-tooltip--trigger"
+    >
+      Hover me
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders Tooltip disabled unchanged 1`] = `
 <div>
   <div
-    class="memori-tooltip memori-tooltip--disabled"
+    class="memori-tooltip memori-tooltip--align-right memori-tooltip--disabled"
   >
     <div
       class="memori-tooltip--content"
@@ -22,7 +98,7 @@ exports[`renders Tooltip disabled unchanged 1`] = `
 exports[`renders Tooltip unchanged 1`] = `
 <div>
   <div
-    class="memori-tooltip"
+    class="memori-tooltip memori-tooltip--align-right"
   >
     <div
       class="memori-tooltip--content"
@@ -41,7 +117,7 @@ exports[`renders Tooltip unchanged 1`] = `
 exports[`renders Tooltip visible unchanged 1`] = `
 <div>
   <div
-    class="memori-tooltip memori-tooltip--visible"
+    class="memori-tooltip memori-tooltip--align-right memori-tooltip--visible"
   >
     <div
       class="memori-tooltip--content"
@@ -60,7 +136,7 @@ exports[`renders Tooltip visible unchanged 1`] = `
 exports[`renders Tooltip with jsx content unchanged 1`] = `
 <div>
   <div
-    class="memori-tooltip"
+    class="memori-tooltip memori-tooltip--align-right"
   >
     <div
       class="memori-tooltip--content"

package/src/helpers/configuration.ts

@@ -1,6 +1,6 @@
 export const keys: { [key: string]: string } = {
   muteSpeaker: '@memori:muteSpeaker',
-  continuousSpeech: '@memori:continuousSpeech',
+  microphoneMode: '@memori:microphoneMode',
   continuousSpeechTimeout: '@memori:continuousSpeechTimeout',
   sendOnEnter: '@memori:sendOnEnter',
   birthDate: '@memori:birthDate',

package/src/helpers/translations.ts

@@ -23,8 +23,9 @@ export const getTranslation = async (
   const isReservedKeyword = dialogKeywords.indexOf(text.toLowerCase()) > -1;
   const fromLanguage = isReservedKeyword ? 'IT' : from?.toUpperCase();
   const deeplResult = await fetch(
-    `${baseUrl ||
-      'https://app.twincreator.com'}/api/translate?text=${encodeURIComponent(
+    `${
+      baseUrl || 'https://app.twincreator.com'
+    }/api/translate?text=${encodeURIComponent(
       text
     )}&target_lang=${to.toUpperCase()}${
       fromLanguage ? `&source_lang=${fromLanguage}` : ''

package/src/locales/en.json

@@ -70,6 +70,10 @@
     "conversationStartedLabel": "Conversation started on",
     "settingsHeaderLabel": "Setup here if you want to set the memori as continuous speech, and change the silence seconds if you want to customize them.",
     "continuousSpeechLabel": "Continuous speech",
+    "holdToSpeak": "Hold to speak",
+    "releaseToEndListening": "Release to end listening",
+    "pressAndHoldToSpeak": "Press and hold to speak",
+    "microphoneMode": "Microphone mode",
     "hideEmissionsLabel": "Hide text emitted by the Twin",
     "secondsLabel": "Set seconds",
     "controlsPosition": "Controls position",

package/src/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/src/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,