@memori.ai/memori-react 2.8.3 → 2.9.0

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>