<style>
    :root, .memori.memori-widget,
    #headlessui-portal-root, memori-client {
      --memori-primary: rgb(255, 0, 0);
      --memori-primary-text: #fff;
      --memori-inner-content-pad: 1rem;
      --memori-inner-bg: #fff;
      --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: 15px;
      --memori-button-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
      --memori-blur-background: 5px;
      --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;
    }
  </style>

<memori-client
  memoriName="Memori"
  ownerUserName="nunziofiore"
  tenantID="app.memorytwin.com"
  showShare="true"
  apiURL="https://backend.memori.ai"
  baseURL="https://app.memorytwin.com"
  uiLang="IT"
  spokenLang="IT"
  tag="🍻"
  pin="123456"
  context="VAR1:VALUE1,VAR2:VALUE2"
  initialQuestion="Initial question"
/>

<memori-client
  memoriName="Memori"
  ownerUserName="nunziofiore"
  tenantID="app.memorytwin.com"
  showShare="true"
  apiURL="https://backend.memori.ai"
  baseURL="https://app.memorytwin.com"
  uiLang="it"
  tag="🍻"
  pin="123456"
  context="VAR1:VALUE1,VAR2:VALUE2"
  initialQuestion="Initial question"
  layout="CHAT"
/>

yarn add @memori.ai/memori-api-client

<div id="extension"></div>

const state = getMemoriState();
const sessionID = state.sessionID;
const extension = document.getElementById('extension');

extension.innerHTML = '';

const wrapper = document.createElement('div');
wrapper.id = 'memori-media-wrapper';
extension.appendChild(wrapper);

const images = state.media.filter((m) => m.mimeType.startsWith('image'));
images.forEach((m) => {
  const image = document.createElement('img');
  image.src = `${m.url}/${sessionID}`;
  image.alt = m.name || '';

  wrapper.appendChild(image);
});

const styles = document.createElement('style');
styles.innerHTML = `
#memori-media-wrapper {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  top: 2rem;
  z-index: 1000;
}
#memori-media-wrapper img {
  width: 100%;
  padding: 0.5rem;
}
.memori-media-widget {
  display: none;
}
`;

extension.appendChild(styles);

document.addEventListener('MemoriEndSpeak', () => {
    extension.innerHTML = '';
})

const startConversation = () => {
  fetch("https://engine.memori.ai/memori/v2/session", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      memoriId: "1afe57c6-1b69-4a61-96ea-52bf7b8d158e",
    }),
  })
    .then((response) => response.json())
    .then((result) => {
      state = result;

      if (state.currentState.emission)
        console.log(`Nunzio: ${state.currentState.emission}`);

      handleConversation();
    })
    .catch((error) => console.log("error", error));
};

const sendMessage = (question) => {
  fetch(
    `https://engine.memori.ai/memori/v2/TextEnteredEvent/${state.sessionID}`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        text: question,
      }),
    }
  )
  .then((response) => response.json())
  .then((result) => {
    state = result;

    if (state.currentState.emission)
      console.log(`Nunzio: ${state.currentState.emission}`);
  })
  .catch((error) => console.log("error", error));
}

yarn add @memori.ai/memori-api-client

yarn add @memori.ai/memori-react

<script
  type="module"
  src="https://esm.run/@memori.ai/memori-webcomponent/dist/memori-webcomponent.js"
></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@memori.ai/memori-react/dist/styles.min.css"
/>

<memori-client
  memoriName="Memori"
  ownerUserName="nunziofiore"
  tenantID="app.memorytwin.com"
  showShare
  apiURL="https://backend.memori.ai"
  baseURL="https://app.memorytwin.com"
  uiLang="it"
  height="100vh"
/>

let dialogState = getMemoriState();
let sessionID = getMemoriState().sessionID;

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

typeMessage('Hello World!')

// waits for previous message to be read, default: true
const waitForPrevious = true 
// message is not visible to the user, only the response is, default: false
const hidden = true

typeMessage('Hello World!', waitForPrevious, hidden)

typeMessageHidden('Hello World!', waitForPrevious)

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

typeBatchMessages([
  {
    message: 'percorso libero',
    hidden: true,
    waitForPrevious: true,
    useLoaderTextAsMsg: true,
    typingText: 'Preparo il cartamodello...',
  },
  {
    message: 'imposta lo scollo a v',
    hidden: true,
    waitForPrevious: true,
    useLoaderTextAsMsg: true,
    typingText: 'Cucio lo scollo come preferisci...'
  },
  ...
])