Memori React

Library to integrate a Twin from Memori in a React app.

Web Platform: AIsuru

Installation

yarn add @memori.ai/memori-react

npm install @memori.ai/memori-react

Usage

Import the component:

import Memori from '@memori.ai/memori-react';

Import the CSS:

import '@memori.ai/memori-react/dist/styles.css';

Then use it in your app:

const App = () => (
  <Memori
    memoriName="Memori"
    ownerUserName="memoridev"
    tenantID="www.aisuru.com"
    apiURL="https://backend.memori.ai"
    engineURL="https://engine.memori.ai"
    baseURL="https://www.aisuru.com"
    uiLang="it"
    multilingual
    showShare
    height="100vh"
  />
);

Props

*: one of these pairs is required: memoriName + ownerUserName, memoriID + ownerUserID

Layouts

The Memori can be displayed in five different layouts: FULLPAGE, CHAT, WEBSITE_ASSISTANT,TOTEM, HIDDEN_CHAT and ZOOMED_FULL_BODY. If you don't specify a layout, the default one is FULLPAGE.

FULLPAGE

TOTEM

CHAT

WEBSITE_ASSISTANT

HIDDEN_CHAT

ZOOMED_FULL_BODY

Custom layout

You can override the default layout by passing a custom layout component to the customLayout prop.

The custom layout component must be a React functional component that accepts a LayoutProps object as props.

import { LayoutProps } from '@memori.ai/memori-react/dist/components/MemoriWidget/MemoriWidget';

const MyCustomLayout: React.FC<LayoutProps> = ({
  Header,
  headerProps,
  Avatar,
  avatarProps,
  Chat,
  chatProps,
  StartPanel,
  startPanelProps,
  integrationStyle,
  integrationBackground,
  ChangeMode,
  changeModeProps,
  sessionId,
  hasUserActivatedSpeak,
  showInstruct = false,
  loading = false,
  poweredBy,
}) => (
  <>
    {integrationStyle}
    {integrationBackground}

    <Spin spinning={loading} className="memori-mycustom-layout">
      {poweredBy}

      <div className="memori-mycustom-layout--controls">
        {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
          <Chat {...chatProps} />
        ) : startPanelProps ? (
          <StartPanel {...startPanelProps} />
        ) : null}
      </div>
    </Spin>
  </>
);

And then pass it to the customLayout prop:

  <Memori
    ...
    customLayout={MyCustomLayout}
  />

Styling

You can override the default styles of the Memori by customizing the following CSS custom properties:

memori-client,
#headlessui-portal-root,
.memori-widget {
  --memori-primary: rgb(102, 103, 171);
  --memori-primary-text: #fff;
  --memori-inner-content-pad: 1rem;
  --memori-inner-bg: transparent;
  --memori-chat-bubble-bg: #ffffff60;
  --memori-text-color: #000;
  --memori-button-bg: #fff;
  --memori-button-text: #000;
  --memori-button-padding: 0.5rem 1.5rem;
  --memori-button-border-color: #d9d9d9;
  --memori-button-radius: 5px;
  --memori-button-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
  --memori-blur-background: 0px;
  --memori-drawer--width: 100%;
  --memori-drawer--width--md: 80%;
  --memori-drawer--width--lg: 60%;
  --memori-modal--width: 100%;
  --memori-modal--width--md: 80%;
  --memori-error-color: #ff4d4f;
  --memori-button-disabled-bg: #f9f9f9;
}

You can review the default styles in the styles.css file.

Component overrides

When using the customLayout prop, you can also override the default components used by the client.

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>
  </>
);

Custom media renderer

You can override the default media renderer by passing a custom function to the customMediaRenderer prop. This can override the default media renderer for all media types or just for a specific one.

You can also use this to extend the default media renderer with additional media types.

<Memori
  ...
  customMediaRenderer={(mimeType: string) => {
    if (mimeType === 'custom/content-type') {
      return <MyCustomImageRenderer />;
    }

    return null;
  }}
/>

Global utilities

When rendered, the Memori widget exposes some global functions that can be used to interact with the Memori.

Get the state of the Twin

let dialogState = getMemoriState();
let sessionID = getMemoriState().sessionID;
let dialogState = getMemoriState(myWidgetIntegrationId); // in case you have multiple widgets on the same page

Otherwise, you can achieve the same result manually by reading from the HTML code of the widget the attribute data-memori-engine-state.

let dialogState = JSON.parse(
  document.querySelector('div[data-memori-engine-state]')?.dataset
    ?.memoriEngineState ?? '{}'
);

Write and send a message to the Twin

Write and send a message to the Twin. You can use this method to send a message to the Twin, such as to continue a conversation with a specific message or following an action.

typeMessage('Hello World!');

Additional parameters:

const waitForPrevious = true; // waits for previous message to be read, default: true
const hidden = true; // message is not visible to the user, only the response is, default: false
const typingText = "Asking the unicorns' opinion..."; // text to show in the loader while the Twin is answering, defaults to none
typeMessage('Hello World!', waitForPrevious, hidden, typingText);

There is also an alias function that does not show the message sent to the user, but only the Twin's response:

const waitForPrevious = true; // waits for previous message to be read, default: true
typeMessageHidden('Hello World!', waitForPrevious);

// alias to
typeMessage('Hello World!', waitForPrevious, true);

Conversation state change event

The onStateChange prop allows you to listen to state changes in the Memori widget.

<Memori
  ...
  onStateChange={(state) => {
    console.log('Memori state changed:', state);
  }}
/>

Or, you can listen to the MemoriNewDialogState event on the document:

document.addEventListener('MemoriNewDialogState', e => {
  console.log('Memori state changed:', e.detail);
});

where e.details is the new state of the Memori. This is useful to use when working with memori-webcomponent.

See also

• memori-api-client - API client for Memori
• memori-webcomponent - Web component for Memori, uses this library