@memori.ai/memori-react 2.8.3 → 2.9.1

package/src/components/SettingsDrawer/SettingsDrawer.stories.tsx

@@ -60,3 +60,31 @@ WithinTotemLayout.args = {
   setContinuousSpeech: () => {},
   setContinuousSpeechTimeout: () => {},
 };
+
+const AdditionalSettings = () => {
+  const [hideEmissions, setHideEmissions] = React.useState(false);
+
+  return (
+    <div>
+      <label htmlFor="#hideEmissions">Hide emissions:</label>
+      <input
+        id="hideEmissions"
+        name="hideEmissions"
+        type="checkbox"
+        checked={hideEmissions}
+        onChange={e => setHideEmissions(e.target.checked)}
+      />
+    </div>
+  );
+};
+
+export const WithAdditionalSettings = Template.bind({});
+WithAdditionalSettings.args = {
+  open: true,
+  onClose: () => {},
+  continuousSpeech: false,
+  continuousSpeechTimeout: 2,
+  setContinuousSpeech: () => {},
+  setContinuousSpeechTimeout: () => {},
+  additionalSettings: <AdditionalSettings />,
+};

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

@@ -1,5 +1,6 @@
 import { render } from '@testing-library/react';
 import SettingsDrawer from './SettingsDrawer';
+import React from 'react';
 
 beforeEach(() => {
   // @ts-ignore
@@ -139,3 +140,39 @@ it('renders SettingsDrawer for totem layout with continuous speech and hide emis
   );
   expect(container).toMatchSnapshot();
 });
+
+const AdditionalSettings = () => {
+  const [hideEmissions, setHideEmissions] = React.useState(false);
+
+  return (
+    <div>
+      <label htmlFor="#hideEmissions">Hide emissions:</label>
+      <input
+        id="hideEmissions"
+        name="hideEmissions"
+        type="checkbox"
+        checked={hideEmissions}
+        onChange={e => setHideEmissions(e.target.checked)}
+      />
+    </div>
+  );
+};
+
+it('renders SettingsDrawer with additional custom settings unchanged', () => {
+  const { container } = render(
+    <SettingsDrawer
+      open={true}
+      onClose={jest.fn()}
+      microphoneMode="HOLD_TO_TALK"
+      setMicrophoneMode={jest.fn()}
+      continuousSpeechTimeout={2}
+      setContinuousSpeechTimeout={jest.fn()}
+      controlsPosition="bottom"
+      setControlsPosition={jest.fn()}
+      hideEmissions={false}
+      setHideEmissions={jest.fn()}
+      additionalSettings={<AdditionalSettings />}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/SettingsDrawer/SettingsDrawer.tsx

@@ -19,6 +19,7 @@ export interface Props {
   setControlsPosition: (value: 'center' | 'bottom') => void;
   hideEmissions?: boolean;
   setHideEmissions: (value: boolean) => void;
+  additionalSettings?: WidgetProps['additionalSettings'];
 }
 
 const silenceSeconds = [2, 3, 5, 10, 15, 20, 30, 60];
@@ -35,6 +36,7 @@ const SettingsDrawer = ({
   setControlsPosition,
   hideEmissions,
   setHideEmissions,
+  additionalSettings,
 }: Props) => {
   const { t } = useTranslation();
 
@@ -151,6 +153,12 @@ const SettingsDrawer = ({
           </div>
         </>
       )}
+
+      {additionalSettings && (
+        <div className="memori-settings-drawer--field controls">
+          {additionalSettings}
+        </div>
+      )}
     </Drawer>
   );
 };

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

@@ -49,3 +49,11 @@ exports[`renders SettingsDrawer open with non-default continuous speech timeout
 `;
 
 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/index.tsx

@@ -41,6 +41,7 @@ export interface Props {
   onStateChange?: (state?: DialogState) => void;
   additionalInfo?: WidgetProps['additionalInfo'];
   customMediaRenderer?: WidgetProps['customMediaRenderer'];
+  additionalSettings?: WidgetProps['additionalSettings'];
 }
 
 const getPreferredLanguages = () => {
@@ -89,6 +90,7 @@ const Memori: React.FC<Props> = ({
   onStateChange,
   additionalInfo,
   customMediaRenderer,
+  additionalSettings,
 }) => {
   const [memori, setMemori] = useState<IMemori>();
   const [speechKey, setSpeechKey] = useState<string | undefined>(
@@ -216,10 +218,17 @@ const Memori: React.FC<Props> = ({
       onStateChange={onStateChange}
       additionalInfo={additionalInfo}
       customMediaRenderer={customMediaRenderer}
+      additionalSettings={additionalSettings}
       {...(tag && pin ? { personification: { tag, pin } } : {})}
     />
   ) : (
-    <div>
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
       <p style={{ textAlign: 'center', margin: '2rem auto' }}>
         {t('loading')}...
       </p>