@memori.ai/memori-react 2.22.0 → 3.0.0-rc.0

package/src/components/MicrophoneButton/MicrophoneButton.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import MicrophoneButton, { Props } from './MicrophoneButton';
 
 import './MicrophoneButton.css';
@@ -27,14 +28,16 @@ const Template: Story<Props> = args => {
   const stopListening = () => setListening(false);
 
   return (
-    <div style={{ paddingTop: '10rem', textAlign: 'right' }}>
-      <MicrophoneButton
-        {...args}
-        listening={listening}
-        startListening={startListening}
-        stopListening={stopListening}
-      />
-    </div>
+    <I18nWrapper>
+      <div style={{ paddingTop: '10rem', textAlign: 'right' }}>
+        <MicrophoneButton
+          {...args}
+          listening={listening}
+          startListening={startListening}
+          stopListening={stopListening}
+        />
+      </div>
+    </I18nWrapper>
   );
 };
 

package/src/components/SendOnEnterMenu/SendOnEnterMenu.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import SendOnEnterMenu, { Props } from './SendOnEnterMenu';
 
 import './SendOnEnterMenu.css';
@@ -24,20 +25,23 @@ export default meta;
 
 const Template: Story<Props> = args => {
   const [sendOnEnter, setSendOnEnter] = React.useState(args.sendOnEnter);
+
   return (
-    <div
-      style={{
-        minHeight: '200px',
-        display: 'flex',
-        alignItems: 'flex-end',
-      }}
-    >
-      <SendOnEnterMenu
-        {...args}
-        sendOnEnter={sendOnEnter}
-        setSendOnEnter={setSendOnEnter}
-      />
-    </div>
+    <I18nWrapper>
+      <div
+        style={{
+          minHeight: '200px',
+          display: 'flex',
+          alignItems: 'flex-end',
+        }}
+      >
+        <SendOnEnterMenu
+          {...args}
+          sendOnEnter={sendOnEnter}
+          setSendOnEnter={setSendOnEnter}
+        />
+      </div>
+    </I18nWrapper>
   );
 };
 

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import SettingsDrawer, { Props } from './SettingsDrawer';
 import './SettingsDrawer.css';
 
@@ -27,14 +28,17 @@ const Template: Story<Props> = args => {
   const [controlsPosition, setControlsPosition] = React.useState<
     'bottom' | 'center'
   >('bottom');
+
   return (
-    <SettingsDrawer
-      {...args}
-      microphoneMode={microphoneMode}
-      setMicrophoneMode={setMicrophoneMode}
-      controlsPosition={controlsPosition}
-      setControlsPosition={setControlsPosition}
-    />
+    <I18nWrapper>
+      <SettingsDrawer
+        {...args}
+        microphoneMode={microphoneMode}
+        setMicrophoneMode={setMicrophoneMode}
+        controlsPosition={controlsPosition}
+        setControlsPosition={setControlsPosition}
+      />
+    </I18nWrapper>
   );
 };
 

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import ShareButton, { Props } from './ShareButton';
 import { tenant } from '../../mocks/data';
 
@@ -27,11 +28,17 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => <ShareButton {...args} />;
-const TemplateRight: Story<Props> = args => (
-  <div style={{ textAlign: 'right' }}>
+const Template: Story<Props> = args => (
+  <I18nWrapper>
     <ShareButton {...args} />
-  </div>
+  </I18nWrapper>
+);
+const TemplateRight: Story<Props> = args => (
+  <I18nWrapper>
+    <div style={{ textAlign: 'right' }}>
+      <ShareButton {...args} />
+    </div>
+  </I18nWrapper>
 );
 
 export const Default = Template.bind({});

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import Snippet from './Snippet';
 import { prismSyntaxLangs } from '../../helpers/constants';
 
@@ -82,15 +83,17 @@ const Template: Story<{
   content: string;
   preview?: boolean;
 }> = args => (
-  <Snippet
-    {...args}
-    medium={{
-      mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
-      mimeType: args.mimeType,
-      title: 'Snippet',
-      content: args.content,
-    }}
-  />
+  <I18nWrapper>
+    <Snippet
+      {...args}
+      medium={{
+        mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
+        mimeType: args.mimeType,
+        title: 'Snippet',
+        content: args.content,
+      }}
+    />
+  </I18nWrapper>
 );
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test

package/src/components/StartPanel/StartPanel.css

@@ -133,6 +133,7 @@
 }
 
 .memori--completions-enabled,
+.memori--board-of-experts,
 .memori--nsfw {
     position: absolute;
     right: 2.5rem;
@@ -161,4 +162,15 @@
 
 .memori--completions-enabled+.memori--nsfw {
     right: 4.75rem;
+}
+
+.memori--board-of-experts {
+    right: 0.25rem;
+}
+
+.memori--board-of-experts svg {
+    overflow: visible;
+    width: 1rem;
+    height: 1rem;
+    fill: #000;
 }

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import { memori, sessionID, integration, tenant } from '../../mocks/data';
 import StartPanel, { Props } from './StartPanel';
 
@@ -80,12 +81,14 @@ const integrationStylesheet = `
   `;
 
 const Template: Story<Props> = args => (
-  <div style={{ maxWidth: '600px', margin: 'auto' }}>
-    {args.integrationConfig && (
-      <style dangerouslySetInnerHTML={{ __html: integrationStylesheet }} />
-    )}
-    <StartPanel {...args} />
-  </div>
+  <I18nWrapper>
+    <div style={{ maxWidth: '600px', margin: 'auto' }}>
+      {args.integrationConfig && (
+        <style dangerouslySetInnerHTML={{ __html: integrationStylesheet }} />
+      )}
+      <StartPanel {...args} />
+    </div>
+  </I18nWrapper>
 );
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
@@ -187,6 +190,29 @@ WithAllTheBadges.args = {
   onClickStart: () => {},
 };
 
+export const BoardOfExpert = Template.bind({});
+BoardOfExpert.args = {
+  memori: {
+    ...memori,
+    enableBoardOfExperts: true,
+    enableCompletions: 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

@@ -65,6 +65,27 @@ it('renders StartPanel with completions enabled unchanged', () => {
   expect(container).toMatchSnapshot();
 });
 
+it('renders StartPanel for board of experts unchanged', () => {
+  const { container } = render(
+    <StartPanel
+      memori={{
+        ...memori,
+        enableBoardOfExperts: 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

@@ -14,6 +14,7 @@ import Translation from '../icons/Translation';
 import { chatLanguages } from '../../helpers/constants';
 import BlockedMemoriBadge from '../BlockedMemoriBadge/BlockedMemoriBadge';
 import AI from '../icons/AI';
+import Group from '../icons/Group';
 import CompletionProviderStatus from '../CompletionProviderStatus/CompletionProviderStatus';
 
 export interface Props {
@@ -101,7 +102,7 @@ const StartPanel: React.FC<Props> = ({
           })}")`,
         }}
       >
-        {!!gamificationLevel?.badge?.length && (
+        {!!gamificationLevel?.badge?.length && !memori.enableBoardOfExperts && (
           <div className="memori--gamification-badge">
             <Tooltip
               align="left"
@@ -119,7 +120,7 @@ const StartPanel: React.FC<Props> = ({
             </Tooltip>
           </div>
         )}
-        {!!memori.enableCompletions && (
+        {!!memori.enableCompletions && !memori.enableBoardOfExperts && (
           <div className="memori--completions-enabled">
             <Tooltip align="left" content={t('completionsEnabled')}>
               <span aria-label={t('completionsEnabled') || 'Completions'}>
@@ -128,6 +129,15 @@ const StartPanel: React.FC<Props> = ({
             </Tooltip>
           </div>
         )}
+        {!!memori.enableBoardOfExperts && (
+          <div className="memori--board-of-experts">
+            <Tooltip align="left" content={t('boardOfExperts')}>
+              <span aria-label={t('boardOfExperts') || 'Board of Experts'}>
+                <Group />
+              </span>
+            </Tooltip>
+          </div>
+        )}
         {!!memori.nsfw && (
           <div className="memori--nsfw">
             <Tooltip align="left" content={t('nsfw')}>

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

@@ -1,5 +1,94 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders StartPanel for board of experts unchanged 1`] = `
+<div>
+  <div
+    class="memori--start-panel"
+  >
+    <div
+      class="memori--cover"
+    >
+      <div
+        class="memori--board-of-experts"
+      >
+        <div
+          class="memori-tooltip memori-tooltip--align-left"
+        >
+          <div
+            class="memori-tooltip--content"
+          >
+            boardOfExperts
+          </div>
+          <div
+            class="memori-tooltip--trigger"
+          >
+            <span
+              aria-label="boardOfExperts"
+            >
+              <svg
+                aria-hidden="true"
+                fill="none"
+                focusable="false"
+                height="16"
+                role="img"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 640 512"
+                width="20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M211.2 96a64 64 0 10-128 0 64 64 0 10128 0zM32 256c0 17.7 14.3 32 32 32h85.6c10.1-39.4 38.6-71.5 75.8-86.6-9.7-6-21.2-9.4-33.4-9.4H96c-35.3 0-64 28.7-64 64zm461.6 32H576c17.7 0 32-14.3 32-32 0-35.3-28.7-64-64-64h-96c-11.7 0-22.7 3.1-32.1 8.6 38.1 14.8 67.4 47.3 77.7 87.4zm-102.4-61.6c-6.9-1.6-14.2-2.4-21.6-2.4h-96c-8.5 0-16.7 1.1-24.5 3.1-30.8 8.1-55.6 31.1-66.1 60.9-3.5 10-5.5 20.8-5.5 32 0 17.7 14.3 32 32 32h224c17.7 0 32-14.3 32-32 0-11.2-1.9-22-5.5-32-10.8-30.7-36.8-54.2-68.9-61.6zM563.2 96a64 64 0 10-128 0 64 64 0 10128 0zm-241.6 96a80 80 0 100-160 80 80 0 100 160zM32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32h576c17.7 0 32-14.3 32-32s-14.3-32-32-32H32z"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <picture
+      class="memori--avatar"
+    >
+      <source
+        src="https://app.twincreator.com/images/twincreator/square_logo.png"
+      />
+      <img
+        alt="Memori"
+        src="https://app.twincreator.com/images/twincreator/square_logo.png"
+      />
+    </picture>
+    <h2
+      class="memori--title"
+    >
+      Memori
+    </h2>
+    <div
+      class="memori--description"
+    >
+      <p>
+        <span
+          class="memori--description-text"
+        >
+          Lorem ipsum.
+        </span>
+      </p>
+      <button
+        class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"
+      >
+        write_and_speak.tryMeButton
+      </button>
+      <p
+        class="memori--start-description"
+      >
+        write_and_speak.pageTryMeExplanation
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders StartPanel on instruct unchanged 1`] = `
 <div>
   <div

package/src/components/Typing/Typing.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import Typing, { Props } from './Typing';
 
 const meta: Meta = {
@@ -30,8 +31,11 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => <Typing {...args} />;
-
+const Template: Story<Props> = args => (
+  <I18nWrapper>
+    <Typing {...args} />
+  </I18nWrapper>
+);
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing
 export const Default = Template.bind({});

package/src/components/UploadMenu/UploadMenu.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
 import UploadMenu, { Props } from './UploadMenu';
 
 import './UploadMenu.css';
@@ -27,19 +28,21 @@ const Template: Story<Props> = args => {
     'link' | 'media' | undefined
   >(args.attachmentsMenuOpen);
   return (
-    <div
-      style={{
-        minHeight: '200px',
-        display: 'flex',
-        alignItems: 'flex-end',
-      }}
-    >
-      <UploadMenu
-        {...args}
-        attachmentsMenuOpen={attachmentsMenuOpen}
-        setAttachmentsMenuOpen={setAttachmentsMenuOpen}
-      />
-    </div>
+    <I18nWrapper>
+      <div
+        style={{
+          minHeight: '200px',
+          display: 'flex',
+          alignItems: 'flex-end',
+        }}
+      >
+        <UploadMenu
+          {...args}
+          attachmentsMenuOpen={attachmentsMenuOpen}
+          setAttachmentsMenuOpen={setAttachmentsMenuOpen}
+        />
+      </div>
+    </I18nWrapper>
   );
 };
 

package/src/components/icons/Group.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const Group = ({
+  className,
+  title,
+}: {
+  className?: string;
+  title?: string;
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="2"
+    width="20"
+    height="16"
+    viewBox="0 0 640 512"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M211.2 96a64 64 0 10-128 0 64 64 0 10128 0zM32 256c0 17.7 14.3 32 32 32h85.6c10.1-39.4 38.6-71.5 75.8-86.6-9.7-6-21.2-9.4-33.4-9.4H96c-35.3 0-64 28.7-64 64zm461.6 32H576c17.7 0 32-14.3 32-32 0-35.3-28.7-64-64-64h-96c-11.7 0-22.7 3.1-32.1 8.6 38.1 14.8 67.4 47.3 77.7 87.4zm-102.4-61.6c-6.9-1.6-14.2-2.4-21.6-2.4h-96c-8.5 0-16.7 1.1-24.5 3.1-30.8 8.1-55.6 31.1-66.1 60.9-3.5 10-5.5 20.8-5.5 32 0 17.7 14.3 32 32 32h224c17.7 0 32-14.3 32-32 0-11.2-1.9-22-5.5-32-10.8-30.7-36.8-54.2-68.9-61.6zM563.2 96a64 64 0 10-128 0 64 64 0 10128 0zm-241.6 96a80 80 0 100-160 80 80 0 100 160zM32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32h576c17.7 0 32-14.3 32-32s-14.3-32-32-32H32z"></path>
+  </svg>
+);
+
+export default Group;

package/src/helpers/media.test.ts

@@ -12,7 +12,7 @@ describe('Media URL helper', () => {
         baseURL: 'https://twin.memori.ai',
         apiURL: 'https://backend.memori.ai/api/v2',
       })
-    ).toBe('https://twin.memori.ai/images/memoriAvatar.png');
+    ).toBe('https://twin.memori.ai/images/memoriAvatar.png?v=20231208');
   });
   it('Get default cover URL with no url', async () => {
     expect(

package/src/helpers/media.ts

@@ -16,7 +16,7 @@ export const getResourceUrl = ({
   let defaultUri =
     type === 'cover'
       ? `${baseURL}/images/memoriCover.png`
-      : `${baseURL}/images/memoriAvatar.png`;
+      : `${baseURL}/images/memoriAvatar.png?v=20231208`;
 
   try {
     if (!resourceURI || resourceURI.length === 0) {

package/src/i18n.ts

@@ -1,5 +1,4 @@
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
+import { createInstance } from 'i18next';
 import it from './locales/it.json';
 import en from './locales/en.json';
 
@@ -12,7 +11,7 @@ const resources = {
   },
 };
 
-i18n.use(initReactI18next).init({
+const i18n = createInstance({
   resources,
   lng: 'en',
   fallbackLng: 'it',
@@ -23,4 +22,6 @@ i18n.use(initReactI18next).init({
   },
 });
 
+i18n.init();
+
 export default i18n;

package/src/index.tsx

@@ -12,7 +12,7 @@ import MemoriWidget, {
 import { getTenant } from './helpers/tenant';
 
 import i18n from './i18n';
-import { useTranslation } from 'react-i18next';
+import { I18nextProvider, useTranslation } from 'react-i18next';
 
 export interface Props {
   memoriName?: string | null;
@@ -202,7 +202,7 @@ const Memori: React.FC<Props> = ({
     }
   }, [uiLang]);
 
-  return memori ? (
+  const renderer = memori ? (
     <MemoriWidget
       layout={layout}
       customLayout={customLayout}
@@ -256,11 +256,19 @@ const Memori: React.FC<Props> = ({
         justifyContent: 'center',
       }}
     >
-      <p style={{ textAlign: 'center', margin: '2rem auto' }}>
-        {t('loading')}...
+      <p
+        style={{
+          textAlign: 'center',
+          margin: '2rem auto',
+          textTransform: 'capitalize',
+        }}
+      >
+        {t('loading') || 'Loading'}...
       </p>
     </div>
   );
+
+  return <I18nextProvider i18n={i18n}>{renderer}</I18nextProvider>;
 };
 
 Memori.propTypes = {

package/src/locales/en.json

@@ -12,6 +12,7 @@
   "delete": "Delete",
   "loading": "Loading",
   "expand": "Expand",
+  "collapse": "Collapse",
   "fullscreenEnter": "Enter fullscreen",
   "fullscreenExit": "Exit fullscreen",
   "center": "Center",
@@ -34,6 +35,7 @@
   "completionProviderDown": "This Twin is integrated with a generative AI from {{provider}}, but it is currently unavailable. Try again later.",
   "completionProviderFallbackName": "an external provider",
   "completionProviderCheckStatusPage": "Check status page",
+  "boardOfExperts": "Board of experts",
   "birthDate": "Birth date",
   "birthDateHelper": "We ask for your birth date only to enable or disable functionalities that have age restrictions",
   "underage": "You must be at least {{age}} years old to sign up.",

package/src/locales/it.json

@@ -12,6 +12,7 @@
   "delete": "Elimina",
   "loading": "Caricamento",
   "expand": "Espandi",
+  "collapse": "Riduci",
   "fullscreenEnter": "Passa a schermo intero",
   "fullscreenExit": "Esci da schermo intero",
   "center": "Centro",
@@ -34,6 +35,7 @@
   "completionProviderDown": "Questo Twin è integrato con una IA generativa di {{provider}}, ma al momento non è disponibile. Riprova più tardi.",
   "completionProviderFallbackName": "un provider esterno",
   "completionProviderCheckStatusPage": "Vedi pagina di stato",
+  "boardOfExperts": "Gruppo di esperti",
   "birthDate": "Data di nascita",
   "birthDateHelper": "Ti chiediamo la data di nascita esclusivamente per abilitare o disabilitare le funzionalità che hanno restrizioni in base all'età",
   "underage": "Devi avere almeno {{age}} anni per registrarti.",