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

package/src/components/MemoriWidget/MemoriWidget.stories.tsx

@@ -1,17 +1,15 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { memori, integration, tenant } from '../../mocks/data';
-import I18nWrapper from '../../I18nWrapper';
-import MemoriWidget, { Props } from './MemoriWidget';
+import Memori, { Props } from '../../index';
+import { withWidgetProviders } from '../../../.storybook/decorators';
 
 import './MemoriWidget.css';
-import { VisemeProvider } from '../../context/visemeContext';
-import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
-import { AlertProvider } from '@memori.ai/ui';
 
 const meta: Meta = {
-  title: 'Widget/Default',
-  component: MemoriWidget,
+  title: 'Compositions/MemoriWidget',
+  component: Memori,
+  decorators: [withWidgetProviders],
   argTypes: {
     AZURE_COGNITIVE_SERVICES_TTS_KEY: {
       control: {
@@ -37,79 +35,74 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => (
-  <I18nWrapper>
-    <AlertProvider defaultDuration={5000}>
-      <ArtifactProvider>
-        <VisemeProvider>
-          <MemoriWidget {...args} />
-        </VisemeProvider>
-      </ArtifactProvider>
-    </AlertProvider>
-  </I18nWrapper>
-);
+/** Same live agent as Layouts / Full Page. */
+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',
+  showSettings: true,
+  showShare: true,
+};
+
+const Template: Story<Props> = args => <Memori {...args} />;
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing
 export const Default = Template.bind({});
 Default.args = {
-  memori,
-  tenant,
+  ...fixtureBase,
+  layout: 'FULLPAGE',
 };
 
 export const WithAutoStart = Template.bind({});
 WithAutoStart.args = {
-  memori,
-  tenant,
+  ...fixtureBase,
   autoStart: true,
   layout: 'FULLPAGE',
 };
 
 export const WithPosition = Template.bind({});
 WithPosition.args = {
-  memori: {
-    ...memori,
-    needsPosition: true,
-  },
-  tenant,
+  ...fixtureBase,
+  layout: 'FULLPAGE',
+};
+
+export const WithAutoStartAndRequiredPosition = Template.bind({});
+WithAutoStartAndRequiredPosition.args = {
+  ...fixtureBase,
+  autoStart: true,
   layout: 'FULLPAGE',
 };
 
 export const WithLoginRequired = Template.bind({});
 WithLoginRequired.args = {
-  memori: {
-    ...memori,
-    requireLoginToken: true,
-  },
-  tenant,
+  ...fixtureBase,
   layout: 'FULLPAGE',
 };
 
 export const WithDates = Template.bind({});
 WithDates.args = {
-  memori: {
-    ...memori,
-    needsDateTime: true,
-  },
-  tenant,
+  ...fixtureBase,
   layout: 'FULLPAGE',
 };
 
 /** To test dateUTC/place in Enter Text: open DevTools → Network, start chat, set position (header position icon) if testing place, then send a message. Inspect the request to your backend/engine for body.dateUTC (ISO) and body.place (placeName, latitude, longitude, uncertaintyKm). */
 export const WithDateAndPlaceForEnterText = Template.bind({});
 WithDateAndPlaceForEnterText.args = {
-  memori: {
-    ...memori,
-    needsDateTime: true,
-    needsPosition: true,
-  },
-  tenant,
+  ...fixtureBase,
   layout: 'FULLPAGE',
 };
 
 export const WithPublicPageIntegration = Template.bind({});
 WithPublicPageIntegration.args = {
-  memori,
-  tenant,
+  ...fixtureBase,
   integration: {
     ...integration,
     customData: JSON.stringify({
@@ -125,8 +118,7 @@ WithPublicPageIntegration.args = {
 
 export const WithPublicPageIntegrationAndFullbodyAvatar = Template.bind({});
 WithPublicPageIntegrationAndFullbodyAvatar.args = {
-  memori,
-  tenant,
+  ...fixtureBase,
   integration: {
     ...integration,
     customData: JSON.stringify({
@@ -142,8 +134,7 @@ WithPublicPageIntegrationAndFullbodyAvatar.args = {
 
 export const WithPublicPageIntegrationAndNonDefaultLang = Template.bind({});
 WithPublicPageIntegrationAndNonDefaultLang.args = {
-  memori,
-  tenant,
+  ...fixtureBase,
   integration: {
     ...integration,
     customData: JSON.stringify({
@@ -156,40 +147,35 @@ WithPublicPageIntegrationAndNonDefaultLang.args = {
 
 export const ShowShare = Template.bind({});
 ShowShare.args = {
-  memori,
-  tenant,
+  ...fixtureBase,
   showShare: true,
   layout: 'FULLPAGE',
 };
 
 export const ShowSettings = Template.bind({});
 ShowSettings.args = {
-  memori,
-  tenant,
+  ...fixtureBase,
   showSettings: true,
   layout: 'FULLPAGE',
 };
 
 export const ShowClear = Template.bind({});
 ShowClear.args = {
-  memori,
-  tenant,
+  ...fixtureBase,
   showClear: true,
   layout: 'FULLPAGE',
 };
 
 export const ShowUpload = Template.bind({});
 ShowUpload.args = {
-  memori,
-  tenant,
+  ...fixtureBase,
   showUpload: true,
   layout: 'FULLPAGE',
 };
 
 export const ShowUploadFromIntegration = Template.bind({});
 ShowUploadFromIntegration.args = {
-  memori,
-  tenant,
+  ...fixtureBase,
   showUpload: false,
   integration: {
     ...integration,
@@ -203,8 +189,7 @@ ShowUploadFromIntegration.args = {
 
 export const WithoutAudio = Template.bind({});
 WithoutAudio.args = {
-  memori,
-  tenant,
+  ...fixtureBase,
   enableAudio: false,
   AZURE_COGNITIVE_SERVICES_TTS_KEY: 'provide your key here',
   layout: 'FULLPAGE',
@@ -212,8 +197,7 @@ WithoutAudio.args = {
 
 export const WithoutAudioFromIntegrationConfig = Template.bind({});
 WithoutAudioFromIntegrationConfig.args = {
-  memori,
-  tenant,
+  ...fixtureBase,
   integration: {
     ...integration,
     customData: JSON.stringify({
@@ -226,8 +210,7 @@ WithoutAudioFromIntegrationConfig.args = {
 
 export const DefautSpeakerDisabled = Template.bind({});
 DefautSpeakerDisabled.args = {
-  memori,
-  tenant,
+  ...fixtureBase,
   defaultSpeakerActive: false,
   AZURE_COGNITIVE_SERVICES_TTS_KEY: 'provide your key here',
   layout: 'FULLPAGE',
@@ -235,32 +218,28 @@ DefautSpeakerDisabled.args = {
 
 export const ShowOnlyLastMessages = Template.bind({});
 ShowOnlyLastMessages.args = {
-  memori,
-  tenant,
+  ...fixtureBase,
   showOnlyLastMessages: true,
   layout: 'FULLPAGE',
 };
 
 export const ShowOnlyLastMessagesWithAnotherDefault = Template.bind({});
 ShowOnlyLastMessagesWithAnotherDefault.args = {
-  memori,
-  tenant,
+  ...fixtureBase,
   showOnlyLastMessages: false,
   layout: 'FULLPAGE',
 };
 
 export const WithAzureSpeechKey = Template.bind({});
 WithAzureSpeechKey.args = {
-  memori,
-  tenant,
+  ...fixtureBase,
   AZURE_COGNITIVE_SERVICES_TTS_KEY: 'provide your key here',
   layout: 'FULLPAGE',
 };
 
 export const WithCustomMediaRenderer = Template.bind({});
 WithCustomMediaRenderer.args = {
-  memori,
-  tenant,
+  ...fixtureBase,
   customMediaRenderer: (mimeType: string) => (
     <div
       style={{
@@ -280,16 +259,15 @@ WithCustomMediaRenderer.args = {
 
 export const WithUserAvatar = Template.bind({});
 WithUserAvatar.args = {
-  memori,
-  tenant,
+  ...fixtureBase,
   userAvatar: 'https://picsum.photos/200',
   layout: 'FULLPAGE',
 };
 
 export const WithUserAvatarAsElement = Template.bind({});
 WithUserAvatarAsElement.args = {
-  memori,
-  tenant,
+  ...fixtureBase,
   userAvatar: <span>USER</span>,
   layout: 'FULLPAGE',
 };
+

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -24,7 +24,10 @@ import type {
   PiiDetectionConfig,
 } from '../../types/layout';
 import { checkPii } from '../../helpers/piiDetection'; // PII check when integrationConfig.layout has piiDetection.enabled
-import { shouldRestartSessionOnPositionPopoverClose } from '../../helpers/positionPopover';
+import {
+  shouldHoldAutoStartForPosition,
+  shouldRestartSessionOnPositionPopoverClose,
+} from '../../helpers/positionPopover';
 
 // Libraries
 import React, {
@@ -511,9 +514,8 @@ type ChatStylesConfig = {
 
 /**
  * Returns CSS custom properties for the chat container when a brand primary is set.
- * Maps buttonBgColor → --memori-primary-color / --memori-primary and injects derived
- * tokens (hover, active, borders, etc.) in the same scope.
- * If buttonBgColor is missing, returns {} so global CSS defaults are used.
+ * Sets the UI brand hook (`--memori-primary-color`); hover/active/subtle derive from
+ * `@memori.ai/ui` theme tokens. Widget-only icon soft fills stay here.
  */
 export function getChatStyles(
   config: ChatStylesConfig | null | undefined
@@ -523,41 +525,14 @@ export function getChatStyles(
 
   const primaryContent = config?.buttonTextColor ?? '#ffffff';
 
-  // Match @memori.ai/ui token semantics:
-  // --memori-surface-contrast = ink (#000 light / #fff dark)
-  // --memori-surface-contrast-inverse = surface (#fff light / #000 dark)
   return {
     '--memori-primary-color': primary,
-    '--memori-primary': primary,
     '--memori-primary-content': primaryContent,
-    '--memori-primary-hover':
-      'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast, black) 15%)',
-    '--memori-primary-active':
-      'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast, black) 25%)',
-    '--memori-primary-disabled':
-      'color-mix(in oklch, var(--memori-primary), transparent 60%)',
-    '--memori-primary-subtle':
-      'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 60%)',
-    '--memori-primary-subtle-hover':
-      'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 50%)',
-    '--memori-border-primary':
-      'color-mix(in oklch, var(--memori-primary), transparent 70%)',
-    '--memori-border-primary-hover':
-      'color-mix(in oklch, var(--memori-primary), transparent 50%)',
-    '--memori-focus-ring-color':
-      'color-mix(in oklch, var(--memori-primary), transparent 80%)',
-    '--memori-focus-ring': '0 0 0 3px var(--memori-focus-ring-color)',
-    '--memori-shadow-primary':
-      '0 8px 16px -4px color-mix(in oklch, var(--memori-primary), transparent 70%)',
-    '--memori-skeleton-base':
-      'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 85%)',
-    '--memori-skeleton-highlight':
-      'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 75%)',
     /* Soft fills for secondary IconButton active / recording (never solid CTA) */
     '--memori-icon-active-bg':
       'color-mix(in oklch, var(--memori-primary) 12%, transparent)',
     '--memori-icon-recording-bg':
-      'color-mix(in oklch, var(--memori-error, #dc2626) 12%, transparent)',
+      'color-mix(in oklch, var(--memori-error) 12%, transparent)',
   } as CSSProperties;
 }
 
@@ -1536,8 +1511,10 @@ const MemoriWidget = ({
     // Check if authentication is needed for private Memori
     if (
       memori.privacyType !== 'PUBLIC' &&
+      !params.password &&
       !memori.secretToken &&
       !memoriPwd &&
+      !params.recoveryTokens?.length &&
       !memoriTokens
     ) {
       setAuthModalState('password');
@@ -1700,6 +1677,7 @@ const MemoriWidget = ({
       // Show age verification if required and birth date not provided
       if (!userBirthDate && !!minAge) {
         setShowAgeVerification(true);
+        setLoading(false);
         return;
       }
 
@@ -1709,10 +1687,11 @@ const MemoriWidget = ({
         !password &&
         !memori.secretToken &&
         !memoriPwd &&
-        !recoveryTokens &&
+        !recoveryTokens?.length &&
         !memoriTokens
       ) {
         setAuthModalState('password');
+        setLoading(false);
         return;
       }
 
@@ -2613,20 +2592,26 @@ const MemoriWidget = ({
   }, []);
 
   useEffect(() => {
-    // if memori is speaking, don't start listening
+    // if memori is speaking or generating a reply, don't start listening
     if (
       !isPlayingAudio &&
+      !memoriTyping &&
       continuousSpeech &&
       (hasUserActivatedListening || !requestedListening) &&
       sessionId &&
       !hasUserTypedMessage // Don't start recording if user has typed a message
     ) {
       startRecording();
-    } else if (isPlayingAudio && isListening) {
+    } else if ((isPlayingAudio || memoriTyping) && isListening) {
       stopRecording();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isPlayingAudio, hasUserActivatedListening, hasUserTypedMessage]);
+  }, [
+    isPlayingAudio,
+    hasUserActivatedListening,
+    hasUserTypedMessage,
+    memoriTyping,
+  ]);
 
   useEffect(() => {
     stopRecording();
@@ -2701,7 +2686,7 @@ const MemoriWidget = ({
   }`
     );
   }
-  const integrationStylesheet = `@layer integration {
+  const integrationStylesheet = `@layer memori.overrides {
   ${integrationStylesheetParts.join('\n  ')}
 }
 `;
@@ -2874,9 +2859,15 @@ const MemoriWidget = ({
         'position',
         undefined
       );
-      // Only check for position requirement if memori.needsPosition is true
-      if (autoStart && !localPosition && memori.needsPosition) {
-        setPositionPopoverOpenState(true);
+      // Wait on the start panel for location share/skip; do not open the header popover.
+      if (
+        autoStart &&
+        shouldHoldAutoStartForPosition(
+          !!memori.needsPosition,
+          Boolean(position || localPosition)
+        )
+      ) {
+        setClickedStart(false);
         return;
       }
 
@@ -3282,13 +3273,17 @@ const MemoriWidget = ({
   const setPositionPopoverOpen = useCallback(
     (open: boolean) => {
       const sessionAlreadyStarted = !!(sessionId && hasUserActivatedSpeak);
+      const hasPosition = Boolean(
+        position || getLocalConfig<Venue | undefined>('position', undefined)
+      );
       setPositionPopoverOpenState(wasOpen => {
         if (
           shouldRestartSessionOnPositionPopoverClose(
             wasOpen,
             open,
             autoStart,
-            sessionAlreadyStarted
+            sessionAlreadyStarted,
+            hasPosition
           )
         ) {
           // Defer: React setState updaters must stay pure.
@@ -3304,17 +3299,23 @@ const MemoriWidget = ({
         return open;
       });
     },
-    [autoStart, onClickStart, sessionId, hasUserActivatedSpeak]
+    [autoStart, onClickStart, sessionId, hasUserActivatedSpeak, position]
   );
 
   useEffect(() => {
+    const storedPosition = getLocalConfig<Venue | undefined>(
+      'position',
+      undefined
+    );
+    const hasPosition = Boolean(position || storedPosition);
     if (
       !clickedStart &&
       !sessionStartingRef.current &&
       !sessionId &&
       autoStart &&
       selectedLayout !== 'HIDDEN_CHAT' &&
-      (!needsCredits || hasEnoughCredits)
+      (!needsCredits || hasEnoughCredits) &&
+      !shouldHoldAutoStartForPosition(!!memori.needsPosition, hasPosition)
     ) {
       onClickStart();
     }
@@ -3325,6 +3326,8 @@ const MemoriWidget = ({
     sessionId,
     needsCredits,
     hasEnoughCredits,
+    position,
+    memori.needsPosition,
   ]);
 
   useEffect(() => {
@@ -3488,7 +3491,7 @@ const MemoriWidget = ({
 
   const showFullHistory =
     showOnlyLastMessages === undefined
-      ? selectedLayout !== 'TOTEM' && selectedLayout !== 'WEBSITE_ASSISTANT'
+      ? selectedLayout !== 'WEBSITE_ASSISTANT'
       : !showOnlyLastMessages;
   const canShowLoginButton =
     !tenant?.ssoLogin &&
@@ -3964,6 +3967,8 @@ const MemoriWidget = ({
                 language={language}
                 userLang={userLang}
                 isMultilanguageEnabled={isMultilanguageEnabled}
+                showFunctionCache={showFunctionCache}
+                showMessageConsumption={enableMessageConsumption}
               />
             )}
 

package/src/components/MemoriWidget/getChatStyles.test.ts

@@ -0,0 +1,24 @@
+import { getChatStyles } from './MemoriWidget';
+
+describe('getChatStyles', () => {
+  it('returns empty object when no brand primary is set', () => {
+    expect(getChatStyles(undefined)).toEqual({});
+    expect(getChatStyles({})).toEqual({});
+  });
+
+  it('sets only the brand hook and widget-domain icon tokens', () => {
+    const styles = getChatStyles({
+      buttonBgColor: '#8246af',
+      buttonTextColor: '#fff',
+    });
+
+    expect(styles).toMatchObject({
+      '--memori-primary-color': '#8246af',
+      '--memori-primary-content': '#fff',
+    });
+    expect(styles).not.toHaveProperty('--memori-primary-hover');
+    expect(styles).not.toHaveProperty('--memori-primary-active');
+    expect(styles).toHaveProperty('--memori-icon-active-bg');
+    expect(styles).toHaveProperty('--memori-icon-recording-bg');
+  });
+});

package/src/components/MicrophoneButton/MicrophoneButton.stories.tsx

@@ -6,7 +6,7 @@ import MicrophoneButton, { Props } from './MicrophoneButton';
 import './MicrophoneButton.css';
 
 const meta: Meta = {
-  title: 'Widget/Microphone Button',
+  title: 'Internals/Microphone Button',
   component: MicrophoneButton,
   argTypes: {
     disabled: {

package/src/components/MobileSessionPanel/MobileSessionPanel.css

@@ -1,5 +1,5 @@
 .memori-mobile-session-panel--overlay {
-    position: fixed;
+    position: absolute;
     z-index: 2100;
     top: 0;
     right: 0;
@@ -343,7 +343,7 @@
 .memori-dropdown--user-email {
     overflow: hidden;
     margin: 0;
-    color: var(--memori-text-muted, #666);
+    color: var(--memori-neutral, #666);
     font-size: 0.875rem;
     line-height: 1.35;
     text-overflow: ellipsis;

package/src/components/PositionPopover/PositionPopover.css

@@ -37,7 +37,7 @@
 
 .memori-position-popover__switch-icon {
     flex-shrink: 0;
-    color: var(--memori-text-color-secondary, rgba(255, 255, 255, 0.75));
+    color: var(--memori-neutral, rgba(255, 255, 255, 0.75));
 }
 
 .memori-position-popover__switch-label {
@@ -55,7 +55,7 @@
 }
 
 .memori-position-popover__switch-label-subtitle {
-    color: var(--memori-text-color-secondary, rgba(255, 255, 255, 0.65));
+    color: var(--memori-neutral, rgba(255, 255, 255, 0.65));
     font-size: 0.75rem;
     line-height: 1.2;
 }
@@ -181,7 +181,7 @@
 
 .memori-position-popover__error {
     margin: 0 0 var(--memori-spacing-sm);
-    color: var(--memori-danger, #c53030);
+    color: var(--memori-error, #c53030);
     font-size: 0.875rem;
     line-height: var(--memori-text-line-normal);
 }

package/src/components/PositionPopover/PositionPopover.stories.tsx

@@ -6,7 +6,7 @@ import { memori, venue } from '../../mocks/data';
 import PositionPopover from './PositionPopover';
 
 const meta: Meta = {
-  title: 'Widget/PositionPopover',
+  title: 'Surfaces/PositionPopover',
   component: PositionPopover,
 };