@memori.ai/memori-react 8.45.2 → 8.45.5

package/src/components/SettingsDrawer/SettingsDrawer.tsx

@@ -1,255 +0,0 @@
-import Drawer from '../ui/Drawer';
-import { useTranslation } from 'react-i18next';
-import Checkbox from '../ui/Checkbox';
-import Select from '../ui/Select';
-import { setLocalConfig } from '../../helpers/configuration';
-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'];
-  onClose: () => void;
-  microphoneMode?: 'HOLD_TO_TALK' | 'CONTINUOUS';
-  continuousSpeechTimeout?: number;
-  setMicrophoneMode: (value: 'HOLD_TO_TALK' | 'CONTINUOUS') => void;
-  setContinuousSpeechTimeout: (value: number) => void;
-  controlsPosition?: 'center' | 'bottom';
-  setControlsPosition: (value: 'center' | 'bottom') => void;
-  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];
-
-const SettingsDrawer = ({
-  open,
-  layout = 'DEFAULT',
-  onClose,
-  // microphoneMode = 'HOLD_TO_TALK',
-  // continuousSpeechTimeout,
-  // setMicrophoneMode,
-  // setContinuousSpeechTimeout,
-  controlsPosition,
-  setControlsPosition,
-  hideEmissions,
-  setHideEmissions,
-  additionalSettings,
-  avatarType,
-  setAvatarType,
-  enablePositionControls,
-  setEnablePositionControls,
-  isAvatar3d,
-}: Props) => {
-  const { t } = useTranslation();
-
-  return (
-    <Drawer
-      className="memori-settings-drawer"
-      open={open}
-      onClose={onClose}
-      title={t('widget.settings') || 'Settings'}
-      description={t('write_and_speak.settingsHeaderLabel')}
-    >
-      {/* <div className="memori-settings-drawer--field controls">
-        <label htmlFor="#microphoneMode">
-          {t('write_and_speak.microphoneMode') || 'Microphone mode'}:
-        </label>
-        <RadioGroup
-          id="microphoneMode"
-          name="microphoneMode"
-          value={microphoneMode}
-          defaultValue={microphoneMode}
-          className="memori-settings-drawer--microphoneMode-radio"
-          onChange={(value: any) => {
-            let micMode =
-              value === 'CONTINUOUS' ? 'CONTINUOUS' : 'HOLD_TO_TALK';
-
-            setMicrophoneMode(micMode as 'CONTINUOUS' | 'HOLD_TO_TALK');
-            setLocalConfig('microphoneMode', micMode);
-          }}
-        >
-          <RadioGroup.Option
-            value="HOLD_TO_TALK"
-            className="memori-settings-drawer--microphoneMode-radio-button"
-          >
-            {({ checked }) => (
-              <Button primary={checked} outlined={!checked}>
-                {t('write_and_speak.holdToSpeak') || 'Hold to speak'}
-              </Button>
-            )}
-          </RadioGroup.Option>
-
-          <Tooltip
-            content={t('write_and_speak.continuousSpeechDisabled') || 'Continuous speech is currently disabled'}
-            disabled={false}
-          >
-            <RadioGroup.Option
-              value="CONTINUOUS"
-              className="memori-settings-drawer--microphoneMode-radio-button memori-settings-drawer--microphoneMode-radio-button-disabled"
-            >
-              {({ checked }) => (
-                <Button
-                  primary={checked}
-                  outlined={!checked}
-                  disabled={true}
-                >
-                  {t('write_and_speak.continuousSpeechLabel') ||
-                    'Continuous speech'}
-                </Button>
-              )}
-            </RadioGroup.Option>
-          </Tooltip>
-        </RadioGroup>
-      </div>
-
-      {microphoneMode === 'CONTINUOUS' && (
-        <div className="memori-settings-drawer--field">
-          <Select
-            label={t('write_and_speak.secondsLabel') || 'Seconds'}
-            placeholder={t('write_and_speak.secondsLabel') || 'Seconds'}
-            options={silenceSeconds.map(s => ({ value: s, label: s }))}
-            value={continuousSpeechTimeout}
-            onChange={value => {
-              setContinuousSpeechTimeout(value);
-              setLocalConfig('continuousSpeechTimeout', value);
-            }}
-          />
-        </div>
-      )} */}
-
-      {layout === 'TOTEM' && (
-        <>
-          <div className="memori-settings-drawer--field controls">
-            <label htmlFor="#controlsPosition">
-              {t('write_and_speak.controlsPosition') || 'Controls'}:
-            </label>
-            <RadioGroup
-              id="controlsPosition"
-              name="controlsPosition"
-              value={controlsPosition}
-              defaultValue={controlsPosition}
-              className="memori-settings-drawer--controlsposition-radio"
-              onChange={(value: any) => {
-                setControlsPosition(value);
-                setLocalConfig('controlsPosition', value);
-              }}
-            >
-              <RadioGroup.Option
-                value="center"
-                className="memori-settings-drawer--controlsposition-radio-button"
-              >
-                {({ checked }) => (
-                  <Button primary={checked} outlined={!checked}>
-                    {t('center') || 'Center'}
-                  </Button>
-                )}
-              </RadioGroup.Option>
-              <RadioGroup.Option
-                value="bottom"
-                className="memori-settings-drawer--controlsposition-radio-button"
-              >
-                {({ checked }) => (
-                  <Button primary={checked} outlined={!checked}>
-                    {t('bottom') || 'Bottom'}
-                  </Button>
-                )}
-              </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={
-                t('write_and_speak.hideEmissionsLabel') || 'Hide emissions'
-              }
-              name="hideControls"
-              checked={hideEmissions}
-              onChange={e => {
-                setHideEmissions(e.target.checked);
-                setLocalConfig('hideEmissions', e.target.checked);
-              }}
-            />
-          </div>
-        </>
-      )}
-
-      {additionalSettings && (
-        <div className="memori-settings-drawer--field controls">
-          {additionalSettings}
-        </div>
-      )}
-    </Drawer>
-  );
-};
-
-export default SettingsDrawer;

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

@@ -1,59 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders SettingsDrawer for totem layout open unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
-`;
-
-exports[`renders SettingsDrawer for totem layout open with controls at center unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
-`;
-
-exports[`renders SettingsDrawer for totem layout with continuous speech and hide emissions unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
-`;
-
-exports[`renders SettingsDrawer open unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
-`;
-
-exports[`renders SettingsDrawer open with continuous speech enabled unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
-`;
-
-exports[`renders SettingsDrawer open with non-default continuous speech timeout unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
-`;
-
-exports[`renders SettingsDrawer unchanged 1`] = `<div />`;
-
-exports[`renders SettingsDrawer with additional custom settings unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
-`;

package/src/components/ShareButton/ShareButton.css

@@ -1,73 +0,0 @@
-.memori-share-button {
-    position: relative;
-    display: inline-block;
-}
-
-.memori-share-button--button {
-    cursor: pointer;
-}
-
-.memori-share-button--overlay {
-    position: absolute;
-    right: auto;
-    left: 0;
-    display: flex;
-    min-width: 14rem;
-    flex-direction: column;
-    padding: 0.5rem 0;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 0.375rem;
-    margin: 0;
-    margin-top: 0.5rem;
-    background-color: #fff;
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
-    color: #000;
-    list-style: none;
-    outline: none;
-    transform-origin: top right;
-}
-
-.memori-share-button.memori-share-button--align-left .memori-share-button--overlay {
-    right: 0;
-    left: auto;
-    transform-origin: top left;
-}
-
-li.memori-share-button--li {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-button.memori-share-button--link,
-a.memori-share-button--link {
-    width: 100%;
-    justify-content: flex-start;
-    color: inherit;
-    font-weight: normal;
-    text-align: left;
-    text-decoration: none;
-}
-
-.memori-share-button--li-qr-code {
-    margin-top: 0.5rem;
-    text-align: center;
-}
-
-.memori-share-button--li-qr-code button {
-    background: #fff;
-    color: #333;
-    cursor: pointer;
-}
-
-.memori-share-button--li-qr-code button:hover,
-.memori-share-button--li-qr-code button:focus {
-    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

@@ -1,98 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import I18nWrapper from '../../I18nWrapper';
-import ShareButton, { Props } from './ShareButton';
-import { tenant, memori, sessionID } from '../../mocks/data';
-
-import './ShareButton.css';
-
-const meta: Meta = {
-  title: 'Share Button',
-  component: ShareButton,
-  argTypes: {
-    url: {
-      control: {
-        type: 'text',
-      },
-    },
-    showQrCode: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => (
-  <I18nWrapper>
-    <ShareButton {...args} />
-  </I18nWrapper>
-);
-const TemplateRight: Story<Props> = args => (
-  <I18nWrapper>
-    <div style={{ textAlign: 'right' }}>
-      <ShareButton {...args} />
-    </div>
-  </I18nWrapper>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  url: 'https://memori.ai',
-  showQrCode: false,
-  align: 'right',
-};
-
-export const Alignment = TemplateRight.bind({});
-Alignment.args = {
-  url: 'https://memori.ai',
-  align: 'left',
-};
-
-export const WithQrCode = Template.bind({});
-WithQrCode.args = {
-  url: 'https://memori.ai',
-  showQrCode: true,
-  align: 'right',
-};
-
-export const WithQrCodeAndTenant = Template.bind({});
-WithQrCodeAndTenant.args = {
-  url: 'https://memori.ai',
-  showQrCode: true,
-  align: 'right',
-  tenant: tenant,
-};
-
-export const WithQrCodeAndOtherTenant = Template.bind({});
-WithQrCodeAndOtherTenant.args = {
-  url: 'https://memori.ai',
-  showQrCode: true,
-  align: 'right',
-  tenant: {
-    ...tenant,
-    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,53 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import ShareButton from './ShareButton';
-import { tenant, memori, sessionID } from '../../mocks/data';
-
-it('renders ShareButton unchanged', () => {
-  const { container } = render(<ShareButton />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders ShareButton with url unchanged', () => {
-  const { container } = render(<ShareButton url="https://memori.ai" />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders ShareButton with title unchanged', () => {
-  const { container } = render(<ShareButton title="Lorem ipsum" />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders ShareButton with button not primary unchanged', () => {
-  const { container } = render(<ShareButton primary={false} />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders ShareButton without qr code unchanged', () => {
-  const { container } = render(<ShareButton showQrCode={false} />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders ShareButton aligned left unchanged', () => {
-  const { container } = render(<ShareButton align="left" />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders ShareButton with tenant img set unchanged', () => {
-  const { container } = render(<ShareButton tenant={tenant} />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders ShareButton with other tenant img set unchanged', () => {
-  const { container } = render(
-    <ShareButton tenant={{ ...tenant, theme: 'tailoor' }} />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders ShareButton with share chat unchanged', () => {
-  const { container } = render(
-    <ShareButton memori={memori} sessionID={sessionID} />
-  );
-  expect(container).toMatchSnapshot();
-});