@memori.ai/memori-react 9.0.0-alpha.21 → 9.0.0-alpha.23

package/src/components/layouts/layouts.stories.tsx

@@ -1,88 +1,115 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Spin } from '@memori.ai/ui';
 import { memori, tenant, integration } from '../../mocks/data';
 import Memori, { Props } from '../../index';
 import { LayoutProps } from '../MemoriWidget/MemoriWidget';
-import I18nWrapper from '../../I18nWrapper';
-import { VisemeProvider } from '../../context/visemeContext';
-import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
-
-const meta: Meta = {
-  title: 'General/Layouts',
-  component: (args: Props) => <Memori {...args} />,
-  argTypes: {},
+import { withWidgetProviders } from '../../../.storybook/decorators';
+
+/**
+ * Canonical layout matrix — one story per LayoutName (plus Custom + HiddenChat note).
+ * Live staging/localhost agents live under `Live/` (see Live/Agents.stories.tsx).
+ */
+const meta = {
+  title: 'Layouts',
+  component: Memori,
+  decorators: [withWidgetProviders],
   parameters: {
     controls: { expanded: true },
     layout: 'fullscreen',
   },
-};
+} satisfies Meta<typeof Memori>;
 
 export default meta;
+type Story = StoryObj<typeof meta>;
 
-const Template: Story<Props> = args => (
-  <I18nWrapper>
-    <ArtifactProvider>
-      <VisemeProvider>
-        <Memori {...args} />
-      </VisemeProvider>
-    </ArtifactProvider>
-  </I18nWrapper>
-);
-
-const DefaultLayout = Template.bind({});
-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: 'ZOOMED_FULL_BODY',
+/** Fixture-first base — deterministic sidebar entry for each layout. */
+const fixtureBase: Partial<Props> = {
+  memori,
+  tenant,
+  memoriName: memori.name,
+  memoriID: memori.memoriID,
+  ownerUserName: 'memoridev',
+  tenantID: 'www.aisuru.com',
+  engineURL: 'https://engine.memori.ai',
+  apiURL: 'https://backend.memori.ai',
+  baseURL: 'https://www.aisuru.com',
   uiLang: 'IT',
   spokenLang: 'IT',
-  integrationID: '32922e14-24d6-4f5f-a06b-d963da14a658',
   showSettings: true,
+  showShare: true,
 };
 
-export const Default = Template.bind({});
-Default.args = {
-  ...DefaultLayout.args,
+/** Default layout = FULLPAGE (not Zoomed). */
+export const FullPage: Story = {
+  args: {
+    ...fixtureBase,
+    layout: 'FULLPAGE',
+  },
 };
 
-export const Totem = Template.bind({});
-Totem.args = {
-  ...DefaultLayout.args,
-  uiLang: 'it',
-  showShare: true,
-  showSettings: true,
-  // memori: memori,
-  integration: {
-    ...integration,
+export const Chat: Story = {
+  args: {
+    ...fixtureBase,
+    layout: 'CHAT',
+    showUpload: true,
   },
-  tenant,
-  layout: 'TOTEM',
 };
 
-export const ChatOnly = Template.bind({});
-ChatOnly.args = {
-  ...DefaultLayout.args,
-  uiLang: 'it',
-  showShare: true,
-  showSettings: true,
-  showUpload: true,
-  memori: memori,
-  tenant,
-  layout: 'CHAT',
+export const Totem: Story = {
+  args: {
+    ...fixtureBase,
+    layout: 'TOTEM',
+    integration: { ...integration },
+  },
+};
+
+export const ZoomedFullBody: Story = {
+  args: {
+    ...fixtureBase,
+    layout: 'ZOOMED_FULL_BODY',
+  },
+};
+
+export const WebsiteAssistant: Story = {
+  args: {
+    ...fixtureBase,
+    layout: 'WEBSITE_ASSISTANT',
+    multilingual: true,
+    integration: {
+      ...integration,
+      customData: JSON.stringify({
+        textColor: '#2a2a2a',
+        buttonBgColor: '#653165',
+        buttonTextColor: '#ffffff',
+        blurBackground: true,
+        innerBgColor: 'light',
+        innerBgAlpha: 0.8,
+        multilanguage: true,
+        avatar: 'readyplayerme',
+        avatarURL:
+          'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
+      }),
+    },
+  },
+};
+
+export const WebsiteAssistantWithout3DAvatar: Story = {
+  args: {
+    ...WebsiteAssistant.args,
+    avatar3dHidden: true,
+  },
+};
+
+/** Collapsed / FAB entry point for HIDDEN_CHAT. */
+export const HiddenChat: Story = {
+  args: {
+    ...fixtureBase,
+    layout: 'HIDDEN_CHAT',
+  },
 };
 
 const CustomLayout: React.FC<LayoutProps> = ({
-  Header,
-  headerProps,
-  Avatar,
-  avatarProps,
   Chat,
   chatProps,
   StartPanel,
@@ -97,10 +124,11 @@ const CustomLayout: React.FC<LayoutProps> = ({
   <>
     {integrationStyle}
     {integrationBackground}
-
-    <Spin spinning={loading} className="memori-mycustom-layout">
+    <Spin
+      spinning={loading}
+      className="memori-mycustom-layout"
+    >
       {poweredBy}
-
       <div className="memori-mycustom-layout--controls">
         {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
           <Chat {...chatProps} />
@@ -112,121 +140,10 @@ const CustomLayout: React.FC<LayoutProps> = ({
   </>
 );
 
-export const Custom = Template.bind({});
-Custom.args = {
-  ...DefaultLayout.args,
-  uiLang: 'it',
-  showShare: true,
-  showSettings: true,
-  memori: memori,
-  tenant,
-  layout: 'FULLPAGE',
-  customLayout: CustomLayout,
-};
-
-export const WebsiteAssistant2 = Template.bind({});
-WebsiteAssistant2.args = {
-  memoriName: 'Marconi Express',
-  ownerUserName: 'exmita',
-  memoriID: '1755979f-28f1-45d1-8f41-bb34e1f7756b',
-  ownerUserID: '3194fcd3-040b-4d5e-a925-691911fb1177',
-  tenantID: 'exmachina.aclambda.online',
-  engineURL: 'https://engine.memori.ai',
-  apiURL: 'https://backend.memori.ai',
-  baseURL: 'https://exmachina.aclambda.online',
-  uiLang: 'IT',
-  avatar3dHidden: true,
-  spokenLang: 'IT',
-  layout: 'WEBSITE_ASSISTANT',
-};
-
-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',
-  avatar3dHidden: true,
-  uiLang: 'IT',
-  spokenLang: 'IT',
-  showOnlyLastMessages: true,
-  integrationID: '716f4728-919c-4015-aae1-88998a081c6f',
-};
-
-export const WebsiteAssistant = Template.bind({});
-WebsiteAssistant.args = {
-  uiLang: 'EN',
-  showShare: false,
-  showSettings: true,
-  memori: memori,
-  tenant,
-  layout: 'WEBSITE_ASSISTANT',
-  memoriName: 'Memori',
-  memoriID: '25ced51c-3520-41af-8bbe-222d861b8e32',
-  ownerUserName: 'memoridev',
-  tenantID: 'www.aisuru.com',
-  apiURL: 'https://backend.memori.ai',
-  baseURL: 'https://www.aisuru.com',
-  spokenLang: 'EN',
-  context: {
-    SOURCE: 'WEBSITE',
-    PATH: '/en/',
-  },
-  multilingual: true,
-  integrationID: 'cb3c4776-7f0b-4f97-a773-c32a5d7a3bf1',
-  integration: {
-    ...integration,
-    customData: JSON.stringify({
-      textColor: '#2a2a2a',
-      buttonBgColor: '#653165',
-      buttonTextColor: '#ffffff',
-      blurBackground: true,
-      innerBgColor: 'light',
-      innerBgAlpha: 0.8,
-      multilanguage: true,
-      avatar: 'readyplayerme',
-      avatarURL:
-        'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
-    }),
+export const Custom: Story = {
+  args: {
+    ...fixtureBase,
+    layout: 'FULLPAGE',
+    customLayout: CustomLayout,
   },
 };
-
-export const WebsiteAssistantWithout3DAvatar = Template.bind({});
-WebsiteAssistantWithout3DAvatar.args = {
-  ...WebsiteAssistant.args,
-  avatar3dHidden: true,
-};
-
-export const HiddenChat = Template.bind({});
-HiddenChat.args = {
-  ...DefaultLayout.args,
-  uiLang: 'it',
-  showShare: true,
-  showSettings: true,
-  memori: memori,
-  tenant,
-  layout: 'HIDDEN_CHAT',
-};
-
-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: 'ZOOMED_FULL_BODY',
-  uiLang: 'IT',
-  spokenLang: 'IT',
-  integrationID: '32922e14-24d6-4f5f-a06b-d963da14a658',
-  showSettings: true,
-};

package/src/components/layouts/totem.css

@@ -180,6 +180,11 @@
    internal scroll instead of pushing the scene up. */
 .memori-totem-layout--controls {
     z-index: 100;
+    display: flex;
+    width: 100%;
+    min-height: 0;
+    max-height: 48vh;
+    flex-direction: column;
     flex-shrink: 0;
 }
 
@@ -187,6 +192,8 @@
    SECTION 2–3 — Single unified panel + shared alignment axis
    One container (surface + 1px border + 12px radius). Inner sections have
    NO border/shadow/width of their own, only 1px dividers between them.
+   A definite height (not just max-height) is required so nested overflow-y
+   auto actually scrolls instead of clipping.
    ========================================================================== */
 .memori-totem-layout--controls .memori-chat--wrapper,
 .memori-totem-layout--controls .memori--start-panel {
@@ -194,8 +201,11 @@
     overflow: hidden;
     width: 100%;
     max-width: var(--memori-totem-max-width, 600px);
+    height: 48vh;
+    min-height: 0;
     max-height: 48vh;
     box-sizing: border-box;
+    flex: 1 1 auto;
     flex-direction: column;
     padding: 0;
     border: 1px solid var(--memori-border-color);
@@ -206,34 +216,53 @@
 
 /* Nested conversation column must not add its own axis/padding/surface. */
 .memori-totem-layout--controls .memori-conversation-column {
+    display: flex;
+    overflow: hidden;
     width: 100%;
     max-width: none;
     height: auto;
     min-height: 0;
+    flex: 1 1 0%;
+    flex-direction: column;
     padding: 0;
     margin: 0;
 }
 
-/* Messages section: height follows content (no empty band), scrolls when capped. */
-.memori-totem-layout--controls .memori-chat--history {
-    height: auto;
+/* Messages section: remaining panel height; children must not size to content. */
+.memori-totem-layout--controls .memori-chat--history,
+.memori-totem-layout--controls .memori-chat--history.memori-chat--history-touch {
+    display: flex;
+    overflow: hidden;
+    height: auto !important;
     min-height: 0;
-    flex: 1 1 auto;
+    flex: 1 1 0%;
+    flex-direction: column;
     border: none;
     border-radius: 0;
     margin: 0;
     background: transparent;
 }
 
-.memori-totem-layout--controls .memori-chat--content {
-    height: auto;
+.memori-totem-layout--controls .memori-chat--content,
+.memori-totem-layout--controls .memori-chat--content.memori-chat--content-touch {
+    height: 0;
+    min-height: 0;
     max-height: none;
+    flex: 1 1 auto;
     padding: var(--memori-spacing-md);
     background: transparent;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+
+.memori-totem-layout--controls .memori-chat--content > * {
+    flex-shrink: 0;
 }
 
 /* Input section: 1px divider above, no own surface. */
 .memori-totem-layout--controls .memori-chat-inputs-wrapper {
+    flex-shrink: 0;
     padding: var(--memori-spacing-md);
     border-top: 1px solid var(--memori-border-color);
     background: transparent;
@@ -244,10 +273,15 @@
     border-radius: 8px;
 }
 
+.memori-totem-layout--controls .memori-chat--bubble,
+.memori-totem-layout--controls .memori-chat--bubble.memori-chat--user-bubble {
+    font-size: 1.125rem;
+}
+
 /* Start-panel body scrolls internally instead of stretching the panel. */
 .memori-totem-layout--controls .memori--start-panel__body {
     min-height: 0;
-    flex: 1 1 auto;
+    flex: 1 1 0%;
     overflow-y: auto;
 }
 
@@ -259,11 +293,11 @@
 }
 
 @media (max-width: 480px) {
-    .memori-totem-layou .memori-send-on-enter-menu {
+    .memori-totem-layout .memori-send-on-enter-menu {
         display: none;
     }
 
-    .memori-totem-layou .memori-header--button-settings {
+    .memori-totem-layout .memori-header--button-settings {
         display: none;
     }
 }

package/src/helpers/nats/getNatsConfig.ts

@@ -7,7 +7,10 @@
 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. */
+  /**
+   * Per-session NATS user JWT. Presented with `jwtAuthenticator` (bearer:
+   * no nkey seed on the client).
+   */
   token: string;
   /**
    * JetStream stream that stores session events. When set, the client consumes

package/src/helpers/nats/useNats.test.tsx

@@ -0,0 +1,81 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { getNatsConfig } from './getNatsConfig';
+import { useNats } from './useNats';
+import { NatsSessionLifecycle, useNatsSession } from './useNatsSession';
+
+jest.mock('./getNatsConfig', () => ({
+  getNatsConfig: jest.fn(),
+}));
+
+jest.mock('./useNatsSession', () => ({
+  useNatsSession: jest.fn(),
+}));
+
+const mockGetNatsConfig = getNatsConfig as jest.MockedFunction<
+  typeof getNatsConfig
+>;
+const mockUseNatsSession = useNatsSession as jest.MockedFunction<
+  typeof useNatsSession
+>;
+
+function latestLifecycle(): NatsSessionLifecycle {
+  return mockUseNatsSession.mock.calls.at(-1)?.[3] ?? {};
+}
+
+describe('useNats credential lifecycle', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockGetNatsConfig.mockResolvedValue({
+      url: 'wss://nats.example.test',
+      token: 'fresh-jwt',
+    });
+    Object.defineProperty(document, 'visibilityState', {
+      configurable: true,
+      value: 'visible',
+    });
+  });
+
+  it('refreshes the JWT on resume and catches up after reconnecting', async () => {
+    const onCatchUp = jest.fn();
+    renderHook(() =>
+      useNats({
+        baseUrl: 'https://dashboard.example.test',
+        sessionId: 'session-a',
+        onCatchUp,
+      })
+    );
+
+    await waitFor(() => expect(mockGetNatsConfig).toHaveBeenCalledTimes(1));
+
+    act(() => {
+      (document.dispatchEvent as (event: Event) => boolean)(
+        new Event('visibilitychange')
+      );
+    });
+    await waitFor(() => expect(mockGetNatsConfig).toHaveBeenCalledTimes(2));
+
+    act(() => latestLifecycle().onConnected?.());
+    expect(onCatchUp).toHaveBeenCalledTimes(1);
+  });
+
+  it('refreshes the JWT after an authorization error', async () => {
+    const onCatchUp = jest.fn();
+    renderHook(() =>
+      useNats({
+        baseUrl: 'https://dashboard.example.test',
+        sessionId: 'session-a',
+        onCatchUp,
+      })
+    );
+
+    await waitFor(() => expect(mockGetNatsConfig).toHaveBeenCalledTimes(1));
+
+    act(() => {
+      latestLifecycle().onAuthError?.(new Error('Authorization Violation'));
+    });
+    await waitFor(() => expect(mockGetNatsConfig).toHaveBeenCalledTimes(2));
+
+    act(() => latestLifecycle().onConnected?.());
+    expect(onCatchUp).toHaveBeenCalledTimes(1);
+  });
+});