@memori.ai/memori-react 2.19.2 → 2.20.0

package/src/components/CompletionProviderStatus/CompletionProviderStatus.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react';
+import Tooltip from '../ui/Tooltip';
+import Warning from '../icons/Warning';
+import { useTranslation } from 'react-i18next';
+
+export interface Props {
+  forceStatus?: string;
+  provider?: 'OpenAI' | string | null;
+}
+
+const initProviderStatus = (provider?: Props['provider']) => {
+  switch (provider) {
+    case 'DEFAULT':
+    case 'OpenAI':
+      return {
+        getStatus: async () => {
+          const res = await fetch(
+            'https://status.openai.com/api/v2/summary.json'
+          );
+          const data = await res.json();
+          return data.status.indicator ?? 'none';
+        },
+        statusPage: 'https://status.openai.com/',
+      };
+    default:
+      return {
+        getStatus: async () => 'none',
+        statusPage: '',
+      };
+  }
+};
+
+const CompletionProviderStatus = ({ forceStatus, provider }: Props) => {
+  const { t } = useTranslation();
+  const [status, setStatus] = useState(forceStatus ?? 'none');
+
+  const providerStatus = initProviderStatus(provider);
+
+  useEffect(() => {
+    if (forceStatus) return;
+
+    providerStatus.getStatus().then(status => setStatus(status));
+  }, [forceStatus, provider]);
+
+  return status !== 'none' ? (
+    <Tooltip
+      className="memori--completion-provider-status--tooltip"
+      align="topLeft"
+      content={
+        <div>
+          <p>
+            {t('completionProviderDown', {
+              provider: provider ?? t('completionProviderFallbackName'),
+            })}
+          </p>
+          {!!providerStatus.statusPage?.length && (
+            <p>
+              <a
+                href={providerStatus.statusPage}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                {t('completionProviderCheckStatusPage')}
+              </a>
+            </p>
+          )}
+        </div>
+      }
+    >
+      <Warning className="memori--completion-provider-status--icon" />
+    </Tooltip>
+  ) : null;
+};
+
+export default CompletionProviderStatus;

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

@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders CompletionProviderStatus errored unchanged 1`] = `
+<div>
+  <div
+    class="memori-tooltip memori-tooltip--align-topLeft memori--completion-provider-status--tooltip"
+  >
+    <div
+      class="memori-tooltip--content"
+    >
+      <div>
+        <p>
+          completionProviderDown
+        </p>
+      </div>
+    </div>
+    <div
+      class="memori-tooltip--trigger"
+    >
+      <svg
+        aria-hidden="true"
+        class="memori--completion-provider-status--icon"
+        focusable="false"
+        role="img"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders CompletionProviderStatus errored with provider specified unchanged 1`] = `
+<div>
+  <div
+    class="memori-tooltip memori-tooltip--align-topLeft memori--completion-provider-status--tooltip"
+  >
+    <div
+      class="memori-tooltip--content"
+    >
+      <div>
+        <p>
+          completionProviderDown
+        </p>
+        <p>
+          <a
+            href="https://status.openai.com/"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            completionProviderCheckStatusPage
+          </a>
+        </p>
+      </div>
+    </div>
+    <div
+      class="memori-tooltip--trigger"
+    >
+      <svg
+        aria-hidden="true"
+        class="memori--completion-provider-status--icon"
+        focusable="false"
+        role="img"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders CompletionProviderStatus unchanged 1`] = `<div />`;
+
+exports[`renders CompletionProviderStatus with provider specified unchanged 1`] = `<div />`;

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -914,7 +914,7 @@ const MemoriWidget = ({
         pin: params.pin ?? personification?.pin,
         additionalInfo: {
           ...(additionalInfo || {}),
-          loginToken: additionalInfo?.loginToken ?? authToken,
+          loginToken: additionalInfo?.loginToken ?? loginToken ?? authToken,
           language: getCultureCodeByLanguage(userLang),
           referral: referral,
         },
@@ -1009,7 +1009,7 @@ const MemoriWidget = ({
         birthDate: birthDate || storageBirthDate || undefined,
         additionalInfo: {
           ...(additionalInfo || {}),
-          loginToken: additionalInfo?.loginToken ?? authToken,
+          loginToken: additionalInfo?.loginToken ?? loginToken ?? authToken,
           language: getCultureCodeByLanguage(userLang),
           referral: referral,
         },
@@ -1139,7 +1139,7 @@ const MemoriWidget = ({
             birthDate: birthDate || storageBirthDate || undefined,
             additionalInfo: {
               ...(additionalInfo || {}),
-              loginToken: additionalInfo?.loginToken ?? authToken,
+              loginToken: additionalInfo?.loginToken ?? loginToken ?? authToken,
               language: getCultureCodeByLanguage(userLang),
               referral: referral,
             },
@@ -2506,7 +2506,9 @@ const MemoriWidget = ({
     [memoriPwd, memori, memoriTokens, birthDate, sessionId, userLang]
   );
 
-  const [loginToken, setLoginToken] = useState<string | undefined>(authToken);
+  const [loginToken, setLoginToken] = useState<string | undefined>(
+    additionalInfo?.loginToken ?? authToken
+  );
   useEffect(() => {
     const targetNode =
       document.querySelector(`memori-client[memoriname="${memori.name}"]`) ||

package/src/components/StartPanel/StartPanel.css

@@ -109,6 +109,10 @@
     opacity: 0.85;
 }
 
+.memori--start-button {
+    margin-right: 1em;
+}
+
 .memori--language-chooser {
     margin-bottom: 1rem;
 }

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

@@ -237,3 +237,22 @@ WithIntegration.args = {
   clickedStart: false,
   onClickStart: () => {},
 };
+
+export const WithCompletionProviderDown = Template.bind({});
+WithCompletionProviderDown.args = {
+  memori: {
+    ...memori,
+    enableCompletions: false,
+    completionProvider: 'OpenAI',
+  },
+  tenant,
+  language: 'it',
+  userLang: 'en',
+  setUserLang: () => {},
+  openPositionDrawer: () => {},
+  instruct: false,
+  sessionId: sessionID,
+  clickedStart: false,
+  onClickStart: () => {},
+  _TEST_forceProviderStatus: 'major',
+};

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

@@ -132,3 +132,25 @@ it('renders StartPanel with integrationConfig unchanged', () => {
   );
   expect(container).toMatchSnapshot();
 });
+
+it('renders StartPanel with completion provider down unchanged', () => {
+  const { container } = render(
+    <StartPanel
+      memori={{
+        ...memori,
+        completionProvider: 'OpenAI',
+      }}
+      tenant={tenant}
+      language="it"
+      userLang="en"
+      setUserLang={() => {}}
+      openPositionDrawer={() => {}}
+      instruct={false}
+      sessionId={sessionID}
+      clickedStart={false}
+      onClickStart={() => {}}
+      _TEST_forceProviderStatus="major"
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

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 CompletionProviderStatus from '../CompletionProviderStatus/CompletionProviderStatus';
 
 export interface Props {
   memori: Memori;
@@ -32,6 +33,7 @@ export interface Props {
   clickedStart?: boolean;
   onClickStart?: () => void;
   initializeTTS?: () => void;
+  _TEST_forceProviderStatus?: string;
 }
 
 const StartPanel: React.FC<Props> = ({
@@ -50,6 +52,7 @@ const StartPanel: React.FC<Props> = ({
   clickedStart,
   onClickStart,
   initializeTTS,
+  _TEST_forceProviderStatus,
 }) => {
   const { t, i18n } = useTranslation();
   const [translatedDescription, setTranslatedDescription] = useState(
@@ -254,6 +257,11 @@ const StartPanel: React.FC<Props> = ({
             )}
           </Button>
 
+          <CompletionProviderStatus
+            provider={memori.completionProvider}
+            forceStatus={_TEST_forceProviderStatus}
+          />
+
           <p className="memori--start-description">
             {instruct
               ? t('write_and_speak.pageInstructExplanation')

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

@@ -224,6 +224,145 @@ exports[`renders StartPanel unchanged 1`] = `
 </div>
 `;
 
+exports[`renders StartPanel with completion provider down unchanged 1`] = `
+<div>
+  <div
+    class="memori--start-panel"
+  >
+    <div
+      class="memori--cover"
+    >
+      <div
+        class="memori--completions-enabled"
+      >
+        <div
+          class="memori-tooltip memori-tooltip--align-left"
+        >
+          <div
+            class="memori-tooltip--content"
+          >
+            completionsEnabled
+          </div>
+          <div
+            class="memori-tooltip--trigger"
+          >
+            <span
+              aria-label="completionsEnabled"
+            >
+              <svg
+                aria-hidden="true"
+                fill="none"
+                focusable="false"
+                role="img"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  clip-rule="evenodd"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M0 4a4 4 0 014-4h16a4 4 0 014 4v16a4 4 0 01-4 4H4a4 4 0 01-4-4zm4-2.4A2.4 2.4 0 001.6 4v16A2.4 2.4 0 004 22.4h16a2.4 2.4 0 002.4-2.4V4A2.4 2.4 0 0020 1.6z"
+                    fill-rule="evenodd"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M9.715 8.442a.798.798 0 00-1.43 0l-3.2 6.4a.799.799 0 101.431.716l.579-1.158h3.811l.578 1.158a.8.8 0 001.431-.716zm.391 4.358L9 10.589 7.894 12.8z"
+                    fill-rule="evenodd"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M17 8c.552 0 1 .358 1 .8v6.4c0 .442-.448.8-1 .8s-1-.358-1-.8V8.8c0-.442.448-.8 1-.8z"
+                    fill-rule="evenodd"
+                  />
+                </g>
+              </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>
+      <div
+        class="memori-tooltip memori-tooltip--align-topLeft memori--completion-provider-status--tooltip"
+      >
+        <div
+          class="memori-tooltip--content"
+        >
+          <div>
+            <p>
+              completionProviderDown
+            </p>
+            <p>
+              <a
+                href="https://status.openai.com/"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                completionProviderCheckStatusPage
+              </a>
+            </p>
+          </div>
+        </div>
+        <div
+          class="memori-tooltip--trigger"
+        >
+          <svg
+            aria-hidden="true"
+            class="memori--completion-provider-status--icon"
+            focusable="false"
+            role="img"
+            viewBox="0 0 1024 1024"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"
+            />
+          </svg>
+        </div>
+      </div>
+      <p
+        class="memori--start-description"
+      >
+        write_and_speak.pageTryMeExplanation
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders StartPanel with completions enabled unchanged 1`] = `
 <div>
   <div

package/src/components/ui/Tooltip.tsx

@@ -5,7 +5,6 @@ export interface Props {
   content: string | JSX.Element | React.ReactNode;
   className?: string;
   align?: 'left' | 'right' | 'topLeft' | 'topRight';
-  alignTop?: boolean;
   disabled?: boolean;
   children: React.ReactNode;
   visible?: boolean;

package/src/locales/en.json

@@ -31,6 +31,9 @@
   "memoriBlockedGiverHelper": "You can still manage it as administrator, but other users will not be able to interact with it.",
   "generatedByAI": "Answer generated by AI, may occasionally generate incorrect informations",
   "completionsEnabled": "Advanced AI, can respond with automatically generated answers that may sometimes contain incorrect information",
+  "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",
   "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

@@ -31,6 +31,9 @@
   "memoriBlockedGiverHelper": "Puoi sempre gestirlo in qualità di amministratore, ma altri utenti non potranno interrogarlo.",
   "generatedByAI": "Risposta generata da IA, può talvolta generare informazioni non corrette",
   "completionsEnabled": "IA evoluta, può rispondere con risposte generate automaticamente che talvolta potrebbero contenere informazioni non corrette",
+  "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",
   "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.",

package/src/styles.css

@@ -7,6 +7,7 @@
 @import url('./components/ui/Tooltip.css');
 @import url('./components/ui/Select.css');
 
+@import url('./components/CompletionProviderStatus/CompletionProviderStatus.css');
 @import url('./components/PoweredBy/PoweredBy.css');
 @import url('./components/AttachmentLinkModal/AttachmentLinkModal.css');
 @import url('./components/Auth/Auth.css');