@memori.ai/memori-react 8.38.8 → 8.40.0

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/components/layouts/layouts.stories.tsx

@@ -8,10 +8,9 @@ import Spin from '../ui/Spin';
 import { VisemeProvider } from '../../context/visemeContext';
 import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
 
-
 const meta: Meta = {
   title: 'General/Layouts',
-  component: (args: Props) => <Memori {...args}    />,
+  component: (args: Props) => <Memori {...args} />,
   argTypes: {},
   parameters: {
     controls: { expanded: true },
@@ -21,7 +20,6 @@ const meta: Meta = {
 
 export default meta;
 
-
 const Template: Story<Props> = args => (
   <I18nWrapper>
     <ArtifactProvider>
@@ -55,15 +53,11 @@ DefaultLayout.args = {
   showMessageConsumption: true,
 };
 
-
-
 export const Default = Template.bind({});
 Default.args = {
   ...DefaultLayout.args,
 };
 
-
-
 export const Totem = Template.bind({});
 Totem.args = {
   ...DefaultLayout.args,
@@ -154,23 +148,22 @@ WebsiteAssistant2.args = {
 
 export const WebsiteAssistant3 = Template.bind({});
 WebsiteAssistant3.args = {
-  memoriName: "Layout Storybook",
-  ownerUserName: "Andrea-Patini",
-  memoriID: "ae20fc5a-cc15-4db9-b7dd-2cd4a621b85e",
-  ownerUserID: "91dbc9ba-b684-4fbe-9828-b5980af6cda9",
-  tenantID: "aisuru-staging.aclambda.online",
-  engineURL: "https://engine-staging.memori.ai/memori/v2",
-  apiURL: "https://backend-staging.memori.ai/api/v2",
-  baseURL: "http://localhost:3000",
-  layout: "WEBSITE_ASSISTANT",
+  memoriName: 'Layout Storybook',
+  ownerUserName: 'Andrea-Patini',
+  memoriID: 'ae20fc5a-cc15-4db9-b7dd-2cd4a621b85e',
+  ownerUserID: '91dbc9ba-b684-4fbe-9828-b5980af6cda9',
+  tenantID: 'aisuru-staging.aclambda.online',
+  engineURL: 'https://engine-staging.memori.ai/memori/v2',
+  apiURL: 'https://backend-staging.memori.ai/api/v2',
+  baseURL: 'http://localhost:3000',
+  layout: 'WEBSITE_ASSISTANT',
   avatar3dHidden: true,
-  uiLang: "IT",
-  spokenLang: "IT",
+  uiLang: 'IT',
+  spokenLang: 'IT',
   showOnlyLastMessages: true,
-  integrationID: "716f4728-919c-4015-aae1-88998a081c6f",
+  integrationID: '716f4728-919c-4015-aae1-88998a081c6f',
 };
 
-
 export const WebsiteAssistant = Template.bind({});
 WebsiteAssistant.args = {
   uiLang: 'EN',
@@ -203,7 +196,8 @@ WebsiteAssistant.args = {
       innerBgAlpha: 0.8,
       multilanguage: true,
       avatar: 'readyplayerme',
-      avatarURL: 'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
+      avatarURL:
+        'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
     }),
   },
 };
@@ -228,17 +222,17 @@ HiddenChat.args = {
 export const ZoomedFullBody = Template.bind({});
 ZoomedFullBody.args = {
   ...DefaultLayout.args,
-  memoriName: "Layout Storybook",
-  ownerUserName: "Andrea-Patini",
-  memoriID: "ae20fc5a-cc15-4db9-b7dd-2cd4a621b85e",
-  ownerUserID: "91dbc9ba-b684-4fbe-9828-b5980af6cda9",
-  tenantID: "aisuru-staging.aclambda.online",
-  engineURL: "https://engine-staging.memori.ai/memori/v2",
-  apiURL: "https://backend-staging.memori.ai/api/v2",
-  baseURL: "http://localhost:3000",
-  layout: "FULLPAGE",
-  uiLang: "IT",
-  spokenLang: "IT",
-  integrationID: "32922e14-24d6-4f5f-a06b-d963da14a658",
-  showSettings: true
+  memoriName: 'Layout Storybook',
+  ownerUserName: 'Andrea-Patini',
+  memoriID: 'ae20fc5a-cc15-4db9-b7dd-2cd4a621b85e',
+  ownerUserID: '91dbc9ba-b684-4fbe-9828-b5980af6cda9',
+  tenantID: 'aisuru-staging.aclambda.online',
+  engineURL: 'https://engine-staging.memori.ai/memori/v2',
+  apiURL: 'https://backend-staging.memori.ai/api/v2',
+  baseURL: 'http://localhost:3000',
+  layout: 'FULLPAGE',
+  uiLang: 'IT',
+  spokenLang: 'IT',
+  integrationID: '32922e14-24d6-4f5f-a06b-d963da14a658',
+  showSettings: true,
 };

package/src/helpers/credits.ts

@@ -1,23 +1,37 @@
 // 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;
   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 (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: {
@@ -28,6 +42,7 @@ export const getCredits = async ({
       userID,
       userName,
       tenant,
+      ...(operation === 'import_document' ? { characters } : {}),
     }),
   });
 

package/src/helpers/nats/getNatsConfig.ts

@@ -0,0 +1,69 @@
+// helpers/nats/getNatsConfig.ts - Fetch NATS connection params (url + token)
+// from the backend, using the same baseUrl already used for /api/tts and /api/stt.
+
+/**
+ * Connection parameters returned by `GET /api/nats?sessionId=<uuid>`.
+ */
+export interface NatsConfig {
+  /** WebSocket URL of the NATS server (e.g. wss://nats.hz.slnode.net:8080). */
+  url: string;
+  /** Bearer token used to authenticate the WebSocket connection. */
+  token: string;
+}
+
+/**
+ * Fetch the NATS connection config for a given session.
+ *
+ * Mirrors the error-handling style of the tts/stt helpers: the backend may
+ * answer with 400 (sessionId missing), 404 (invalid session) or 500 (NATS
+ * config missing). Any non-ok response throws with a descriptive message.
+ *
+ * @param baseUrl Same baseUrl used for `/api/tts` and `/api/stt`.
+ * @param sessionId Current session UUID.
+ * @param signal Optional AbortSignal to cancel the request.
+ */
+export async function getNatsConfig(
+  baseUrl: string,
+  sessionId: string,
+  signal?: AbortSignal
+): Promise<NatsConfig> {
+  if (!sessionId) {
+    throw new Error('Missing sessionId for NATS config request');
+  }
+
+  const response = await fetch(
+    `${baseUrl}/api/nats?sessionId=${encodeURIComponent(sessionId)}`,
+    { signal }
+  );
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({} as any));
+
+    switch (response.status) {
+      case 400:
+        throw new Error(
+          errorData.error || 'NATS config error: missing sessionId'
+        );
+      case 404:
+        throw new Error(
+          errorData.error || 'NATS config error: invalid session'
+        );
+      case 500:
+        throw new Error(
+          errorData.error || 'NATS config error: NATS configuration missing'
+        );
+      default:
+        throw new Error(
+          errorData.error || `NATS config error: ${response.status}`
+        );
+    }
+  }
+
+  const data = (await response.json()) as Partial<NatsConfig>;
+
+  if (!data.url || !data.token) {
+    throw new Error('Invalid response from NATS config service');
+  }
+
+  return { url: data.url, token: data.token };
+}

package/src/helpers/nats/useNats.ts

@@ -0,0 +1,122 @@
+// helpers/nats/useNats.ts - Orchestrates NATS config retrieval + subscription.
+//
+// Additive to the existing HTTP flow: text is sent via `postEnterTextAsync`;
+// this hook *receives* asynchronous events on the session channel (progress /
+// dialog.text_entered_response / error).
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { getNatsConfig } from './getNatsConfig';
+import {
+  useNatsSession,
+  NatsSessionEvent,
+  NatsProgressEvent,
+  NatsDialogResponseEvent,
+  NatsErrorEvent,
+} from './useNatsSession';
+
+export interface UseNatsOptions {
+  /** Same baseUrl used for /api/tts and /api/stt. */
+  baseUrl: string;
+  /** Current session UUID. Subscription is skipped while undefined. */
+  sessionId?: string;
+  /** `progress` events (e.g. to feed the typing indicator). */
+  onProgress?: (event: NatsProgressEvent) => void;
+  /** `dialog.text_entered_response` events (optional live updates). */
+  onDialogResponse?: (event: NatsDialogResponseEvent) => void;
+  /** `error` events (logging / user notification). */
+  onError?: (event: NatsErrorEvent) => void;
+}
+
+/**
+ * Subscribe to the NATS session channel and dispatch decoded events to the
+ * provided callbacks. Config is fetched from `/api/nats`; the subscription
+ * lifecycle (cleanup on unmount, reconnect on sessionId change) is handled by
+ * `useNatsSession`.
+ */
+export function useNats({
+  baseUrl,
+  sessionId,
+  onProgress,
+  onDialogResponse,
+  onError,
+}: UseNatsOptions) {
+  const [config, setConfig] = useState<{ url: string; token: string } | null>(
+    null
+  );
+  const [configError, setConfigError] = useState<Error | null>(null);
+
+  // Keep callbacks in refs so the dispatcher identity stays stable.
+  const onProgressRef = useRef(onProgress);
+  const onDialogResponseRef = useRef(onDialogResponse);
+  const onErrorRef = useRef(onError);
+  useEffect(() => {
+    onProgressRef.current = onProgress;
+    onDialogResponseRef.current = onDialogResponse;
+    onErrorRef.current = onError;
+  }, [onProgress, onDialogResponse, onError]);
+
+  // Fetch connection config whenever the active session changes.
+  useEffect(() => {
+    if (!sessionId) {
+      console.debug('[NATS] no sessionId, skipping config fetch');
+      setConfig(null);
+      setConfigError(null);
+      return;
+    }
+
+    const controller = new AbortController();
+    let cancelled = false;
+
+    console.info(
+      '[NATS] fetching config from',
+      `${baseUrl}/api/nats`,
+      'for session',
+      sessionId
+    );
+    getNatsConfig(baseUrl, sessionId, controller.signal)
+      .then(cfg => {
+        if (!cancelled) {
+          console.info('[NATS] config received, server url:', cfg.url);
+          setConfig(cfg);
+          setConfigError(null);
+        }
+      })
+      .catch(err => {
+        if (!cancelled && err?.name !== 'AbortError') {
+          console.error('[NATS] config error', err);
+          setConfig(null);
+          setConfigError(err instanceof Error ? err : new Error(String(err)));
+        }
+      });
+
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [baseUrl, sessionId]);
+
+  const handleMessage = useCallback((event: NatsSessionEvent) => {
+    console.debug('[NATS] dispatching event', { eventType: event.eventType });
+    switch (event.eventType) {
+      case 'progress':
+        onProgressRef.current?.(event);
+        break;
+      case 'dialog_text_entered_response':
+        onDialogResponseRef.current?.(event);
+        break;
+      case 'error':
+        onErrorRef.current?.(event);
+        break;
+      default:
+        console.warn('Unknown NATS event', event);
+    }
+  }, []);
+
+  useNatsSession(sessionId, config?.url, config?.token, handleMessage);
+
+  return {
+    /** True once connection config has been retrieved. */
+    connected: !!config,
+    /** Last config-retrieval error, if any. */
+    configError,
+  };
+}