@memori.ai/memori-react 2.0.11 → 2.2.0

package/src/components/layouts/Totem.tsx

@@ -1,22 +1,8 @@
 import React from 'react';
 import Spin from '../ui/Spin';
+import { LayoutProps } from '../MemoriWidget/MemoriWidget';
 
-export interface Props {
-  header?: JSX.Element | null;
-  avatar: JSX.Element;
-  chat?: JSX.Element | null;
-  startPanel: JSX.Element;
-  integrationStyle?: JSX.Element | null;
-  integrationBackground?: JSX.Element | null;
-  changeMode?: JSX.Element | null;
-  poweredBy?: JSX.Element | null;
-  sessionId?: string;
-  hasUserActivatedSpeak?: boolean;
-  showInstruct?: boolean;
-  loading?: boolean;
-}
-
-const TotemLayout: React.FC<Props> = ({
+const TotemLayout: React.FC<LayoutProps> = ({
   header,
   avatar,
   chat,

package/src/components/layouts/layouts.stories.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { memori, tenant, integration } from '../../mocks/data';
-import Memori, { Props } from '../MemoriWidget/MemoriWidget';
+import Memori, { LayoutProps, Props } from '../MemoriWidget/MemoriWidget';
+import Spin from '../ui/Spin';
 
 const meta: Meta = {
   title: 'General/Layouts',
@@ -21,6 +22,34 @@ const meta: Meta = {
 
 export default meta;
 
+const CustomLayout: React.FC<LayoutProps> = ({
+  header,
+  avatar,
+  chat,
+  startPanel,
+  integrationStyle,
+  integrationBackground,
+  changeMode,
+  sessionId,
+  hasUserActivatedSpeak,
+  showInstruct = false,
+  loading = false,
+  poweredBy,
+}) => (
+  <>
+    {integrationStyle}
+    {integrationBackground}
+
+    <Spin spinning={loading} className="memori-mycustom-layout">
+      {poweredBy}
+
+      <div className="memori-mycustom-layout--controls">
+        {sessionId && hasUserActivatedSpeak ? chat : startPanel}
+      </div>
+    </Spin>
+  </>
+);
+
 const Template: Story<Props> = args => <Memori {...args} />;
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
@@ -153,3 +182,14 @@ Totem.args = {
   tenant,
   layout: 'TOTEM',
 };
+
+export const Custom = Template.bind({});
+Custom.args = {
+  uiLang: 'it',
+  showShare: true,
+  showSettings: true,
+  memori,
+  tenant,
+  layout: 'FULLPAGE',
+  customLayout: CustomLayout,
+};

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>

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/media.ts

@@ -17,28 +17,34 @@ export const getResourceUrl = ({
     type === 'cover'
       ? `${baseURL}/images/memoriCover.png`
       : `${baseURL}/images/memoriAvatar.png`;
-  if (!resourceURI || resourceURI.length === 0) {
-    return defaultUri;
-  } else if (
-    resourceURI.includes('memoriai/memory') &&
-    !resourceURI.includes('memori-ai-session-id') &&
-    sessionID
-  ) {
-    return `${resourceURI}?memori-ai-session-id=${sessionID}`;
-  } else if (
-    resourceURI.startsWith('https://') ||
-    resourceURI.startsWith('http://')
-  ) {
-    return `${resourceURI}${sessionID ? `/${sessionID}` : ''}`;
-  } else if (resourceURI.startsWith('cloud://')) {
-    return `${
-      apiURL?.replace(/v2/, 'v1') || ''
-    }/CloudAsset/${resourceURI.replace('cloud://', '')}`;
-  } else if (resourceURI.startsWith('guid://')) {
-    return `${
-      apiURL?.replace(/v2/, 'v1') || ''
-    }/GuidAsset/${resourceURI.replace('guid://', '')}`;
-  } else {
-    return defaultUri;
+
+  try {
+    if (!resourceURI || resourceURI.length === 0) {
+      return defaultUri;
+    } else if (
+      resourceURI.includes('memoriai/memory') &&
+      !resourceURI.includes('memori-ai-session-id') &&
+      sessionID
+    ) {
+      return `${resourceURI}?memori-ai-session-id=${sessionID}`;
+    } else if (
+      (resourceURI.startsWith('https://') ||
+        resourceURI.startsWith('http://')) &&
+      new URL(resourceURI).hostname.includes('memori.ai')
+    ) {
+      return `${resourceURI}${sessionID ? `/${sessionID}` : ''}`;
+    } else if (resourceURI.startsWith('cloud://')) {
+      return `${
+        apiURL?.replace(/v2/, 'v1') || ''
+      }/CloudAsset/${resourceURI.replace('cloud://', '')}`;
+    } else if (resourceURI.startsWith('guid://')) {
+      return `${
+        apiURL?.replace(/v2/, 'v1') || ''
+      }/GuidAsset/${resourceURI.replace('guid://', '')}`;
+    } else {
+      return resourceURI || defaultUri;
+    }
+  } catch (e) {
+    return resourceURI || defaultUri;
   }
 };

package/src/index.tsx

@@ -22,6 +22,7 @@ export interface Props {
   secretToken?: string;
   sessionID?: string;
   layout?: WidgetProps['layout'];
+  customLayout?: WidgetProps['customLayout'];
   showShare?: boolean;
   showSettings?: boolean;
   showInstruct?: boolean;
@@ -66,6 +67,7 @@ const Memori: React.FC<Props> = ({
   secretToken,
   sessionID,
   layout = 'DEFAULT',
+  customLayout,
   showShare = true,
   showSettings = true,
   showInstruct = false,
@@ -147,6 +149,7 @@ const Memori: React.FC<Props> = ({
   return memori ? (
     <MemoriWidget
       layout={layout}
+      customLayout={customLayout}
       height={height}
       baseUrl={
         baseURL ||

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,
@@ -83,4 +84,4 @@ body.sb-show-main #headlessui-portal-root,
     --memori-modal--width: 100%;
     --memori-modal--width--md: 80%;
     --memori-error-color: #ff4d4f;
-}
+}