@memori.ai/memori-react 8.39.0 → 8.40.1

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>
@@ -45,7 +43,7 @@ DefaultLayout.args = {
   uiLang: 'IT',
   spokenLang: 'IT',
   integrationID: '0b1256c1-530c-4e67-aef8-36667c8887bb',
-  autoStart: false,
+  autoStart: true,
   sessionID: '' as string | undefined,
   showUpload: true,
   showReasoning: false,
@@ -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

@@ -10,12 +10,14 @@ export const getCredits = async ({
   operation = 'session_creation',
   baseUrl,
   userID,
+  userName,
   tenant,
   characters,
 }: {
   operation?: CreditsOperation;
   baseUrl: string;
-  userID: string;
+  userID?: string | null;
+  userName?: string | null;
   tenant: string;
   characters?: number;
 }): Promise<{
@@ -23,8 +25,8 @@ export const getCredits = async ({
   required: number;
   tokens?: number;
 }> => {
-  if (!userID) {
-    throw new Error('userID must be provided');
+  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');
@@ -38,6 +40,7 @@ export const getCredits = async ({
     body: JSON.stringify({
       operation,
       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,
+  };
+}

package/src/helpers/nats/useNatsSession.ts

@@ -0,0 +1,210 @@
+// helpers/nats/useNatsSession.ts - Subscribe to a session's NATS channel.
+//
+// Opens a W3C WebSocket connection (via `wsconnect`), subscribes to the
+// session subject (`sessions.<sessionId>`) and forwards every decoded event to
+// `onMessage`. The cleanup (`nc.close()`) is essential: without it, every
+// `sessionId` change would leave orphan connections / iterators.
+import { useEffect, useRef } from 'react';
+import { wsconnect, NatsConnection } from '@nats-io/nats-core';
+
+/**
+ * `progress` event: job advancement updates.
+ */
+export interface NatsProgressEvent {
+  eventType: 'progress';
+  jobId?: string;
+  currentStep?: number;
+  finalStep?: number;
+  message?: string;
+  startingTime?: string;
+  correlationID?: string;
+}
+
+/**
+ * `dialog.text_entered_response` event: same body returned by
+ * `POST /memori/v2/EnterTextAsync/{sessionId}` (via NATS).
+ */
+export interface NatsDialogResponseEvent {
+  eventType: 'dialog_text_entered_response';
+  requestID?: string;
+  resultCode?: number;
+  resultMessage?: string;
+  currentState?: any;
+  correlationID?: string;
+}
+
+/**
+ * `error` event.
+ */
+export interface NatsErrorEvent {
+  eventType: 'error';
+  errorCode?: string | number;
+  errorMessage?: string;
+  backtrace?: string;
+  correlationID?: string;
+}
+
+/**
+ * Discriminated union of all events received on the session subject.
+ */
+export type NatsSessionEvent =
+  | NatsProgressEvent
+  | NatsDialogResponseEvent
+  | NatsErrorEvent;
+
+function readString(
+  raw: Record<string, unknown>,
+  camelKey: string,
+  snakeKey: string
+): string | undefined {
+  const value = raw[camelKey] ?? raw[snakeKey];
+  return typeof value === 'string' ? value : undefined;
+}
+
+function readNumber(
+  raw: Record<string, unknown>,
+  camelKey: string,
+  snakeKey: string
+): number | undefined {
+  const value = raw[camelKey] ?? raw[snakeKey];
+  return typeof value === 'number' ? value : undefined;
+}
+
+/**
+ * Normalizes raw NATS payloads (snake_case or camelCase) into typed events.
+ */
+export function normalizeNatsEvent(raw: Record<string, unknown>): NatsSessionEvent {
+  const eventType = (readString(raw, 'eventType', 'event_type') ??
+    'unknown') as NatsSessionEvent['eventType'];
+
+  const correlationID =
+    readString(raw, 'correlationID', 'correlation_id') ??
+    readString(raw, 'correlationId', 'correlation_id');
+
+  if (eventType === 'progress') {
+    return {
+      eventType: 'progress',
+      jobId: readString(raw, 'jobId', 'job_id'),
+      currentStep: readNumber(raw, 'currentStep', 'current_step'),
+      finalStep: readNumber(raw, 'finalStep', 'final_step'),
+      message: typeof raw.message === 'string' ? raw.message : undefined,
+      startingTime: readString(raw, 'startingTime', 'starting_time'),
+      correlationID,
+    };
+  }
+
+  if (eventType === 'dialog_text_entered_response') {
+    return {
+      eventType: 'dialog_text_entered_response',
+      requestID:
+        typeof raw.requestID === 'string' ? raw.requestID : undefined,
+      resultCode:
+        typeof raw.resultCode === 'number' ? raw.resultCode : undefined,
+      resultMessage:
+        typeof raw.resultMessage === 'string' ? raw.resultMessage : undefined,
+      currentState: raw.currentState,
+      correlationID,
+    };
+  }
+
+  if (eventType === 'error') {
+    return {
+      eventType: 'error',
+      errorCode: (raw.errorCode ?? raw.error_code) as string | number | undefined,
+      errorMessage: readString(raw, 'errorMessage', 'error_message'),
+      backtrace: typeof raw.backtrace === 'string' ? raw.backtrace : undefined,
+      correlationID,
+    };
+  }
+
+  return {
+    eventType,
+    correlationID,
+  } as NatsSessionEvent;
+}
+
+/**
+ * Open a NATS WebSocket connection, subscribe to the session subject and
+ * forward decoded events to `onMessage`.
+ *
+ * `onMessage` is kept in a ref so callers do not need to memoize it: the
+ * connection is only (re)opened when `sessionId`, `natsWsUrl` or `natsToken`
+ * change.
+ *
+ * @param sessionId Current session UUID (subscription is skipped when falsy).
+ * @param natsWsUrl WebSocket URL of the NATS server.
+ * @param natsToken Bearer token for authentication.
+ * @param onMessage Callback invoked for each decoded event.
+ */
+export function useNatsSession(
+  sessionId: string | undefined,
+  natsWsUrl: string | undefined,
+  natsToken: string | undefined,
+  onMessage: (event: NatsSessionEvent) => void
+) {
+  const connRef = useRef<NatsConnection | null>(null);
+  const onMessageRef = useRef(onMessage);
+
+  // Keep the latest callback without retriggering the connection effect.
+  useEffect(() => {
+    onMessageRef.current = onMessage;
+  }, [onMessage]);
+
+  useEffect(() => {
+    if (!sessionId || !natsWsUrl || !natsToken) {
+      console.debug(
+        '[NATS] subscription skipped (missing sessionId/url/token)',
+        { sessionId, hasUrl: !!natsWsUrl, hasToken: !!natsToken }
+      );
+      return;
+    }
+    let closed = false;
+    const subject = sessionId;
+
+    (async () => {
+      console.info('[NATS] connecting to', natsWsUrl, 'for session', sessionId);
+      const nc = await wsconnect({
+        servers: [natsWsUrl],
+        token: natsToken,
+      });
+      if (closed) {
+        console.debug(
+          '[NATS] connection established after cleanup, closing immediately'
+        );
+        await nc.close();
+        return;
+      }
+      connRef.current = nc;
+      console.info('[NATS] connected to', nc.getServer());
+
+      const sub = nc.subscribe(subject);
+      console.info('[NATS] subscribed to subject', subject);
+      let received = 0;
+      for await (const msg of sub) {
+        received += 1;
+        try {
+          const payload = normalizeNatsEvent(
+            msg.json<Record<string, unknown>>()
+          );
+          console.debug(
+            `[NATS] message #${received} on ${subject} (eventType=${payload.eventType})`,
+            payload
+          );
+          onMessageRef.current(payload);
+        } catch (err) {
+          console.error('[NATS] message decode error', err);
+        }
+      }
+      console.info(
+        `[NATS] subscription on ${subject} closed (received ${received} messages)`
+      );
+    })().catch(err => console.error('[NATS] connection error', err));
+
+    return () => {
+      console.info('[NATS] cleanup: closing connection for subject', subject);
+      closed = true;
+      connRef.current?.close();
+      connRef.current = null;
+    };
+  }, [sessionId, natsWsUrl, natsToken]);
+}

package/src/index.stories.tsx

@@ -22,7 +22,6 @@ export default meta;
 
 const Template: Story<Props> = args => <Memori {...args} />;
 
-
 export const WithInitialContextAndQuestion = Template.bind({});
 WithInitialContextAndQuestion.args = {
   ownerUserName: 'nzambello',
@@ -150,7 +149,8 @@ const piiDetectionConfig = {
     {
       id: 'iban',
       label: { it: 'IBAN', en: 'IBAN' },
-      pattern: '\\b[A-Z]{2}\\d{2}(?:[ ]?[A-Z0-9]{4}){3,7}(?:[ ]?[A-Z0-9]{1,4})?\\b',
+      pattern:
+        '\\b[A-Z]{2}\\d{2}(?:[ ]?[A-Z0-9]{4}){3,7}(?:[ ]?[A-Z0-9]{1,4})?\\b',
       message: {
         it: 'Il messaggio contiene un codice IBAN.',
         en: 'The message contains an IBAN code.',
@@ -185,4 +185,20 @@ WithPiiDetection.args = {
       lang: 'it',
     }),
   },
-};
+};
+
+export const WithLocalNats = Template.bind({});
+WithLocalNats.args = {
+  memoriName: 'test324',
+  ownerUserName: 'andrea.patini',
+  memoriID: 'd661a9ca-e907-4396-a986-5095ccd582d6',
+  ownerUserID: '69fcc557-9cb6-4e5e-b8ab-140cff975492',
+  tenantID: 'localhost:3000',
+  engineURL: 'http://localhost:7778/memori/v2',
+  apiURL: 'http://localhost:7778/api/v2',
+  baseURL: 'http://localhost:3000',
+  layout: 'FULLPAGE',
+  uiLang: 'IT',
+  spokenLang: 'IT',
+  integrationID: 'ee1c3d98-7819-4506-ba28-818e79ba86cb',
+};

package/src/index.tsx

@@ -464,6 +464,7 @@ 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.39.0';
+export const version = '8.40.1';