@memori.ai/memori-react 6.8.1 → 6.8.4

package/src/components/MicrophoneButton/MicrophoneButton.tsx

@@ -83,7 +83,6 @@ const MicrophoneButton = ({
         onMouseDown={startHold}
         onTouchStart={startHold}
         onMouseUp={stopHold}
-        onMouseLeave={stopHold}
         onTouchEnd={stopHold}
         shape="circle"
         icon={<Microphone />}

package/src/components/SendOnEnterMenu/SendOnEnterMenu.css

@@ -9,9 +9,9 @@
 
 .memori-menu--overlay {
     position: absolute;
-    right: auto;
-    bottom: 100%;
-    left: 0;
+    top: 100%;
+    right: 0;
+    left: auto;
     display: flex;
     min-width: 12rem;
     flex-direction: column;

package/src/components/SettingsDrawer/SettingsDrawer.css

@@ -1,7 +1,7 @@
 .memori-settings-drawer .memori-settings-drawer--field {
     display: flex;
     flex-direction: column;
-    margin: 0.5rem 0 1.5rem;
+    margin: 0.5rem 0;
 }
 
 .memori-settings-drawer .memori-settings-drawer--field .memori-select--value {
@@ -9,9 +9,16 @@
 }
 
 .memori-settings-drawer--controlsposition-radio,
+.memori-settings-drawer--avatarType-radio,
 .memori-settings-drawer--microphoneMode-radio {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     margin: 0.5rem 0;
-}
+    gap: 0.2rem;
+}
+
+.memori-settings-drawer--microphoneMode-radio-button-disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}

package/src/components/SettingsDrawer/SettingsDrawer.test.tsx

@@ -25,6 +25,9 @@ it('renders SettingsDrawer unchanged', () => {
       setControlsPosition={jest.fn()}
       hideEmissions={false}
       setHideEmissions={jest.fn()}
+      avatarType="avatar3d"
+      setAvatarType={jest.fn()}
+      setEnablePositionControls={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -43,6 +46,9 @@ it('renders SettingsDrawer open unchanged', () => {
       setControlsPosition={jest.fn()}
       hideEmissions={false}
       setHideEmissions={jest.fn()}
+      avatarType="avatar3d"
+      setAvatarType={jest.fn()}
+      setEnablePositionControls={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -61,6 +67,9 @@ it('renders SettingsDrawer open with continuous speech enabled unchanged', () =>
       setControlsPosition={jest.fn()}
       hideEmissions={false}
       setHideEmissions={jest.fn()}
+      avatarType="avatar3d"
+      setAvatarType={jest.fn()}
+      setEnablePositionControls={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -79,6 +88,9 @@ it('renders SettingsDrawer open with non-default continuous speech timeout uncha
       setControlsPosition={jest.fn()}
       hideEmissions={false}
       setHideEmissions={jest.fn()}
+      avatarType="avatar3d"
+      setAvatarType={jest.fn()}
+      setEnablePositionControls={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -98,6 +110,9 @@ it('renders SettingsDrawer for totem layout open unchanged', () => {
       setControlsPosition={jest.fn()}
       hideEmissions={false}
       setHideEmissions={jest.fn()}
+      avatarType="avatar3d"
+      setAvatarType={jest.fn()}
+      setEnablePositionControls={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -117,6 +132,9 @@ it('renders SettingsDrawer for totem layout open with controls at center unchang
       setControlsPosition={jest.fn()}
       hideEmissions={false}
       setHideEmissions={jest.fn()}
+      avatarType="avatar3d"
+      setAvatarType={jest.fn()}
+      setEnablePositionControls={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -136,6 +154,9 @@ it('renders SettingsDrawer for totem layout with continuous speech and hide emis
       setControlsPosition={jest.fn()}
       hideEmissions={true}
       setHideEmissions={jest.fn()}
+      avatarType="avatar3d"
+      setAvatarType={jest.fn()}
+      setEnablePositionControls={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -172,6 +193,9 @@ it('renders SettingsDrawer with additional custom settings unchanged', () => {
       hideEmissions={false}
       setHideEmissions={jest.fn()}
       additionalSettings={<AdditionalSettings />}
+      avatarType="avatar3d"
+      setAvatarType={jest.fn()}
+      setEnablePositionControls={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();

package/src/components/SettingsDrawer/SettingsDrawer.tsx

@@ -3,10 +3,12 @@ import { useTranslation } from 'react-i18next';
 import Checkbox from '../ui/Checkbox';
 import Select from '../ui/Select';
 import { setLocalConfig } from '../../helpers/configuration';
-import { RadioGroup } from '@headlessui/react';
+import { RadioGroup, Switch } from '@headlessui/react';
 import Button from '../ui/Button';
 import { Props as WidgetProps } from '../MemoriWidget/MemoriWidget';
-
+import { useState } from 'react';
+import Slider from '../ui/Slider';
+import Tooltip from '../ui/Tooltip';
 export interface Props {
   open: boolean;
   layout?: WidgetProps['layout'];
@@ -20,6 +22,12 @@ export interface Props {
   hideEmissions?: boolean;
   setHideEmissions: (value: boolean) => void;
   additionalSettings?: WidgetProps['additionalSettings'];
+  avatarType?: 'blob' | 'avatar3d' | null;
+  setAvatarType: (value: 'blob' | 'avatar3d' | null) => void;
+  enablePositionControls?: boolean;
+  setEnablePositionControls: (value: boolean) => void;
+  isAvatar3d?: boolean;
+  speakerMuted?: boolean;
 }
 
 const silenceSeconds = [2, 3, 5, 10, 15, 20, 30, 60];
@@ -28,6 +36,7 @@ const SettingsDrawer = ({
   open,
   layout = 'DEFAULT',
   onClose,
+  speakerMuted,
   microphoneMode = 'HOLD_TO_TALK',
   continuousSpeechTimeout,
   setMicrophoneMode,
@@ -37,6 +46,11 @@ const SettingsDrawer = ({
   hideEmissions,
   setHideEmissions,
   additionalSettings,
+  avatarType,
+  setAvatarType,
+  enablePositionControls,
+  setEnablePositionControls,
+  isAvatar3d,
 }: Props) => {
   const { t } = useTranslation();
 
@@ -58,7 +72,7 @@ const SettingsDrawer = ({
           value={microphoneMode}
           defaultValue={microphoneMode}
           className="memori-settings-drawer--microphoneMode-radio"
-          onChange={value => {
+          onChange={(value: any) => {
             let micMode =
               value === 'CONTINUOUS' ? 'CONTINUOUS' : 'HOLD_TO_TALK';
 
@@ -76,17 +90,33 @@ const SettingsDrawer = ({
               </Button>
             )}
           </RadioGroup.Option>
-          <RadioGroup.Option
-            value="CONTINUOUS"
-            className="memori-settings-drawer--microphoneMode-radio-button"
+
+          <Tooltip
+            content={
+              speakerMuted ? t('write_and_speak.continuousSpeechDisabled') : ''
+            }
+            disabled={!speakerMuted}
           >
-            {({ checked }) => (
-              <Button primary={checked} outlined={!checked}>
-                {t('write_and_speak.continuousSpeechLabel') ||
-                  'Continuous speech'}
-              </Button>
-            )}
-          </RadioGroup.Option>
+            <RadioGroup.Option
+              value="CONTINUOUS"
+              className={`memori-settings-drawer--microphoneMode-radio-button ${
+                speakerMuted
+                  ? 'memori-settings-drawer--microphoneMode-radio-button-disabled'
+                  : ''
+              }`}
+            >
+              {({ checked }) => (
+                <Button
+                  primary={checked}
+                  outlined={!checked}
+                  disabled={speakerMuted}
+                >
+                  {t('write_and_speak.continuousSpeechLabel') ||
+                    'Continuous speech'}
+                </Button>
+              )}
+            </RadioGroup.Option>
+          </Tooltip>
         </RadioGroup>
       </div>
 
@@ -117,7 +147,7 @@ const SettingsDrawer = ({
               value={controlsPosition}
               defaultValue={controlsPosition}
               className="memori-settings-drawer--controlsposition-radio"
-              onChange={value => {
+              onChange={(value: any) => {
                 setControlsPosition(value);
                 setLocalConfig('controlsPosition', value);
               }}
@@ -144,6 +174,66 @@ const SettingsDrawer = ({
               </RadioGroup.Option>
             </RadioGroup>
           </div>
+
+          {isAvatar3d && (
+            <>
+              <div className="memori-settings-drawer--field controls">
+                <label
+                  htmlFor="avatarType"
+                  className="memori-settings-drawer-label"
+                >
+                  {t('write_and_speak.avatarType') || 'Avatar type'}:
+                </label>
+                <RadioGroup
+                  id="avatarType"
+                  name="avatarType"
+                  value={avatarType}
+                  defaultValue={avatarType}
+                  className="memori-settings-drawer--avatarType-radio"
+                  onChange={(value: any) => {
+                    setAvatarType && setAvatarType(value);
+                    setLocalConfig('avatarType', value);
+                  }}
+                >
+                  <RadioGroup.Option
+                    value="blob"
+                    className="memori-settings-drawer--avatarType-radio-button"
+                  >
+                    {({ checked }) => (
+                      <Button primary={checked} outlined={!checked}>
+                        {t('write_and_speak.blob') || 'Blob'}
+                      </Button>
+                    )}
+                  </RadioGroup.Option>
+                  <RadioGroup.Option
+                    value="avatar3d"
+                    className="memori-settings-drawer--avatarType-radio-button"
+                  >
+                    {({ checked }) => (
+                      <Button primary={checked} outlined={!checked}>
+                        {t('write_and_speak.avatar3d') || 'Avatar 3D'}
+                      </Button>
+                    )}
+                  </RadioGroup.Option>
+                </RadioGroup>
+              </div>
+
+              <div className="memori-settings-drawer--field">
+                <Checkbox
+                  label={
+                    t('write_and_speak.enablePositionControls') ||
+                    'Enable position controls'
+                  }
+                  name="enablePositionControls"
+                  checked={enablePositionControls}
+                  onChange={e => {
+                    setEnablePositionControls(e.target.checked);
+                  }}
+                />
+              </div>
+            </>
+          )}
+
           <div className="memori-settings-drawer--field">
             <Checkbox
               label={

package/src/components/ShareButton/ShareButton.css

@@ -65,3 +65,9 @@ a.memori-share-button--link {
     background: #fff;
     color: #000;
 }
+
+.memori-share-button--li-shared {
+    padding-bottom: 0.25rem;
+    border-bottom: 1px solid var(--memori-primary);
+    margin-bottom: 0.5rem;
+}

package/src/components/ShareButton/ShareButton.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import I18nWrapper from '../../I18nWrapper';
 import ShareButton, { Props } from './ShareButton';
-import { tenant } from '../../mocks/data';
+import { tenant, memori, sessionID } from '../../mocks/data';
 
 import './ShareButton.css';
 
@@ -79,3 +79,20 @@ WithQrCodeAndOtherTenant.args = {
     theme: 'tailoor',
   },
 };
+
+export const WithMemoriAndSessionID = Template.bind({});
+WithMemoriAndSessionID.args = {
+  url: 'https://memori.ai',
+  memori,
+  sessionID,
+  showQrCode: false,
+};
+
+export const WithMemoriAndSessionIDAndQrCode = Template.bind({});
+WithMemoriAndSessionIDAndQrCode.args = {
+  url: 'https://memori.ai',
+  memori,
+  sessionID,
+  showQrCode: true,
+  align: 'right',
+};

package/src/components/ShareButton/ShareButton.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import ShareButton from './ShareButton';
-import { tenant } from '../../mocks/data';
+import { tenant, memori, sessionID } from '../../mocks/data';
 
 it('renders ShareButton unchanged', () => {
   const { container } = render(<ShareButton />);
@@ -44,3 +44,10 @@ it('renders ShareButton with other tenant img set unchanged', () => {
   );
   expect(container).toMatchSnapshot();
 });
+
+it('renders ShareButton with share chat unchanged', () => {
+  const { container } = render(
+    <ShareButton memori={memori} sessionID={sessionID} />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/ShareButton/ShareButton.tsx

@@ -13,10 +13,12 @@ import { QRCodeCanvas } from 'qrcode.react';
 import { Menu } from '@headlessui/react';
 import Button from '../ui/Button';
 import cx from 'classnames';
-import { Tenant } from '@memori.ai/memori-api-client/dist/types';
+import { Tenant, Memori } from '@memori.ai/memori-api-client/dist/types';
 
 export interface Props {
   tenant?: Tenant;
+  memori?: Memori;
+  sessionID?: string;
   url?: string;
   title?: string;
   className?: string;
@@ -28,6 +30,8 @@ export interface Props {
 
 const ShareButton: React.FC<Props> = ({
   tenant,
+  memori,
+  sessionID,
   url,
   title = '',
   className,
@@ -36,7 +40,7 @@ const ShareButton: React.FC<Props> = ({
   showQrCode = true,
   align = 'right',
 }: Props) => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const [targetUrl, setTargetUrl] = useState(url);
 
   const qrImageURL = useMemo(
@@ -107,6 +111,24 @@ const ShareButton: React.FC<Props> = ({
     document.body.removeChild(link);
   };
 
+  const sharedUrl = useMemo(() => {
+    if (!memori || !sessionID) return undefined;
+
+    if (memori.ownerUserID) {
+      return `${baseUrl ?? 'https://www.aisuru.com'}/${
+        i18n.language === 'it' ? 'it' : 'en'
+      }/shared/${memori.ownerUserID}/${memori.memoriID}/${sessionID}`;
+    }
+
+    if (memori.exposed) {
+      return `${baseUrl ?? 'https://www.aisuru.com'}/${
+        i18n.language === 'it' ? 'it' : 'en'
+      }/shared/${memori.ownerUserName}/${memori.name}/${sessionID}`;
+    }
+
+    return undefined;
+  }, [memori, sessionID, baseUrl, i18n.language]);
+
   return (
     <Menu
       as="div"
@@ -132,6 +154,31 @@ const ShareButton: React.FC<Props> = ({
         </div>
       </Menu.Button>
       <Menu.Items className="memori-share-button--overlay" as="ul">
+        {memori && sessionID && sharedUrl && (
+          <Menu.Item
+            key="shared"
+            as="li"
+            className="memori-share-button--li memori-share-button--li-shared"
+          >
+            <a
+              className={cx(
+                'memori-button',
+                'memori-button--with-icon',
+                'memori-button--ghost',
+                'memori-button--padded',
+                'memori-share-button--link'
+              )}
+              href={sharedUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div className="memori-button--icon">
+                <Share />
+              </div>
+              {t('widget.shareChat') || 'Share chat'}
+            </a>
+          </Menu.Item>
+        )}
         <Menu.Item key="copy" as="li" className="memori-share-button--li">
           <Button
             className="memori-share-button--link"

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

@@ -140,6 +140,41 @@ exports[`renders ShareButton with other tenant img set unchanged 1`] = `
 </div>
 `;
 
+exports[`renders ShareButton with share chat unchanged 1`] = `
+<div>
+  <div
+    class="memori-share-button"
+    data-headlessui-state=""
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori-button--primary"
+      data-headlessui-state=""
+      id="headlessui-menu-button-:rg:"
+      title="widget.share"
+      type="button"
+    >
+      <div
+        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="M752 664c-28.5 0-54.8 10-75.4 26.7L469.4 540.8a160.68 160.68 0 0 0 0-57.6l207.2-149.9C697.2 350 723.5 360 752 360c66.2 0 120-53.8 120-120s-53.8-120-120-120-120 53.8-120 120c0 11.6 1.6 22.7 4.7 33.3L439.9 415.8C410.7 377.1 364.3 352 312 352c-88.4 0-160 71.6-160 160s71.6 160 160 160c52.3 0 98.7-25.1 127.9-63.8l196.8 142.5c-3.1 10.6-4.7 21.8-4.7 33.3 0 66.2 53.8 120 120 120s120-53.8 120-120-53.8-120-120-120zm0-476c28.7 0 52 23.3 52 52s-23.3 52-52 52-52-23.3-52-52 23.3-52 52-52zM312 600c-48.5 0-88-39.5-88-88s39.5-88 88-88 88 39.5 88 88-39.5 88-88 88zm440 236c-28.7 0-52-23.3-52-52s23.3-52 52-52 52 23.3 52 52-23.3 52-52 52z"
+          />
+        </svg>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`renders ShareButton with tenant img set unchanged 1`] = `
 <div>
   <div

package/src/components/SignupForm/SignupForm.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import SignupForm from './SignupForm';
 import { tenant } from '../../mocks/data';
+import memoriApiClient from '@memori.ai/memori-api-client';
 
 beforeEach(() => {
   // @ts-ignore
@@ -16,7 +17,7 @@ beforeEach(() => {
 it('renders SignupForm unchanged', () => {
   const { container } = render(
     <SignupForm
-      apiUrl="https://backend.memori.ai"
+      apiClient={memoriApiClient()}
       tenant={tenant}
       onLogin={jest.fn()}
       goToLogin={jest.fn()}
@@ -28,7 +29,7 @@ it('renders SignupForm unchanged', () => {
 it('renders SignupForm on otp form unchanged', () => {
   const { container } = render(
     <SignupForm
-      apiUrl="https://backend.memori.ai"
+      apiClient={memoriApiClient()}
       tenant={tenant}
       onLogin={jest.fn()}
       goToLogin={jest.fn()}

package/src/components/SignupForm/SignupForm.tsx

@@ -27,7 +27,7 @@ const reservedUserNames = [
 
 export interface Props {
   tenant: Tenant;
-  apiUrl: string;
+  apiClient: ReturnType<typeof memoriApiClient>;
   onLogin: (user: User, token: string) => void;
   goToLogin: () => void;
   __TEST__waitingForOtp?: boolean;
@@ -35,7 +35,7 @@ export interface Props {
 
 const SignupForm = ({
   tenant,
-  apiUrl,
+  apiClient,
   onLogin,
   goToLogin,
   __TEST__waitingForOtp = false,
@@ -43,9 +43,8 @@ const SignupForm = ({
   const { t, i18n } = useTranslation();
   const lang = i18n.language === 'it' ? 'it' : 'en';
 
-  const client = memoriApiClient(apiUrl);
   const { userSignUp, userConfirmSignUp, resendVerificationCode } =
-    client.backend;
+    apiClient.backend;
 
   const [email, setEmail] = useState<string>();
   const [username, setUsername] = useState<string>();
@@ -81,7 +80,7 @@ const SignupForm = ({
     e.preventDefault();
     const form = e.currentTarget as HTMLFormElement;
 
-    const tenantID = form.tenant.value ?? tenant.id;
+    const tenantID = form.tenant.value ?? tenant.name;
 
     const eMail = (form.eMail.value ?? email).toLowerCase();
     const userName = form.userName.value ?? username;
@@ -152,7 +151,7 @@ const SignupForm = ({
 
     try {
       const resp = await resendVerificationCode({
-        tenant: tenant?.id,
+        tenant: tenant?.name,
         userName: username,
       });
 
@@ -175,7 +174,7 @@ const SignupForm = ({
     e.preventDefault();
     const form = e.currentTarget as HTMLFormElement;
 
-    const tenantID = form.tenant.value ?? tenant.id;
+    const tenantID = form.tenant.value ?? tenant.name;
     const userName = form.userName.value ?? username;
     const pwd = form.password.value ?? password;
 
@@ -213,7 +212,7 @@ const SignupForm = ({
       <form className="memori--login-drawer--form" onSubmit={validateOtp}>
         <input type="hidden" name="userName" value={username} />
         <input type="hidden" name="password" value={password} />
-        <input type="hidden" name="tenant" value={tenant.id} />
+        <input type="hidden" name="tenant" value={tenant.name} />
 
         <label htmlFor="#verificationCode">
           {t('login.otpCode')}
@@ -245,7 +244,7 @@ const SignupForm = ({
   ) : (
     <>
       <form className="memori--login-drawer--form" onSubmit={signup}>
-        <input type="hidden" name="tenant" value={tenant.id} />
+        <input type="hidden" name="tenant" value={tenant.name} />
         <input type="hidden" name="referral" value={referral} />
 
         <label htmlFor="#eMail">

package/src/components/Snippet/Snippet.stories.tsx

@@ -105,14 +105,6 @@ Default.args = {
   preview: false,
 };
 
-export const WithoutLineNumbers = Template.bind({});
-WithoutLineNumbers.args = {
-  mimeType: 'text/plain',
-  content: 'Some text',
-  preview: false,
-  showLineNumbers: false,
-};
-
 export const WithoutCopyButton = Template.bind({});
 WithoutCopyButton.args = {
   mimeType: 'text/plain',

package/src/components/Snippet/Snippet.test.tsx

@@ -64,7 +64,6 @@ it('renders SnippetUpload with js code', () => {
 it('renders SnippetUpload with js code without line numbers', () => {
   const { container } = render(
     <Snippet
-      showLineNumbers={false}
       medium={{
         mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
         mimeType: 'text/javascript',