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

package/esm/version.d.ts

@@ -1 +1 @@
-export declare const version = "9.0.0-alpha.21";
+export declare const version = "9.0.0-alpha.22";

package/esm/version.js

@@ -1,2 +1,2 @@
-export const version = '9.0.0-alpha.21';
+export const version = '9.0.0-alpha.22';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "9.0.0-alpha.21",
+  "version": "9.0.0-alpha.22",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",
@@ -240,6 +240,7 @@
     "@commitlint/config-conventional": "17.3.0",
     "@release-it/conventional-changelog": "5.1.1",
     "@size-limit/preset-small-lib": "8.1.0",
+    "@storybook/addon-a11y": "7.4.0",
     "@storybook/addon-essentials": "7.4.0",
     "@storybook/addon-links": "7.4.0",
     "@storybook/addon-mdx-gfm": "7.4.0",
@@ -287,7 +288,7 @@
     "release-it": "15.5.0",
     "rimraf": "3.0.2",
     "size-limit": "8.1.0",
-    "storybook": "7.6.21",
+    "storybook": "7.4.0",
     "stylelint": "14.15.0",
     "stylelint-config-idiomatic-order": "9.0.0",
     "stylelint-config-prettier": "9.0.4",
@@ -302,11 +303,12 @@
   },
   "dependencies": {
     "@memori.ai/memori-api-client": "6.24.1",
-    "@memori.ai/ui": "^1.16.1",
+    "@memori.ai/ui": "^1.17.0",
     "@nats-io/jetstream": "^3.4.0",
     "@nats-io/nats-core": "^3.4.0",
     "@react-three/drei": "8.20.2",
     "@react-three/fiber": "7.0.25",
+    "@tanstack/react-table": "^8.21.0",
     "classnames": "2.5.1",
     "dompurify": "^3.4.13",
     "ellipsed": "1.6.0",

package/src/Live/Agents.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Memori from '../index';
+import { withWidgetProviders } from '../../.storybook/decorators';
+
+/**
+ * Live / staging / localhost agent demos. Not fixture-first — expect network.
+ * Keep out of Layouts canonical matrix.
+ */
+const meta = {
+  title: 'Live/Agents',
+  component: Memori,
+  decorators: [withWidgetProviders],
+  parameters: {
+    controls: { expanded: true },
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Memori>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const stagingBase = {
+  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',
+  uiLang: 'IT' as const,
+  spokenLang: 'IT' as const,
+  integrationID: '32922e14-24d6-4f5f-a06b-d963da14a658',
+  showSettings: true,
+  autoStart: true,
+};
+
+export const StagingFullPage: Story = {
+  args: {
+    ...stagingBase,
+    layout: 'FULLPAGE',
+  },
+};
+
+export const StagingZoomedFullBody: Story = {
+  args: {
+    ...stagingBase,
+    layout: 'ZOOMED_FULL_BODY',
+  },
+};

package/src/Live/KnownFacts.stories.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import memoriApiClient from '@memori.ai/memori-api-client';
+import { AlertProvider } from '@memori.ai/ui';
+import KnownFacts from '../components/KnownFacts/KnownFacts';
+import '../components/KnownFacts/KnownFacts.css';
+
+/**
+ * Localhost-only KnownFacts demo. Prefer Surfaces/Known Facts fixtures for review.
+ */
+const meta = {
+  title: 'Live/Known Facts',
+  component: KnownFacts,
+  parameters: {
+    controls: { expanded: true },
+  },
+} satisfies Meta<typeof KnownFacts>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithRealDataLocalhost: Story = {
+  render: args => (
+    <AlertProvider defaultDuration={5000}>
+      <KnownFacts
+        {...args}
+        // @ts-expect-error storybook live demo memori shape
+        memori={{
+          memoriName: 'test memori',
+          ownerUserName: 'nicola',
+          memoriID: '1a9c75e8-57aa-4ce3-8ea5-256185fa79a7',
+          ownerUserID: '04a8cff9-13d6-4367-9cb2-72b9af9ee494',
+          tenantID: 'app.memorytwin.com',
+          apiURL: 'http://localhost:7778',
+          baseURL: 'http://localhost:3000',
+          uiLang: 'EN',
+          lang: 'IT',
+          layout: 'FULLPAGE',
+          showShare: 'true',
+        }}
+        sessionID="5841f5f9-3315-4a5a-9b62-33b13d5a27fd"
+        closeDrawer={() => {}}
+        apiClient={memoriApiClient()}
+      />
+    </AlertProvider>
+  ),
+  args: {
+    visible: true,
+  },
+};

package/src/Showcase.stories.tsx

@@ -16,7 +16,6 @@ import {
   dialogState,
   knownFact,
   expertReference,
-  venue,
 } from './mocks/data';
 
 // Components
@@ -36,14 +35,11 @@ import Blob from './components/Blob/Blob';
 import MicrophoneButton from './components/MicrophoneButton/MicrophoneButton';
 import Typing from './components/Typing/Typing';
 import ChangeMode from './components/ChangeMode/ChangeMode';
-import DateSelector from './components/DateSelector/DateSelector';
 import AgeVerificationModal from './components/AgeVerificationModal/AgeVerificationModal';
-import VenueWidget from './components/VenueWidget/VenueWidget';
 import SendOnEnterMenu from './components/SendOnEnterMenu/SendOnEnterMenu';
 import ExpertsDrawer from './components/ExpertsDrawer/ExpertsDrawer';
 import SettingsDrawer from './components/SettingsDrawer/SettingsDrawer';
 import LoginDrawer from './components/LoginDrawer/LoginDrawer';
-import FilePreview from './components/FilePreview/FilePreview';
 import MediaWidget from './components/MediaWidget/MediaWidget';
 import MediaItemWidget from './components/MediaWidget/MediaItemWidget';
 
@@ -63,13 +59,10 @@ import './components/WhyThisAnswer/WhyThisAnswer.css';
 import './components/Blob/Blob.css';
 import './components/MicrophoneButton/MicrophoneButton.css';
 import './components/ChangeMode/ChangeMode.css';
-import './components/DateSelector/DateSelector.css';
-import './components/VenueWidget/VenueWidget.css';
 import './components/SendOnEnterMenu/SendOnEnterMenu.css';
 import './components/ExpertsDrawer/ExpertsDrawer.css';
 import './components/SettingsDrawer/SettingsDrawer.css';
 import './components/LoginDrawer/LoginDrawer.css';
-import './components/FilePreview/FilePreview.css';
 import './components/MediaWidget/MediaWidget.css';
 import './components/MediaWidget/MediaItemWidget.css';
 
@@ -90,7 +83,7 @@ const titleStyle: React.CSSProperties = {
 
 
 const meta: Meta = {
-  title: 'Showcase/All Components',
+  title: 'Internals/Showcase',
   parameters: {
     layout: 'fullscreen',
     controls: { expanded: false },
@@ -110,14 +103,10 @@ export const AllComponentsWithAllPropsEnabled: Story = () => {
   const [sendOnEnter, setSendOnEnter] = useState<'keypress' | 'click'>(
     'keypress'
   );
-  const [venueState, setVenueState] = useState(venue);
   const [listening, setListening] = useState(false);
   const [userMessage, setUserMessage] = useState(
     'Sample message with all features enabled'
   );
-  const [previewFiles, setPreviewFiles] = useState<
-    { name: string; id: string; content: string }[]
-  >([]);
   const [showAgeVerificationModal, setShowAgeVerificationModal] = useState(false);
 
   const integrationConfig = integration?.customData
@@ -468,9 +457,9 @@ export const AllComponentsWithAllPropsEnabled: Story = () => {
               />
             </section>
 
-            {/* DateSelector */}
+            {/* AgeVerificationModal */}
             <section style={sectionStyle}>
-              <h2 style={titleStyle}>DateSelector</h2>
+              <h2 style={titleStyle}>AgeVerificationModal</h2>
               <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                 <div>
                   <Button

package/src/components/AgeVerificationModal/AgeVerificationModal.css

@@ -1,10 +1,4 @@
-/* Above website assistant and other fixed UI (same max z-index so modal stacks on top by DOM order) */
-.memori-modal__backdrop.age-verification-modal-backdrop,
-.age-verification-modal.memori-modal__viewport,
-.age-verification-modal {
-    z-index: 2147483647;
-}
-
+/* Age verification uses Modal stacking="stacked"; keep backdrop tint only. */
 .memori-modal__backdrop.age-verification-modal-backdrop {
     background: color-mix(in srgb, #000 45%, transparent);
 }

package/src/components/AgeVerificationModal/AgeVerificationModal.stories.tsx

@@ -7,7 +7,7 @@ import './AgeVerificationModal.css';
 import { AlertProvider } from '@memori.ai/ui';
 
 const meta: Meta = {
-  title: 'AgeVerificationModal',
+  title: 'Surfaces/AgeVerificationModal',
   component: AgeVerificationModal,
   parameters: {
     controls: { expanded: true },

package/src/components/AgeVerificationModal/AgeVerificationModal.tsx

@@ -78,6 +78,7 @@ const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
       open={visible}
       width="600px"
       widthMd="600px"
+      stacking="stacked"
       title={t('ageVerification')}
       className="age-verification-modal"
       backdropClassName="age-verification-modal-backdrop"

package/src/components/Auth/Auth.css

@@ -52,10 +52,17 @@ input.memori-auth-widget--input:focus {
 
 .memori-auth-widget--error {
     padding: var(--memori-spacing-lg) var(--memori-spacing-xl);
-    border: 1px solid currentColor;
-        border-radius: var(--memori-radius-box);
-        margin-top: var(--memori-spacing-sm);
+    border: 1px solid #ef4444;
+    border-radius: var(--memori-radius-box);
+    margin-top: var(--memori-spacing-sm);
     margin-bottom: var(--memori-spacing-lg);
-    background-color: rgba(255, 235, 238, 0.5);
-    color: var(--memori-text-color);
+    background-color: #fee2e2;
+    color: #991b1b;
+}
+
+[data-theme='dark'] .memori-auth-widget--error,
+.memori-widget[data-theme='dark'] .memori-auth-widget--error {
+    border-color: #f87171;
+    background-color: color-mix(in srgb, #ef4444 18%, var(--memori-main-background, #1f2937));
+    color: #fecaca;
 }

package/src/components/Auth/Auth.stories.tsx

@@ -6,7 +6,7 @@ import AuthWidget, { Props } from './Auth';
 import './Auth.css';
 
 const meta: Meta = {
-  title: 'Auth Widget',
+  title: 'Compositions/Auth Widget',
   component: AuthWidget,
   argTypes: {
     pwdOrTokens: {

package/src/components/Auth/Auth.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import Auth from './Auth';
 
 it('renders Auth unchanged', () => {
@@ -61,3 +61,70 @@ it('renders Auth with modal unchanged', () => {
   );
   expect(container).toMatchSnapshot();
 });
+
+it('submits the password via onFinish', async () => {
+  const onFinish = jest.fn().mockResolvedValue(undefined);
+  const { container } = render(
+    <Auth
+      pwdOrTokens="password"
+      setPwdOrTokens={() => {}}
+      showTokens={false}
+      onFinish={onFinish}
+      withModal={false}
+      openModal
+    />
+  );
+
+  const input = container.querySelector('#auth-password') as HTMLInputElement;
+  fireEvent.change(input, { target: { value: 'secret-pin' } });
+  fireEvent.click(screen.getByRole('button', { name: 'confirm' }));
+
+  await waitFor(() => {
+    expect(onFinish).toHaveBeenCalledWith(
+      expect.objectContaining({ password: 'secret-pin' })
+    );
+  });
+});
+
+it('shows a visible error when credentials are invalid', async () => {
+  const onFinish = jest.fn().mockRejectedValue(new Error('AUTH_FAILED'));
+  const { container } = render(
+    <Auth
+      pwdOrTokens="password"
+      setPwdOrTokens={() => {}}
+      showTokens={false}
+      onFinish={onFinish}
+      withModal={false}
+      openModal
+    />
+  );
+
+  const input = container.querySelector('#auth-password') as HTMLInputElement;
+  fireEvent.change(input, { target: { value: 'wrong' } });
+  fireEvent.click(screen.getByRole('button', { name: 'confirm' }));
+
+  expect(await screen.findByRole('alert')).toHaveTextContent(
+    'auth.invalidCredentials'
+  );
+});
+
+it('shows a visible error when password is missing', async () => {
+  const onFinish = jest.fn();
+  const { container } = render(
+    <Auth
+      pwdOrTokens="password"
+      setPwdOrTokens={() => {}}
+      showTokens={false}
+      onFinish={onFinish}
+      withModal={false}
+      openModal
+    />
+  );
+
+  fireEvent.click(screen.getByRole('button', { name: 'confirm' }));
+
+  expect(await screen.findByRole('alert')).toHaveTextContent(
+    'auth.passwordRequired'
+  );
+  expect(onFinish).not.toHaveBeenCalled();
+});

package/src/components/Auth/Auth.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Input, Modal, Form } from '@memori.ai/ui';
-import { useForm, SubmitHandler } from 'react-hook-form';
+import { Button, Input, Modal } from '@memori.ai/ui';
 import { Plus } from 'lucide-react';
 import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 
@@ -15,7 +14,7 @@ export interface Props {
   openModal?: boolean;
 }
 
-type AuthInputs = {
+export type AuthInputs = {
   password?: string;
   tokens?: string[];
 };
@@ -35,57 +34,52 @@ export const AuthWidget = ({
 }: Props) => {
   const surfaceEl = useWidgetSurfaceEl();
   const { t } = useTranslation();
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    setError,
-  } = useForm<AuthInputs>();
   const [numTokens, setNumTokens] = useState(1);
-
+  const [passwordValue, setPasswordValue] = useState('');
+  const [tokenValues, setTokenValues] = useState<string[]>(['']);
   const [showModal, setShowModal] = useState(!!pwdOrTokens);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [passwordError, setPasswordError] = useState<string | null>(null);
+  const [tokensError, setTokensError] = useState<string | null>(null);
 
-  const onSubmit: SubmitHandler<AuthInputs> = data => {
-    const missingPassword = pwdOrTokens === 'password' && !data.password?.length;
+  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const missingPassword = pwdOrTokens === 'password' && !passwordValue.length;
+    const filledTokens = tokenValues.slice(0, numTokens);
     const invalidTokens =
       pwdOrTokens === 'tokens' &&
-      ((data?.tokens?.length || 0) < minimumNumberOfRecoveryTokens ||
-        !data?.tokens?.every(t => t.length));
+      (filledTokens.length < minimumNumberOfRecoveryTokens ||
+        !filledTokens.every(tok => tok.length));
 
     if (missingPassword) {
-      setError('password', {
-        type: 'required',
-        message: t('auth.passwordRequired') || 'Password required',
-      });
+      setPasswordError(t('auth.passwordRequired') || 'Password required');
       return;
     }
 
     if (invalidTokens) {
-      setError('tokens', {
-        type: 'minLength',
-        message: t('auth.tokens') || 'Tokens',
-      });
+      setTokensError(
+        `${t('auth.atLeast') || 'At least'} ${minimumNumberOfRecoveryTokens}`
+      );
       return;
     }
 
     if (onFinish) {
       setIsSubmitting(true);
-      onFinish(data)
+      setPasswordError(null);
+      setTokensError(null);
+      onFinish({
+        password: passwordValue,
+        tokens: pwdOrTokens === 'tokens' ? filledTokens : undefined,
+      })
         .then(() => {
           setShowModal(false);
         })
         .catch(() => {
+          const message = t('auth.invalidCredentials') || 'Invalid credentials';
           if (pwdOrTokens === 'password') {
-            setError('password', {
-              type: 'auth',
-              message: t('auth.invalidCredentials') || 'Invalid credentials',
-            });
+            setPasswordError(message);
           } else if (pwdOrTokens === 'tokens') {
-            setError('tokens', {
-              type: 'auth',
-              message: t('auth.invalidCredentials') || 'Invalid credentials',
-            });
+            setTokensError(message);
           }
         })
         .finally(() => {
@@ -95,10 +89,11 @@ export const AuthWidget = ({
   };
 
   const form = (
-    <Form
+    <form
       name="auth"
-      onSubmit={handleSubmit(onSubmit)}
+      onSubmit={onSubmit}
       className="memori-auth-widget--form"
+      noValidate
     >
       {(pwdOrTokens === 'password' || !showTokens) && (
         <fieldset className="memori-auth-widget--password-fieldset">
@@ -106,17 +101,26 @@ export const AuthWidget = ({
             Password:{' '}
             <Input
               id="auth-password"
+              name="password"
               className="memori-auth-widget--input"
-              required
               type="password"
               placeholder="Password"
-              {...register('password', { required: true })}
+              autoComplete="current-password"
+              value={passwordValue}
+              onChange={e => {
+                setPasswordValue(e.target.value);
+                if (passwordError) setPasswordError(null);
+              }}
             />
           </label>
           {showTokens && (
             <>
               <hr />
-              <Button variant="outline" onClick={() => setPwdOrTokens('tokens')}>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setPwdOrTokens('tokens')}
+              >
                 {t('auth.useRecoveryTokens') || 'Recovery tokens'}
               </Button>
             </>
@@ -139,24 +143,35 @@ export const AuthWidget = ({
                   type="password"
                   className="memori-auth-widget--input"
                   placeholder="Recovery token"
-                  required
                   autoComplete="off"
+                  name={`tokens.${idx}`}
                   aria-label={String(
                     t('auth.tokenNumber', {
                       defaultValue: 'Recovery token {{number}}',
                       number: idx + 1,
                     })
                   )}
-                  {...register(`tokens.${idx}`, {
-                    required: true,
-                  })}
+                  value={tokenValues[idx] ?? ''}
+                  onChange={e => {
+                    const value = e.target.value;
+                    setTokenValues(prev => {
+                      const next = [...prev];
+                      next[idx] = value;
+                      return next;
+                    });
+                    if (tokensError) setTokensError(null);
+                  }}
                 />
               </label>
             );
           })}
 
           <Button
-            onClick={() => setNumTokens(t => t + 1)}
+            type="button"
+            onClick={() => {
+              setNumTokens(n => n + 1);
+              setTokenValues(prev => [...prev, '']);
+            }}
             className="memori-auth-widget--token-add"
             icon={<Plus />}
           >
@@ -164,26 +179,24 @@ export const AuthWidget = ({
           </Button>
 
           <hr />
-          <Button variant="outline" onClick={() => setPwdOrTokens('password')}>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => setPwdOrTokens('password')}
+          >
             {t('auth.usePassword') || 'Password'}
           </Button>
         </fieldset>
       )}
 
-      {errors.tokens?.type === 'minLength' && (
-        <div role="alert" className="memori-auth-widget--error">
-          {t('auth.atLeast') || 'At least'} {minimumNumberOfRecoveryTokens}
-        </div>
-      )}
-
-      {errors.password?.type === 'auth' && (
+      {passwordError && (
         <div role="alert" className="memori-auth-widget--error">
-          {errors.password.message}
+          {passwordError}
         </div>
       )}
-      {errors.tokens?.type === 'auth' && (
+      {tokensError && (
         <div role="alert" className="memori-auth-widget--error">
-          {errors.tokens.message}
+          {tokensError}
         </div>
       )}
 
@@ -195,7 +208,7 @@ export const AuthWidget = ({
       >
         {t('confirm') || 'Submit'}
       </Button>
-    </Form>
+    </form>
   );
 
   return withModal ? (
@@ -204,7 +217,9 @@ export const AuthWidget = ({
       open={openModal || showModal}
       title={t('auth.title') || 'Authentication'}
       closable={true}
-      onOpenChange={() => setPwdOrTokens(null)}
+      onOpenChange={open => {
+        if (!open) setPwdOrTokens(null);
+      }}
     >
       {form}
     </Modal>

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

@@ -3,7 +3,7 @@
 exports[`renders Auth on tokens unchanged 1`] = `
 <div>
   <form
-    class="memori-form memori-auth-widget--form"
+    class="memori-auth-widget--form"
     name="auth"
     novalidate=""
   >
@@ -30,7 +30,6 @@ exports[`renders Auth on tokens unchanged 1`] = `
           id="base-ui-:r2:"
           name="tokens.0"
           placeholder="Recovery token"
-          required=""
           type="password"
           value=""
         />
@@ -100,7 +99,7 @@ exports[`renders Auth on tokens unchanged 1`] = `
 exports[`renders Auth unchanged 1`] = `
 <div>
   <form
-    class="memori-form memori-auth-widget--form"
+    class="memori-auth-widget--form"
     name="auth"
     novalidate=""
   >
@@ -113,11 +112,11 @@ exports[`renders Auth unchanged 1`] = `
         Password:
          
         <input
+          autocomplete="current-password"
           class="memori-input memori-input--default memori-input--md memori-auth-widget--input"
           id="auth-password"
           name="password"
           placeholder="Password"
-          required=""
           type="password"
           value=""
         />
@@ -148,7 +147,7 @@ exports[`renders Auth with modal unchanged 1`] = `
 exports[`renders Auth with tokens unchanged 1`] = `
 <div>
   <form
-    class="memori-form memori-auth-widget--form"
+    class="memori-auth-widget--form"
     name="auth"
     novalidate=""
   >
@@ -161,11 +160,11 @@ exports[`renders Auth with tokens unchanged 1`] = `
         Password:
          
         <input
+          autocomplete="current-password"
           class="memori-input memori-input--default memori-input--md memori-auth-widget--input"
           id="auth-password"
           name="password"
           placeholder="Password"
-          required=""
           type="password"
           value=""
         />