@memori.ai/memori-react 8.38.8 → 8.39.0

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -381,7 +381,7 @@ export interface LayoutProps {
 
 export interface Props {
   memori: Memori;
-  ownerUserName?: string | null;
+  // ownerUserName?: string | null;
   ownerUserID?: string | null;
   tenantID: string;
   memoriConfigs?: MemoriConfig[];
@@ -453,7 +453,7 @@ const MemoriWidget = ({
   memori,
   memoriConfigs,
   ownerUserID,
-  ownerUserName,
+  // ownerUserName,
   tenantID,
   memoriLang,
   uiLang,
@@ -565,7 +565,6 @@ const MemoriWidget = ({
   const [showLoginDrawer, setShowLoginDrawer] = useState(false);
 
   const [clickedStart, setClickedStart] = useState(false);
-  const [gotErrorInOpening, setGotErrorInOpening] = useState(false);
 
   const language =
     memori.culture?.split('-')?.[0]?.toUpperCase()! ||
@@ -707,7 +706,9 @@ const MemoriWidget = ({
     setRuntimeShowMessageConsumption(
       getLocalConfig(
         'showMessageConsumption',
-        showMessageConsumption ?? integrationConfig?.showMessageConsumption ?? false
+        showMessageConsumption ??
+          integrationConfig?.showMessageConsumption ??
+          false
       )
     );
 
@@ -770,17 +771,11 @@ const MemoriWidget = ({
       longitude?: number;
       uncertaintyKm?: number;
     } = {};
-    if (
-      venue.latitude != null &&
-      venue.longitude != null
-    ) {
+    if (venue.latitude != null && venue.longitude != null) {
       place.latitude = venue.latitude;
       place.longitude = venue.longitude;
       if (venue.placeName) place.placeName = venue.placeName;
-      if (
-        venue.uncertainty != null &&
-        venue.uncertainty > 0
-      )
+      if (venue.uncertainty != null && venue.uncertainty > 0)
         place.uncertaintyKm = venue.uncertainty;
     } else if (venue.placeName) {
       place.placeName = venue.placeName;
@@ -1393,6 +1388,10 @@ const MemoriWidget = ({
       return;
     }
 
+    if (!(await checkCredits({ notify: true, goBack: true }))) {
+      return;
+    }
+
     setLoading(true);
 
     try {
@@ -1469,10 +1468,9 @@ const MemoriWidget = ({
       ) {
         console.warn(session);
         toast.error(t('underageTwinSession', { age: minAge }));
-        setGotErrorInOpening(true);
       }
       // Handle authentication error
-      else if (session?.resultCode === 403) {
+      else if (session?.resultCode === 403 && memori.privacyType !== 'PUBLIC') {
         setMemoriPwd(undefined);
         setAuthModalState('password');
         return session;
@@ -1498,7 +1496,6 @@ const MemoriWidget = ({
             duration: Infinity,
           }
         );
-        setGotErrorInOpening(true);
         return session;
       }
     } catch (err) {
@@ -1565,6 +1562,11 @@ const MemoriWidget = ({
         return;
       }
 
+      if (!(await checkCredits({ notify: true, goBack: true }))) {
+        setLoading(false);
+        return null;
+      }
+
       // Get current URL as referral
       let referral;
       try {
@@ -1692,10 +1694,12 @@ const MemoriWidget = ({
       ) {
         console.error('[REOPEN_SESSION] Age restriction error:', response);
         toast.error(t('underageTwinSession', { age: minAge }));
-        setGotErrorInOpening(true);
       }
       // Handle authentication error
-      else if (response?.resultCode === 403) {
+      else if (
+        response?.resultCode === 403 &&
+        memori.privacyType !== 'PUBLIC'
+      ) {
         console.error('[REOPEN_SESSION] Authentication error');
         setMemoriPwd(undefined);
         setAuthModalState('password');
@@ -1704,7 +1708,6 @@ const MemoriWidget = ({
       else {
         console.error('[REOPEN_SESSION] Other error:', response);
         toast.error(t(getErrori18nKey(response.resultCode)));
-        setGotErrorInOpening(true);
       }
     } catch (err) {
       console.error('[REOPEN_SESSION] Caught error:', err);
@@ -2370,6 +2373,12 @@ const MemoriWidget = ({
         return;
       }
 
+      if (!(await checkCredits({ notify: true, goBack: true }))) {
+        setClickedStart(false);
+        setLoading(false);
+        return;
+      }
+
       // Handle age verification
       if (!sessionID && !!minAge && !birth) {
         setShowAgeVerification(true);
@@ -2377,12 +2386,11 @@ const MemoriWidget = ({
       }
       // Handle authentication
       else if (
-        (!sessionID &&
-          memori.privacyType !== 'PUBLIC' &&
-          !memori.secretToken &&
-          !memoriPwd &&
-          !memoriTokens) ||
-        (!sessionID && gotErrorInOpening)
+        !sessionID &&
+        memori.privacyType !== 'PUBLIC' &&
+        !memori.secretToken &&
+        !memoriPwd &&
+        !memoriTokens
       ) {
         setAuthModalState('password');
         setClickedStart(false);
@@ -2391,7 +2399,6 @@ const MemoriWidget = ({
       // Create new session if needed
       else if (!sessionID || initialSessionExpired) {
         setClickedStart(false);
-        setGotErrorInOpening(false);
         const session = await fetchSession({
           memoriID: memori.engineMemoriID!,
           password: secret || memoriPwd || memori.secretToken,
@@ -2513,7 +2520,6 @@ const MemoriWidget = ({
 
         if (response.resultCode !== 0 || !currentState) {
           const { chatLogs } = await getSessionChatLogs(sessionID!, sessionID!);
-          setGotErrorInOpening(true);
           setSessionId(undefined);
           setClickedStart(false);
           await onClickStart(undefined, true, chatLogs?.[0]);
@@ -2722,7 +2728,6 @@ const MemoriWidget = ({
             );
           }
         }
-
       }
       // Default case - just translate and activate
       else {
@@ -2817,36 +2822,77 @@ const MemoriWidget = ({
   // check if owner has enough credits
   const needsCredits = tenant?.billingDelegation;
   const [hasEnoughCredits, setHasEnoughCredits] = useState<boolean>(true);
-  const checkCredits = useCallback(async () => {
-    if (!tenant?.billingDelegation) return;
+  const handleNotEnoughCredits = useCallback(
+    (goBack = false) => {
+      setHasEnoughCredits(false);
+      setAuthModalState(null);
+      toast.error(t('notEnoughCredits'));
+
+      if (goBack && window.history.length > 1) {
+        window.history.back();
+      }
+    },
+    [t]
+  );
+  const checkCredits = useCallback(
+    async (options?: { notify?: boolean; goBack?: boolean }) => {
+      if (!tenant?.billingDelegation) return true;
+
+      // Billing delegation is active: credits MUST be verified.
+      // Without an ownerUserID we cannot call the API, so we fail closed
+      // instead of silently letting the session start unverified.
+      if (!ownerUserID) {
+        console.warn('Cannot verify credits: missing ownerUserID');
+        if (options?.notify) {
+          handleNotEnoughCredits(!!options.goBack);
+        } else {
+          setHasEnoughCredits(false);
+        }
+        return false;
+      }
 
-    try {
-      const resp = await getCredits({
-        operation: deepThoughtEnabled
-          ? 'dt_session_creation'
-          : 'session_creation',
-        baseUrl: baseUrl,
-        userID: ownerUserID,
-        userName: ownerUserName,
-        tenant: tenantID,
-      });
+      try {
+        const resp = await getCredits({
+          operation: deepThoughtEnabled
+            ? 'dt_session_creation'
+            : 'session_creation',
+          baseUrl: baseUrl,
+          userID: ownerUserID,
+          tenant: tenantID,
+        });
 
-      if (resp.enough) {
-        setHasEnoughCredits(true);
-      } else {
-        setHasEnoughCredits(false);
-        console.warn('Not enough credits. Required:', resp.required);
+        if (resp.enough) {
+          setHasEnoughCredits(true);
+          return true;
+        } else {
+          console.warn('Not enough credits. Required:', resp.required);
+          if (options?.notify) {
+            handleNotEnoughCredits(!!options.goBack);
+          } else {
+            setHasEnoughCredits(false);
+          }
+          return false;
+        }
+      } catch (e) {
+        let err = e as Error;
+        console.debug(err);
+        return true;
       }
-    } catch (e) {
-      let err = e as Error;
-      console.debug(err);
-    }
-  }, [tenant?.billingDelegation, deepThoughtEnabled]);
+    },
+    [
+      baseUrl,
+      deepThoughtEnabled,
+      handleNotEnoughCredits,
+      ownerUserID,
+      tenant?.billingDelegation,
+      tenantID,
+    ]
+  );
   useEffect(() => {
     if (tenant?.billingDelegation) {
       checkCredits();
     }
-  }, [tenant?.billingDelegation, deepThoughtEnabled]);
+  }, [tenant?.billingDelegation, deepThoughtEnabled, checkCredits]);
 
   useEffect(() => {
     if (__WEBCOMPONENT__) return;
@@ -3203,12 +3249,6 @@ const MemoriWidget = ({
                 }
               })
               .catch(error => {
-                if (
-                  !(error instanceof Error) ||
-                  error.message !== 'AUTH_FAILED'
-                ) {
-                  setGotErrorInOpening(true);
-                }
                 throw error;
               });
           }}
@@ -3254,7 +3294,6 @@ const MemoriWidget = ({
                 })
                 .catch(() => {
                   setShowAgeVerification(false);
-                  setGotErrorInOpening(true);
                 });
             } else {
               setShowAgeVerification(false);

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

@@ -381,3 +381,24 @@ WithCompletionProviderDown.args = {
   onClickStart: () => {},
   _TEST_forceProviderStatus: 'major',
 };
+
+/** Public agent whose owner has run out of credits: the start button is
+ * disabled and a "not enough credits" badge is shown instead of starting a
+ * session or asking for a password. */
+export const NotEnoughCredits = Template.bind({});
+NotEnoughCredits.args = {
+  memori: {
+    ...memori,
+    privacyType: 'PUBLIC',
+  },
+  tenant,
+  language: 'it',
+  userLang: 'en',
+  setUserLang: () => {},
+  openPositionDrawer: () => {},
+  instruct: false,
+  sessionId: sessionID,
+  clickedStart: false,
+  onClickStart: () => {},
+  notEnoughCredits: true,
+};

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { memori, tenant, sessionID, integration, user } from '../../mocks/data';
 import StartPanel from './StartPanel';
 
@@ -293,3 +294,67 @@ it('renders StartPanel with completion provider down unchanged', () => {
   );
   expect(container).toMatchSnapshot();
 });
+
+it('renders StartPanel with not enough credits unchanged', () => {
+  const { container } = render(
+    <StartPanel
+      memori={memori}
+      tenant={tenant}
+      language="it"
+      userLang="en"
+      setUserLang={() => {}}
+      openPositionDrawer={() => {}}
+      instruct={false}
+      clickedStart={false}
+      onClickStart={() => {}}
+      setShowLoginDrawer={jest.fn()}
+      notEnoughCredits
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+// When the agent owner has not enough credits, opening the chat for a PUBLIC
+// agent must not start a session nor ask for a password: the start button is
+// disabled and a "not enough credits" badge is shown instead.
+it('blocks start and shows credits badge when owner has not enough credits', () => {
+  const onClickStart = jest.fn();
+  const { container, getByText, queryByPlaceholderText } = render(
+    <StartPanel
+      memori={{ ...memori, privacyType: 'PUBLIC' }}
+      tenant={tenant}
+      language="it"
+      userLang="en"
+      setUserLang={() => {}}
+      openPositionDrawer={() => {}}
+      instruct={false}
+      clickedStart={false}
+      onClickStart={onClickStart}
+      setShowLoginDrawer={jest.fn()}
+      notEnoughCredits
+    />
+  );
+
+  const startButton = container.querySelector(
+    '.memori--start-button'
+  ) as HTMLButtonElement;
+  expect(startButton).toBeInTheDocument();
+  expect(startButton).toBeDisabled();
+
+  // Clicking the disabled button must not attempt to open a session.
+  fireEvent.click(startButton);
+  expect(onClickStart).not.toHaveBeenCalled();
+
+  // No password field is ever rendered for a public agent.
+  expect(queryByPlaceholderText('Password')).not.toBeInTheDocument();
+
+  // The credits badge is rendered and surfaces the proper message on hover.
+  const badge = container.querySelector('.blocked-memori-badge--wrapper');
+  expect(badge).toBeInTheDocument();
+
+  const tooltipTrigger = container.querySelector(
+    '.blocked-memori-badge--tooltip'
+  ) as HTMLElement;
+  fireEvent.mouseEnter(tooltipTrigger);
+  expect(getByText('notEnoughCredits')).toBeInTheDocument();
+});

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

@@ -1773,6 +1773,162 @@ exports[`renders StartPanel with multilangual unchanged 1`] = `
 </div>
 `;
 
+exports[`renders StartPanel with not enough credits unchanged 1`] = `
+<div>
+  <div
+    class="memori--start-panel"
+  >
+    <div
+      class="memori--cover"
+    />
+    <picture
+      class="memori--avatar"
+    >
+      <source
+        src="https://aisuru.com/images/aisuru/square_logo.png"
+      />
+      <img
+        alt="Memori"
+        src="https://aisuru.com/images/aisuru/square_logo.png"
+      />
+    </picture>
+    <h2
+      class="memori--title"
+    >
+      Memori
+    </h2>
+    <div
+      class="memori--description"
+    >
+      <p>
+        <div
+          class="memori-expandable memori--description-text"
+        >
+          <div
+            class="memori-expandable--inner"
+            style="max-height: 9999px;"
+          >
+            Lorem ipsum.
+          </div>
+        </div>
+      </p>
+      <div
+        class="memori--start-privacy-explanation-container"
+      >
+        <p
+          class="memori--start-privacy-explanation"
+        >
+          write_and_speak.pagePrivacyExplanation
+        </p>
+        <div
+          class="memori-tooltip memori-tooltip--align-topLeft"
+        >
+          <div
+            class="memori-tooltip--trigger"
+          >
+            <svg
+              aria-hidden="true"
+              class="memori--start-privacy-explanation-icon"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                cx="12"
+                cy="12"
+                r="10"
+              />
+              <path
+                d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
+              />
+              <path
+                d="M12 17L12.01 17"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <button
+        class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"
+        disabled=""
+      >
+        write_and_speak.tryMeButton
+      </button>
+      <div
+        class="memori--completion-provider-status--loading"
+      >
+        <div
+          class="memori-spin memori-spin--spinning"
+        >
+          <div
+            class="memori-spin--spinner"
+          >
+            <svg
+              aria-hidden="true"
+              class="memori-loading-icon"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <p
+        class="memori--start-description"
+      >
+        write_and_speak.pageTryMeExplanation
+      </p>
+      <div
+        class="memori-tooltip memori-tooltip--align-right blocked-memori-badge--tooltip"
+      >
+        <div
+          class="memori-tooltip--trigger"
+        >
+          <div
+            class="blocked-memori-badge--wrapper"
+          >
+            <div
+              class="blocked-memori-badge  margin-left"
+            >
+              <svg
+                aria-hidden="true"
+                class="blocked-memori-badge--icon"
+                color="currentColor"
+                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"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+            <span
+              class="blocked-memori-badge--title"
+            >
+              memoriBlockedTitle
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders StartPanel with position required unchanged 1`] = `
 <div>
   <div

package/src/helpers/credits.ts

@@ -1,23 +1,35 @@
 // POST http://localhost:3000/api/verify-tokens operation=session_creation userID=585ec0ff-e805-495e-b8fc-5b0b8dd288ff tenant=aisuru-staging-tokenized.aclambda.online
+export type CreditsOperation =
+  | 'twin_creation'
+  | 'session_creation'
+  | 'import_document'
+  // accepted by the API and normalized to session_creation
+  | 'dt_session_creation';
+
 export const getCredits = async ({
   operation = 'session_creation',
   baseUrl,
   userID,
-  userName,
   tenant,
+  characters,
 }: {
-  operation?: string;
+  operation?: CreditsOperation;
   baseUrl: string;
-  userID?: string | null;
-  userName?: string | null;
+  userID: string;
   tenant: string;
+  characters?: number;
 }): Promise<{
   enough: boolean;
   required: number;
+  tokens?: number;
 }> => {
-  if (!userID && !userName) {
-    throw new Error('Either userID or userName must be provided');
+  if (!userID) {
+    throw new Error('userID must be provided');
+  }
+  if (operation === 'import_document' && characters == null) {
+    throw new Error('characters must be provided for import_document');
   }
+
   const resp = await fetch(`${baseUrl}/api/verify-tokens`, {
     method: 'POST',
     headers: {
@@ -26,8 +38,8 @@ export const getCredits = async ({
     body: JSON.stringify({
       operation,
       userID,
-      userName,
       tenant,
+      ...(operation === 'import_document' ? { characters } : {}),
     }),
   });
 

package/src/index.tsx

@@ -464,7 +464,6 @@ const Memori: React.FC<Props> = ({
                 secretToken,
               }}
               __WEBCOMPONENT__={__WEBCOMPONENT__}
-              ownerUserName={ownerUserName ?? memori.ownerUserName}
               ownerUserID={ownerUserID ?? memori.ownerUserID}
               tenant={tenant}
               tenantID={tenantID}

package/src/version.ts

@@ -1,2 +1,2 @@
 // This file is auto-generated. Do not edit manually.
-export const version = '8.38.8';
+export const version = '8.39.0';