@memori.ai/memori-react 2.3.1 → 2.4.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 
 
+## [2.4.1](https://github.com/memori-ai/memori-react/compare/v2.4.0...v2.4.1) (2023-06-19)
+
+
+### Bug Fixes
+
+* default spoken lang order, first is prop ([eadac28](https://github.com/memori-ai/memori-react/commit/eadac284d96f2f5d974967a178638b4314dac3be))
+
+## [2.4.0](https://github.com/memori-ai/memori-react/compare/v2.3.1...v2.4.0) (2023-06-07)
+
+
+### Changes
+
+* chat layout with layout props ([eee4cf5](https://github.com/memori-ai/memori-react/commit/eee4cf5e893dd65e7b341516a0f2dcfb65519841))
+* move everything as layout prop ([1c42027](https://github.com/memori-ai/memori-react/commit/1c42027083ba772b533c9d8035e599327fa19e6f))
+
 ## [2.3.1](https://github.com/memori-ai/memori-react/compare/v2.3.0...v2.3.1) (2023-06-07)
 
 

package/README.md

@@ -79,7 +79,7 @@ const App = () => (
 | `spokenLang`                       |                | `string`                |                             | Language of the spoken text, as defaults to user selection. Example: "en" or "it"                                                                                                                                                                                                                                                                                                                                                       |
 | `onStateChange`                    |                | `function`              |                             | Callback function called when the state of the Memori changes                                                                                                                                                                                                                                                                                                                                                                           |
 | `AZURE_COGNITIVE_SERVICES_TTS_KEY` |                | `string`                |                             | Azure Cognitive Services TTS key, used to generate the audio of the Memori and for STT recognition                                                                                                                                                                                                                                                                                                                                      |
-| `layout`                           |                | `string`                |                             | Layout of the Memori, can be "FULLPAGE" (default), "CHAT" or "TOTEM", see [below](#layouts)                                                                                                                                                                                                                                                                                                                                                     |
+| `layout`                           |                | `string`                |                             | Layout of the Memori, can be "FULLPAGE" (default), "CHAT" or "TOTEM", see [below](#layouts)                                                                                                                                                                                                                                                                                                                                             |
 | `customLayout`                     |                | `React.FC<LayoutProps>` |                             | Custom layout component, see [below](#custom-layout)                                                                                                                                                                                                                                                                                                                                                                                    |
 
 \*: one of these pairs is required: `memoriName` + `ownerUserName`, `memoriID` + `ownerUserID`
@@ -110,14 +110,19 @@ The custom layout component must be a React functional component that accepts a
 ```tsx
 import type { LayoutProps } from '@memori.ai/memori-react/components/MemoriWidget';
 
-const MyCustomLayout: React.FC<LayoutProps> = = ({
-  header,
-  avatar,
-  chat,
-  startPanel,
+const MyCustomLayout: React.FC<LayoutProps> = ({
+  Header,
+  headerProps,
+  Avatar,
+  avatarProps,
+  Chat,
+  chatProps,
+  StartPanel,
+  startPanelProps,
   integrationStyle,
   integrationBackground,
-  changeMode,
+  ChangeMode,
+  changeModeProps,
   sessionId,
   hasUserActivatedSpeak,
   showInstruct = false,
@@ -132,7 +137,11 @@ const MyCustomLayout: React.FC<LayoutProps> = = ({
       {poweredBy}
 
       <div className="memori-mycustom-layout--controls">
-        {sessionId && hasUserActivatedSpeak ? chat : startPanel}
+        {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
+          <Chat {...chatProps} />
+        ) : startPanelProps ? (
+          <StartPanel {...startPanelProps} />
+        ) : null}
       </div>
     </Spin>
   </>
@@ -148,6 +157,51 @@ And then pass it to the `customLayout` prop:
   />
 ```
 
+## Component overrides
+
+When using the `customLayout` prop, you can also override the default components used by the client.
+
+```tsx
+const MyCustomChat: LayoutProps['Chat'] = ({ history, sendMessage }) => {
+  const [message, setMessage] = React.useState('');
+
+  ...
+}
+
+const MyCustomAvatar: LayoutProps['Avatar'] = (props) => {
+  ...
+}
+
+const CustomLayout: React.FC<LayoutProps> = ({
+  avatarProps,
+  chatProps,
+  StartPanel,
+  startPanelProps,
+  sessionId,
+  hasUserActivatedSpeak,
+  loading = false,
+  poweredBy,
+}) => (
+  <>
+    <Spin spinning={loading} className="memori-mycustom-layout">
+      {poweredBy}
+
+      <div className="memori-mycustom-layout--avatar">
+        <MyCustomAvatar {...avatarProps} />
+      </div>
+
+      <div className="memori-mycustom-layout--controls">
+        {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
+          <MyCustomChat {...chatProps} />
+        ) : startPanelProps ? (
+          <StartPanel {...startPanelProps} />
+        ) : null}
+      </div>
+    </Spin>
+  </>
+);
+```
+
 ## See also
 
 - [memori-api-client](https://github.com/memori-ai/memori-api-client) - API client for Memori

package/dist/components/MemoriWidget/MemoriWidget.d.ts

@@ -1,5 +1,10 @@
 import { DialogState, Memori, Integration, MemoriConfig, Tenant } from '@memori.ai/memori-api-client/src/types';
 import React from 'react';
+import Chat, { Props as ChatProps } from '../Chat/Chat';
+import StartPanel, { Props as StartPanelProps } from '../StartPanel/StartPanel';
+import Avatar, { Props as AvatarProps } from '../Avatar/Avatar';
+import ChangeMode, { Props as ChangeModeProps } from '../ChangeMode/ChangeMode';
+import Header, { Props as HeaderProps } from '../Header/Header';
 declare const getMemoriState: (integrationId?: string | undefined) => object | null;
 declare const typeMessage: (message: string) => void;
 declare global {
@@ -9,13 +14,18 @@ declare global {
     }
 }
 export interface LayoutProps {
-    header?: JSX.Element | null;
-    avatar: JSX.Element;
-    chat?: JSX.Element | null;
-    startPanel: JSX.Element;
+    Header?: typeof Header;
+    headerProps?: HeaderProps;
+    Avatar: typeof Avatar;
+    avatarProps?: AvatarProps;
+    Chat?: typeof Chat;
+    chatProps?: ChatProps;
+    StartPanel: typeof StartPanel;
+    startPanelProps?: StartPanelProps;
     integrationStyle?: JSX.Element | null;
     integrationBackground?: JSX.Element | null;
-    changeMode?: JSX.Element | null;
+    ChangeMode?: typeof ChangeMode;
+    changeModeProps?: ChangeModeProps;
     poweredBy?: JSX.Element | null;
     sessionId?: string;
     hasUserActivatedSpeak?: boolean;

package/dist/components/MemoriWidget/MemoriWidget.js

@@ -87,7 +87,7 @@ let speechSynthesizer;
 let audioDestination;
 let audioContext;
 const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, layout = 'DEFAULT', customLayout, showInstruct = false, showShare = true, preview = false, embed = false, showInputs = true, showDates = false, showContextPerLine = false, showSettings = true, height = '100vh', secret, baseUrl = 'https://app.twincreator.com', apiUrl = 'https://backend.memori.ai', initialContextVars, initialQuestion, ogImage, sessionID: initialSessionID, tenant, personification, authToken, AZURE_COGNITIVE_SERVICES_TTS_KEY, onStateChange, }) => {
-    var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _t, _u, _v, _w, _x, _y;
+    var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _t, _u, _v, _w, _x;
     const { t, i18n } = (0, react_i18next_1.useTranslation)();
     const [isClient, setIsClient] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
@@ -103,7 +103,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, layout =
         ? JSON.parse(integration.customData)
         : null;
     const isMultilanguageEnabled = !!(integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.multilanguage);
-    const [userLang, setUserLang] = (0, react_1.useState)((_o = (_m = (_l = (_k = (_g = (_f = integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.lang) !== null && _f !== void 0 ? _f : memoriLang) !== null && _g !== void 0 ? _g : (_j = (_h = memori === null || memori === void 0 ? void 0 : memori.culture) === null || _h === void 0 ? void 0 : _h.split('-')) === null || _j === void 0 ? void 0 : _j[0]) !== null && _k !== void 0 ? _k : language) !== null && _l !== void 0 ? _l : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.uiLang) !== null && _m !== void 0 ? _m : i18n.language) !== null && _o !== void 0 ? _o : 'IT');
+    const [userLang, setUserLang] = (0, react_1.useState)((_m = (_l = (_k = (_j = (_f = memoriLang !== null && memoriLang !== void 0 ? memoriLang : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.lang) !== null && _f !== void 0 ? _f : (_h = (_g = memori === null || memori === void 0 ? void 0 : memori.culture) === null || _g === void 0 ? void 0 : _g.split('-')) === null || _h === void 0 ? void 0 : _h[0]) !== null && _j !== void 0 ? _j : language) !== null && _k !== void 0 ? _k : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.uiLang) !== null && _l !== void 0 ? _l : i18n.language) !== null && _m !== void 0 ? _m : 'IT');
     const [loading, setLoading] = (0, react_1.useState)(false);
     const [memoriTyping, setMemoriTyping] = (0, react_1.useState)(false);
     const selectedLayout = layout || (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.layout) || 'DEFAULT';
@@ -1115,7 +1115,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, layout =
         ? {
             '--memori-chat-bubble-bg': '#fff',
             ...(integrationConfig && !showInstruct
-                ? { '--memori-text-color': (_p = integrationConfig.textColor) !== null && _p !== void 0 ? _p : '#000' }
+                ? { '--memori-text-color': (_o = integrationConfig.textColor) !== null && _o !== void 0 ? _o : '#000' }
                 : {}),
             ...((integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.buttonBgColor)
                 ? {
@@ -1139,12 +1139,12 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, layout =
                 ? {
                     '--memori-inner-bg': `rgba(${integrationConfig.innerBgColor === 'dark'
                         ? '0, 0, 0'
-                        : '255, 255, 255'}, ${(_q = integrationConfig.innerBgAlpha) !== null && _q !== void 0 ? _q : 0.4})`,
+                        : '255, 255, 255'}, ${(_p = integrationConfig.innerBgAlpha) !== null && _p !== void 0 ? _p : 0.4})`,
                     '--memori-inner-content-pad': '1.5rem',
                     '--memori-nav-bg-image': 'none',
                     '--memori-nav-bg': `rgba(${integrationConfig.innerBgColor === 'dark'
                         ? '0, 0, 0'
-                        : '255, 255, 255'}, ${(_r = integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.innerBgAlpha) !== null && _r !== void 0 ? _r : 0.4})`,
+                        : '255, 255, 255'}, ${(_q = integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.innerBgAlpha) !== null && _q !== void 0 ? _q : 0.4})`,
                 }
                 : {
                     '--memori-inner-content-pad': '0px',
@@ -1493,7 +1493,16 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, layout =
             observer.disconnect();
         };
     }, []);
-    const header = ((0, jsx_runtime_1.jsx)(Header_1.default, { memori: memori, history: history, showShare: showShare, position: position, setShowPositionDrawer: setShowPositionDrawer, setShowSettingsDrawer: setShowSettingsDrawer, showSpeaker: !!AZURE_COGNITIVE_SERVICES_TTS_KEY, speakerMuted: muteSpeaker, setSpeakerMuted: mute => {
+    const headerProps = {
+        memori,
+        history,
+        showShare,
+        position,
+        setShowPositionDrawer,
+        setShowSettingsDrawer,
+        showSpeaker: !!AZURE_COGNITIVE_SERVICES_TTS_KEY,
+        speakerMuted: muteSpeaker,
+        setSpeakerMuted: mute => {
             setMuteSpeaker(mute);
             if (mute) {
                 stopAudio();
@@ -1505,20 +1514,91 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, layout =
                 source.buffer = buffer;
                 source.connect(audioContext.destination);
             }
-        }, showSettings: showSettings, hasUserActivatedSpeak: hasUserActivatedSpeak, showReload: selectedLayout === 'TOTEM' }));
-    const avatar = ((0, jsx_runtime_1.jsx)(Avatar_1.default, { memori: memori, integration: integration, integrationConfig: integrationConfig, tenant: tenant, instruct: instruct, avatar3dVisible: avatar3dVisible, setAvatar3dVisible: setAvatar3dVisible, hasUserActivatedSpeak: hasUserActivatedSpeak, isPlayingAudio: isPlayingAudio, loading: memoriTyping, baseUrl: baseUrl, apiUrl: apiUrl }));
-    const startPanel = ((0, jsx_runtime_1.jsx)(StartPanel_1.default, { memori: memori, tenant: tenant, gamificationLevel: gamificationLevel, language: language, userLang: userLang, setUserLang: setUserLang, baseUrl: baseUrl, apiUrl: apiUrl, position: position, openPositionDrawer: () => setShowPositionDrawer(true), integrationConfig: integrationConfig, instruct: instruct, sessionId: sessionId, clickedStart: clickedStart, onClickStart: onClickStart, initializeTTS: initializeTTS }));
-    const chat = sessionId ? ((0, jsx_runtime_1.jsx)(Chat_1.default, { memori: memori, sessionID: sessionId, tenant: tenant, translateTo: isMultilanguageEnabled &&
+        },
+        showSettings,
+        hasUserActivatedSpeak,
+        showReload: selectedLayout === 'TOTEM',
+    };
+    const avatarProps = {
+        memori,
+        integration,
+        integrationConfig,
+        tenant,
+        instruct,
+        avatar3dVisible,
+        setAvatar3dVisible,
+        hasUserActivatedSpeak,
+        isPlayingAudio,
+        loading: memoriTyping,
+        baseUrl,
+        apiUrl,
+    };
+    const startPanelProps = {
+        memori: memori,
+        tenant: tenant,
+        gamificationLevel: gamificationLevel,
+        language: language,
+        userLang: userLang,
+        setUserLang: setUserLang,
+        baseUrl: baseUrl,
+        apiUrl: apiUrl,
+        position: position,
+        openPositionDrawer: () => setShowPositionDrawer(true),
+        integrationConfig: integrationConfig,
+        instruct: instruct,
+        sessionId: sessionId,
+        clickedStart: clickedStart,
+        onClickStart: onClickStart,
+        initializeTTS: initializeTTS,
+    };
+    const chatProps = {
+        memori,
+        sessionID: sessionId || '',
+        tenant,
+        translateTo: isMultilanguageEnabled &&
             userLang.toUpperCase() !==
-                ((_x = ((_w = (_v = (_u = (_t = memori.culture) === null || _t === void 0 ? void 0 : _t.split('-')) === null || _u === void 0 ? void 0 : _u[0]) !== null && _v !== void 0 ? _v : i18n.language) !== null && _w !== void 0 ? _w : 'IT')) === null || _x === void 0 ? void 0 : _x.toUpperCase())
+                ((_w = ((_v = (_u = (_t = (_r = memori.culture) === null || _r === void 0 ? void 0 : _r.split('-')) === null || _t === void 0 ? void 0 : _t[0]) !== null && _u !== void 0 ? _u : i18n.language) !== null && _v !== void 0 ? _v : 'IT')) === null || _w === void 0 ? void 0 : _w.toUpperCase())
             ? userLang
-            : undefined, baseUrl: baseUrl, apiUrl: apiUrl, memoriTyping: memoriTyping, history: layout === 'TOTEM' ? history.slice(-2) : history, authToken: loginToken, dialogState: currentDialogState, setDialogState: setCurrentDialogState, pushMessage: pushMessage, simulateUserPrompt: simulateUserPrompt, showDates: showDates, showContextPerLine: showContextPerLine, showAIicon: showAIicon, client: client, selectReceiverTag: selectReceiverTag, preview: preview, sendOnEnter: sendOnEnter, microphoneMode: continuousSpeech ? 'CONTINUOUS' : 'HOLD_TO_TALK', setSendOnEnter: setSendOnEnter, attachmentsMenuOpen: attachmentsMenuOpen, setAttachmentsMenuOpen: setAttachmentsMenuOpen, instruct: instruct, showInputs: showInputs, showMicrophone: !!AZURE_COGNITIVE_SERVICES_TTS_KEY, userMessage: userMessage, onChangeUserMessage: onChangeUserMessage, sendMessage: (msg) => {
+            : undefined,
+        baseUrl,
+        apiUrl,
+        memoriTyping,
+        history: layout === 'TOTEM' ? history.slice(-2) : history,
+        authToken: loginToken,
+        dialogState: currentDialogState,
+        setDialogState: setCurrentDialogState,
+        pushMessage,
+        simulateUserPrompt,
+        showDates,
+        showContextPerLine,
+        showAIicon,
+        client,
+        selectReceiverTag,
+        preview,
+        sendOnEnter,
+        setSendOnEnter,
+        microphoneMode: continuousSpeech ? 'CONTINUOUS' : 'HOLD_TO_TALK',
+        attachmentsMenuOpen,
+        setAttachmentsMenuOpen,
+        instruct,
+        showInputs,
+        showMicrophone: !!AZURE_COGNITIVE_SERVICES_TTS_KEY,
+        userMessage,
+        onChangeUserMessage,
+        sendMessage: (msg) => {
             stopAudio();
             stopListening();
             sendMessage(msg);
             setUserMessage('');
             resetTranscript();
-        }, stopListening: clearListening, startListening: startListening, stopAudio: stopAudio, resetTranscript: resetTranscript, listening: listening, isPlayingAudio: isPlayingAudio })) : null;
+        },
+        stopListening: clearListening,
+        startListening,
+        stopAudio,
+        resetTranscript,
+        listening,
+        isPlayingAudio,
+    };
     const integrationBackground = integration && globalBackgroundUrl ? ((0, jsx_runtime_1.jsx)("div", { className: "memori--global-background", children: (0, jsx_runtime_1.jsx)("div", { className: "memori--global-background-image", style: { backgroundImage: globalBackgroundUrl } }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "memori--global-background no-background-image" }));
     const integrationStyle = integration ? ((0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: integrationStylesheet } })) : null;
     const onChangeMode = (mode) => {
@@ -1526,7 +1606,11 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, layout =
         setHasUserActivatedSpeak(false);
         setClickedStart(false);
     };
-    const changeMode = ((0, jsx_runtime_1.jsx)(ChangeMode_1.default, { canInstruct: !!memori.giverTag, instruct: instruct, onChangeMode: onChangeMode }));
+    const changeModeProps = {
+        canInstruct: !!memori.giverTag,
+        instruct: !!instruct,
+        onChangeMode,
+    };
     const poweredBy = (0, jsx_runtime_1.jsx)(PoweredBy_1.default, { tenant: tenant, userLang: userLang });
     const Layout = customLayout
         ? customLayout
@@ -1547,7 +1631,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, layout =
         }), "data-memori-name": memori === null || memori === void 0 ? void 0 : memori.name, "data-memori-id": memori === null || memori === void 0 ? void 0 : memori.engineMemoriID, "data-memori-secondary-id": memori === null || memori === void 0 ? void 0 : memori.memoriID, "data-memori-session-id": sessionId, "data-memori-integration": integration === null || integration === void 0 ? void 0 : integration.integrationID, "data-memori-engine-state": JSON.stringify({
             ...currentDialogState,
             sessionID: sessionId,
-        }), style: { height }, children: [(0, jsx_runtime_1.jsx)(Layout, { header: header, avatar: avatar, chat: chat, startPanel: startPanel, integrationStyle: integrationStyle, integrationBackground: integrationBackground, changeMode: changeMode, poweredBy: poweredBy, sessionId: sessionId, hasUserActivatedSpeak: hasUserActivatedSpeak, showInstruct: showInstruct, loading: loading }), (0, jsx_runtime_1.jsx)("audio", { id: "memori-audio", style: { display: 'none' }, src: "https://app.twincreator.com/intro.mp3" }), isClient && ((0, jsx_runtime_1.jsx)(Auth_1.default, { withModal: true, pwdOrTokens: authModalState, openModal: !!authModalState, setPwdOrTokens: setAuthModalState, showTokens: memori.privacyType === 'SECRET', onFinish: async (values) => {
+        }), style: { height }, children: [(0, jsx_runtime_1.jsx)(Layout, { Header: Header_1.default, headerProps: headerProps, Avatar: Avatar_1.default, avatarProps: avatarProps, Chat: Chat_1.default, chatProps: chatProps, StartPanel: StartPanel_1.default, startPanelProps: startPanelProps, integrationStyle: integrationStyle, integrationBackground: integrationBackground, ChangeMode: ChangeMode_1.default, changeModeProps: changeModeProps, poweredBy: poweredBy, sessionId: sessionId, hasUserActivatedSpeak: hasUserActivatedSpeak, showInstruct: showInstruct, loading: loading }), (0, jsx_runtime_1.jsx)("audio", { id: "memori-audio", style: { display: 'none' }, src: "https://app.twincreator.com/intro.mp3" }), isClient && ((0, jsx_runtime_1.jsx)(Auth_1.default, { withModal: true, pwdOrTokens: authModalState, openModal: !!authModalState, setPwdOrTokens: setAuthModalState, showTokens: memori.privacyType === 'SECRET', onFinish: async (values) => {
                     if (values['password'])
                         setMemoriPwd(values['password']);
                     if (values['tokens'])
@@ -1561,7 +1645,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, layout =
                         setAuthModalState(null);
                         setGotErrorInOpening(true);
                     });
-                }, minimumNumberOfRecoveryTokens: (_y = memori === null || memori === void 0 ? void 0 : memori.minimumNumberOfRecoveryTokens) !== null && _y !== void 0 ? _y : 1 })), isClient && ((0, jsx_runtime_1.jsx)(AgeVerificationModal_1.default, { visible: showAgeVerification, minAge: minAge, onClose: birthDate => {
+                }, minimumNumberOfRecoveryTokens: (_x = memori === null || memori === void 0 ? void 0 : memori.minimumNumberOfRecoveryTokens) !== null && _x !== void 0 ? _x : 1 })), isClient && ((0, jsx_runtime_1.jsx)(AgeVerificationModal_1.default, { visible: showAgeVerification, minAge: minAge, onClose: birthDate => {
                     if (birthDate) {
                         setBirthDate(birthDate);
                         (0, configuration_1.setLocalConfig)('birthDate', birthDate);