@memori.ai/memori-react 1.2.0 → 2.0.0

package/src/components/SettingsDrawer/SettingsDrawer.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+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 } from '@headlessui/react';
+import Button from '../ui/Button';
+
+export interface Props {
+  open: boolean;
+  layout?: 'FULLPAGE' | 'TOTEM' | 'DEFAULT';
+  onClose: () => void;
+  continuousSpeech?: boolean;
+  continuousSpeechTimeout?: number;
+  setContinuousSpeech: (value: boolean) => void;
+  setContinuousSpeechTimeout: (value: number) => void;
+  controlsPosition?: 'center' | 'bottom';
+  setControlsPosition: (value: 'center' | 'bottom') => void;
+}
+
+const silenceSeconds = [2, 3, 5, 10, 15, 20, 30, 60];
+
+const SettingsDrawer = ({
+  open,
+  layout = 'DEFAULT',
+  onClose,
+  continuousSpeech,
+  continuousSpeechTimeout,
+  setContinuousSpeech,
+  setContinuousSpeechTimeout,
+  controlsPosition,
+  setControlsPosition,
+}: 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">
+        <Checkbox
+          label={t('write_and_speak.continuousSpeechLabel')}
+          checked={continuousSpeech}
+          onChange={e => {
+            setContinuousSpeech(e.target.checked);
+            setLocalConfig('continuousSpeech', e.target.checked);
+          }}
+        />
+      </div>
+
+      <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 => {
+              setControlsPosition(value);
+              setLocalConfig('controlsPosition', value);
+            }}
+          >
+            <RadioGroup.Option
+              value="center"
+              className="memori-settings-drawer--controlsposition-radio-button"
+            >
+              {({ checked }) => (
+                <Button primary={checked}>{t('center') || 'Center'}</Button>
+              )}
+            </RadioGroup.Option>
+            <RadioGroup.Option
+              value="bottom"
+              className="memori-settings-drawer--controlsposition-radio-button"
+            >
+              {({ checked }) => (
+                <Button primary={checked}>{t('bottom') || 'Bottom'}</Button>
+              )}
+            </RadioGroup.Option>
+          </RadioGroup>
+        </div>
+      )}
+    </Drawer>
+  );
+};
+
+export default SettingsDrawer;

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

@@ -0,0 +1,19 @@
+// 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 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 unchanged 1`] = `<div />`;

package/src/components/StartPanel/StartPanel.css

@@ -86,7 +86,7 @@
 
 .memori--description,
 .memori--needsPosition {
-    color: rgba(0, 0, 0, 0.85);
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85));
     font-size: 14px;
     line-height: 1.6;
 }
@@ -123,7 +123,8 @@
     margin-left: 0.5rem;
 }
 
-.memori--completions-enabled {
+.memori--completions-enabled,
+.memori--nsfw {
     position: absolute;
     right: 2.5rem;
     bottom: -1.25rem;
@@ -136,6 +137,7 @@
     border-radius: 50%;
     background: #fff;
     box-shadow: 0 0 5px 6px rgba(255, 255, 255, 0.5);
+    color: #000;
 }
 
 .memori--completions-enabled span {
@@ -147,3 +149,7 @@
     width: 1rem;
     height: 1rem;
 }
+
+.memori--completions-enabled + .memori--nsfw {
+    right: 4.75rem;
+}

package/src/components/StartPanel/StartPanel.stories.tsx

@@ -92,7 +92,10 @@ const Template: Story<Props> = args => (
 // https://storybook.js.org/docs/react/workflows/unit-testing
 export const Default = Template.bind({});
 Default.args = {
-  memori,
+  memori: {
+    ...memori,
+    enableCompletions: false,
+  },
   tenant,
   language: 'it',
   userLang: 'en',
@@ -106,7 +109,10 @@ Default.args = {
 
 export const WithGamificationLevel = Template.bind({});
 WithGamificationLevel.args = {
-  memori,
+  memori: {
+    ...memori,
+    enableCompletions: false,
+  },
   tenant,
   gamificationLevel: {
     points: 61,
@@ -123,6 +129,64 @@ WithGamificationLevel.args = {
   onClickStart: () => {},
 };
 
+export const WithCompletionsEnabled = Template.bind({});
+WithCompletionsEnabled.args = {
+  memori: {
+    ...memori,
+    enableCompletions: true,
+  },
+  tenant,
+  language: 'it',
+  userLang: 'en',
+  setUserLang: () => {},
+  openPositionDrawer: () => {},
+  instruct: false,
+  sessionId: sessionID,
+  clickedStart: false,
+  onClickStart: () => {},
+};
+
+export const WithNSFWFlag = Template.bind({});
+WithNSFWFlag.args = {
+  memori: {
+    ...memori,
+    nsfw: true,
+    enableCompletions: false,
+  },
+  tenant,
+  language: 'it',
+  userLang: 'en',
+  setUserLang: () => {},
+  openPositionDrawer: () => {},
+  instruct: false,
+  sessionId: sessionID,
+  clickedStart: false,
+  onClickStart: () => {},
+};
+
+export const WithAllTheBadges = Template.bind({});
+WithAllTheBadges.args = {
+  memori: {
+    ...memori,
+    enableCompletions: true,
+    nsfw: true,
+  },
+  gamificationLevel: {
+    points: 61,
+    pointsForCurrentBadge: 60,
+    badge: '🌍',
+  },
+  tenant,
+  language: 'it',
+  userLang: 'en',
+  setUserLang: () => {},
+  openPositionDrawer: () => {},
+  instruct: false,
+  sessionId: sessionID,
+  clickedStart: false,
+  onClickStart: () => {},
+};
+
 export const Instruct = Template.bind({});
 Instruct.args = {
   memori,

package/src/components/StartPanel/StartPanel.test.tsx

@@ -44,6 +44,27 @@ it('renders StartPanel with gamification level unchanged', () => {
   expect(container).toMatchSnapshot();
 });
 
+it('renders StartPanel with completions enabled unchanged', () => {
+  const { container } = render(
+    <StartPanel
+      memori={{
+        ...memori,
+        enableCompletions: true,
+      }}
+      tenant={tenant}
+      language="it"
+      userLang="en"
+      setUserLang={() => {}}
+      openPositionDrawer={() => {}}
+      instruct={false}
+      sessionId={sessionID}
+      clickedStart={false}
+      onClickStart={() => {}}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
 it('renders StartPanel on instruct unchanged', () => {
   const { container } = render(
     <StartPanel

package/src/components/StartPanel/StartPanel.tsx

@@ -3,7 +3,7 @@ import {
   Memori,
   Tenant,
   Venue,
-} from '@memori.ai/memori-api-client/dist/types';
+} from '@memori.ai/memori-api-client/src/types';
 import React, { useState, useEffect } from 'react';
 import { getResourceUrl } from '../../helpers/media';
 import { useTranslation } from 'react-i18next';
@@ -13,6 +13,7 @@ import Button from '../ui/Button';
 import Translation from '../icons/Translation';
 import { chatLanguages } from '../../helpers/constants';
 import BlockedMemoriBadge from '../BlockedMemoriBadge/BlockedMemoriBadge';
+import Select from '../ui/Select';
 import AI from '../icons/AI';
 
 export interface Props {
@@ -125,6 +126,13 @@ const StartPanel: React.FC<Props> = ({
             </Tooltip>
           </div>
         )}
+        {!!memori.nsfw && (
+          <div className="memori--nsfw">
+            <Tooltip alignLeft content={t('nsfw')}>
+              <span title={t('nsfw') || 'NSFW'}>🔞</span>
+            </Tooltip>
+          </div>
+        )}
       </div>
       <picture className="memori--avatar">
         <source
@@ -197,29 +205,26 @@ const StartPanel: React.FC<Props> = ({
 
           {integrationConfig?.multilanguage && !instruct && (
             <div className="memori--language-chooser">
-              <label id="user-lang-pref-label" htmlFor="user-lang-pref">
-                {t('write_and_speak.iWantToTalkToIn', {
-                  name: memori.name,
-                })}
-              </label>
-              <select
-                id="user-lang-pref"
+              <Select
+                label={
+                  t('write_and_speak.iWantToTalkToIn', {
+                    name: memori.name,
+                  }) || undefined
+                }
                 value={(userLang ?? i18n.language).toUpperCase()}
-                aria-labelledby="user-lang-pref-label"
-                onChange={e => {
-                  setUserLang(e.target.value);
-                }}
-              >
-                {chatLanguages.map(lang => (
-                  <option
-                    key={lang.value}
-                    value={lang.value}
-                    aria-label={lang.label}
-                  >
-                    {lang.label}
-                  </option>
-                ))}
-              </select>
+                displayValue={
+                  chatLanguages.find(
+                    lang =>
+                      lang.value.toUpperCase() ===
+                      (userLang ?? i18n.language).toUpperCase()
+                  )?.label
+                }
+                onChange={setUserLang}
+                options={chatLanguages.map(lang => ({
+                  label: lang.label,
+                  value: lang.value.toUpperCase(),
+                }))}
+              />
             </div>
           )}