@memori.ai/memori-react 9.0.0-alpha.4 → 9.0.0-alpha.6

package/src/components/layouts/chat.css

@@ -274,15 +274,6 @@
     transition: all 0.05s ease-in-out;
 }
 
-.memori-chat-layout--main-with-artifact {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    /* padding: 1rem; */
-    gap: 1rem;
-}
-
 .memori-chat-layout--controls {
     position: relative;
     z-index: 5;
@@ -293,15 +284,28 @@
     max-height: 100%;
     flex: 1;
     flex-direction: column;
-    /* padding-bottom: 1.5rem; */
     transition: all 0.05s ease-in-out;
 }
 
-.memori-chat-layout--controls-with-artifact {
-    max-height: 100%;
-    flex: 0 0 49%;
-    /* padding-bottom: 2.5rem; */
-    margin: 0;
+/* Artifact drawer column inside the Chat layout's flex row */
+.memori-chat-layout .memori--grid-column-artifact {
+    overflow: hidden;
+    width: 0;
+    min-width: 0;
+    flex-shrink: 0;
+    transition: width 0.25s ease;
+}
+
+.memori-chat-layout .memori--grid-column-artifact--open {
+    width: 480px;
+    border-left: 1px solid var(--memori-border-color);
+    background: var(--memori-secondary-background);
+}
+
+@media (max-width: 1260px) {
+    .memori-chat-layout .memori--grid-column-artifact {
+        display: none;
+    }
 }
 
 .memori-chat-layout--artifact-panel {
@@ -638,19 +642,3 @@
     }
 }
 
-/* Adjust chat layout when drawer is open */
-.memori-chat-layout:has(.memori-chat-layout--artifact-drawer .memori-artifact-drawer[data-headlessui-state~='open'])
-    .memori-chat-layout--controls {
-    margin-right: 50%;
-    filter: blur(1px);
-    opacity: 0.8;
-    transform: scale(0.98);
-    transition: all 0.05s ease-in-out;
-}
-
-.memori-chat-layout:has(.memori-chat-layout--artifact-drawer .memori-artifact-drawer[data-headlessui-state~='open'])
-    .memori-chat-layout--main {
-    backdrop-filter: blur(5px);
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(248, 250, 252, 0.02) 100%);
-    transition: all 0.05s ease-in-out;
-}

package/src/components/layouts/fullpage.css

@@ -1,7 +1,7 @@
 /* FullPage layout – spacing, typography and structure using global design tokens */
 
 .memori-widget.memori-layout-fullpage {
-    max-width: var(--memori-layout-max-width);
+    /* max-width: var(--memori-layout-max-width); */
     /* min-height: 100vh;
     min-height: 100dvh; */
     padding: var(--memori-spacing-md);
@@ -17,22 +17,11 @@
     flex-direction: column;
     gap: 0;
 }
-/* 
-.memori-widget.memori-layout-fullpage > .memori-spin > .memori--powered-by {
-    top: auto;
-    right: auto;
-    bottom: 22%;
-    left: 8%;
-} */
-
-/* 3D avatar: pin “Powered by” to the corner so it clears the figure */
-.memori-widget.memori-layout-fullpage > .memori-spin > .memori--powered-by,
-.memori-widget.memori-layout-fullpage.memori--avatar-readyplayerme > .memori-spin > .memori--powered-by,
-.memori-widget.memori-layout-fullpage.memori--avatar-readyplayerme-full > .memori-spin > .memori--powered-by,
-.memori-widget.memori-layout-fullpage.memori--avatar-customglb > .memori-spin > .memori--powered-by,
-.memori-widget.memori-layout-fullpage.memori--avatar-customrpm > .memori-spin > .memori--powered-by {
-    bottom: 3.5rem;
-    left: 1.5rem;
+/* "Powered by" is rendered inside .memori--grid-column-left and pinned to its bottom-left corner
+   via the default absolute positioning defined in PoweredBy.css. */
+.memori-widget.memori-layout-fullpage .memori--grid-column-left > .memori--powered-by {
+    bottom: 1rem;
+    left: 1rem;
 }
 
 /* Header spacing + fullpage chrome (brand + actions bar) */
@@ -50,8 +39,8 @@
     min-width: 100%;
     flex-shrink: 0;
     /* padding: 0.625rem 0.9rem; */
-    border: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 12%, transparent);
-    border-radius: 0.9rem;
+    border-bottom: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 12%, transparent);
+    /* border-radius: 0.9rem; */
     -webkit-backdrop-filter: blur(12px);
     backdrop-filter: blur(12px);
     background: color-mix(in oklch, var(--memori-secondary-background), transparent 8%);
@@ -161,9 +150,22 @@
     flex: 0 0 auto;
 }
 
+/* Full-height flex row: [grid] [artifact column] — outside the grid so artifact
+   spans the entire content height without inheriting grid padding/max-width */
+.memori-widget.memori-layout-fullpage .memori-fullpage-content-row {
+    display: flex;
+    overflow: hidden;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: row;
+    align-items: stretch;
+}
+
 /* Grid: main + left column (avatar) */
 .memori-widget.memori-layout-fullpage .memori--grid {
     display: flex;
+    width: 100%;
+    max-width: var(--memori-layout-max-width);
     height: 100%;
     min-height: 0;
     flex: 1 1 auto;
@@ -172,6 +174,7 @@
     padding: 0 var(--memori-spacing-md) var(--memori-spacing-md);
     padding-top: var(--memori-spacing-md);
     padding-bottom: var(--memori-spacing-xl);
+    margin: 0 auto;
     gap: var(--memori-spacing-md);
 }
 
@@ -208,6 +211,36 @@
     justify-content: stretch;
 }
 
+/* Artifact column — flex sibling of .memori--grid inside .memori-fullpage-content-row.
+   Sits outside the padded grid so it spans the full content height with no padding gaps. */
+.memori-widget.memori-layout-fullpage .memori--grid-column-artifact {
+    overflow: hidden;
+    width: 0;
+    min-width: 0;
+    flex-shrink: 0;
+    transition: width 0.25s ease;
+}
+
+.memori-widget.memori-layout-fullpage .memori--grid-column-artifact--open {
+    width: 600px;
+    border-left: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 10%, transparent);
+    background: var(--memori-secondary-background);
+}
+
+/* Hide avatar column when artifact drawer is open.
+   Selector updated: artifact is now a sibling of .memori--grid, not inside it. */
+.memori-widget.memori-layout-fullpage
+    .memori-fullpage-content-row:has(.memori--grid-column-artifact--open)
+    .memori--grid-column-left {
+    display: none;
+}
+
+@media (max-width: 1260px) {
+    .memori-widget.memori-layout-fullpage .memori--grid-column-artifact {
+        display: none;
+    }
+}
+
 .memori-widget.memori-layout-fullpage .memori-chat-layout--controls {
     display: flex;
     width: 100%;

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

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Meta, Story } 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';
@@ -30,25 +32,18 @@ const Template: Story<Props> = args => (
 
 const DefaultLayout = Template.bind({});
 DefaultLayout.args = {
-  memoriName: 'Layout Storybook',
-  ownerUserName: 'andrea.patini',
-  memoriID: 'ae20fc5a-cc15-4db9-b7dd-2cd4a621b85e',
+  memoriName: 'prova-sharepoint',
+  ownerUserName: 'Andrea-Patini',
+  memoriID: '019f129c-a5a3-74d3-b0c8-b7794437bb23',
   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: 'https://aisuru-staging.aclambda.online',
   layout: 'FULLPAGE',
   uiLang: 'IT',
   spokenLang: 'IT',
-  integrationID: '0b1256c1-530c-4e67-aef8-36667c8887bb',
-  autoStart: false,
-  sessionID: '' as string | undefined,
-  showUpload: true,
-  showReasoning: false,
-  showLogin: true,
-  multilingual: true,
-  avatar3dHidden: true,
-  showMessageConsumption: true,
+  integrationID: '019f1896-730d-7e19-9a88-6413f485247b',
 };
 
 export const Default = Template.bind({});
@@ -82,6 +77,130 @@ ChatOnly.args = {
   layout: 'CHAT',
 };
 
+const CustomLayout: React.FC<LayoutProps> = ({
+  Header,
+  headerProps,
+  Avatar,
+  avatarProps,
+  Chat,
+  chatProps,
+  StartPanel,
+  startPanelProps,
+  integrationStyle,
+  integrationBackground,
+  sessionId,
+  hasUserActivatedSpeak,
+  loading = false,
+  poweredBy,
+}) => (
+  <>
+    {integrationStyle}
+    {integrationBackground}
+
+    <Spin spinning={loading} className="memori-mycustom-layout">
+      {poweredBy}
+
+      <div className="memori-mycustom-layout--controls">
+        {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
+          <Chat {...chatProps} />
+        ) : startPanelProps ? (
+          <StartPanel {...startPanelProps} />
+        ) : null}
+      </div>
+    </Spin>
+  </>
+);
+
+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 WebsiteAssistantWithout3DAvatar = Template.bind({});
+WebsiteAssistantWithout3DAvatar.args = {
+  ...WebsiteAssistant.args,
+  avatar3dHidden: true,
+};
+
 export const HiddenChat = Template.bind({});
 HiddenChat.args = {
   ...DefaultLayout.args,

package/src/components/layouts/zoomed-full-body.css

@@ -11,7 +11,7 @@
 }
 
 .memori-widget.memori-layout-zoomed_full_body {
-    max-width: var(--memori-layout-max-width);
+    /* max-width: var(--memori-layout-max-width); */
     padding: var(--memori-spacing-md);
     margin-right: auto;
     margin-left: auto;
@@ -143,6 +143,8 @@
 /* Grid: main + left column (avatar) */
 .memori-widget.memori-layout-zoomed_full_body .memori--grid {
     display: flex;
+    width: 100%;
+    max-width: var(--memori-layout-max-width);
     height: 100%;
     min-height: 0;
     flex: 1 1 auto;
@@ -151,6 +153,7 @@
     padding: 0 var(--memori-spacing-md) var(--memori-spacing-md);
     padding-top: var(--memori-spacing-md);
     padding-bottom: var(--memori-spacing-xl);
+    margin: 0 auto;
     gap: var(--memori-spacing-md);
 }
 
@@ -187,6 +190,42 @@
     justify-content: stretch;
 }
 
+/* Full-height flex row: [grid] [artifact column] */
+.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-content-row {
+    display: flex;
+    overflow: hidden;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: row;
+    align-items: stretch;
+}
+
+/* Artifact column — flex sibling of .memori--grid, outside the padded grid */
+.memori-widget.memori-layout-zoomed_full_body .memori--grid-column-artifact {
+    overflow: hidden;
+    width: 0;
+    min-width: 0;
+    flex-shrink: 0;
+    transition: width 0.25s ease;
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori--grid-column-artifact--open {
+    width: 480px;
+    border-left: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 10%, transparent);
+    background: var(--memori-secondary-background);
+}
+
+/* Hide avatar column when artifact drawer is open */
+.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-content-row:has(.memori--grid-column-artifact--open) .memori--grid-column-left {
+    display: none;
+}
+
+@media (max-width: 1260px) {
+    .memori-widget.memori-layout-zoomed_full_body .memori--grid-column-artifact {
+        display: none;
+    }
+}
+
 .memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--controls {
     display: flex;
     width: 100%;

package/src/helpers/constants.ts

@@ -36,7 +36,7 @@ export const getGroupedChatLanguages = () => {
     popularLanguageCodes.includes(lang.value)
   );
   const all = chatLanguages.filter(lang => !popularLanguageCodes.includes(lang.value));
-  return {  
+  return {
     popular,
     all,
   };
@@ -44,6 +44,15 @@ export const getGroupedChatLanguages = () => {
 
 export const uiLanguages = ['en', 'it', 'fr', 'es', 'de'];
 
+/** Extensions uploaded as original Office binaries (no text extraction) */
+export const officeNativeExtensions = [
+  '.doc',
+  '.docx',
+  '.dotx',
+  '.xltx',
+  '.potx',
+] as const;
+
 export const allowedMediaTypes = [
   'image/jpeg',
   'image/png',
@@ -51,6 +60,7 @@ export const allowedMediaTypes = [
   'image/gif',
   'application/msword',
   'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
   'application/vnd.ms-excel',
   'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
   'application/pdf',
@@ -63,6 +73,27 @@ export const allowedMediaTypes = [
   'model/gltf-binary',
 ];
 
+/** Short badge labels for Office document cards */
+export const officeMimeShortLabels: Record<string, string> = {
+  'application/msword': 'Word',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'Word',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.template': 'Word',
+  'application/vnd.ms-excel': 'Excel',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'Excel',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.template': 'Excel',
+  'application/vnd.openxmlformats-officedocument.presentationml.template': 'PPT',
+};
+
+export const officeExtensionShortLabels: Record<string, string> = {
+  DOC: 'Word',
+  DOCX: 'Word',
+  DOTX: 'Word',
+  XLS: 'Excel',
+  XLSX: 'Excel',
+  XLTX: 'Excel',
+  POTX: 'PPT',
+};
+
 export const anonTag = '👤';
 
 export const prismSyntaxLangs = [

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/message.test.ts

@@ -1,4 +1,24 @@
-import { renderMsg, stripAttachmentTags, stripAllInternalTags } from './message';
+import {
+  renderMsg,
+  sanitizeMsg,
+  stripAttachmentTags,
+  stripAllInternalTags,
+} from './message';
+
+describe('sanitizeMsg', () => {
+  it('strips onerror from partner XSS img payload', () => {
+    const payload =
+      '<img src="immagine-inesistente.jpg" onerror="alert(\'XSS Eseguito!\')">';
+    const result = sanitizeMsg(payload);
+    expect(result).toBe('<img src="immagine-inesistente.jpg">');
+    expect(result).not.toMatch(/onerror/i);
+  });
+
+  it('strips svg onload handlers', () => {
+    const result = sanitizeMsg('<svg onload="alert(1)"></svg>');
+    expect(result).not.toMatch(/onload/i);
+  });
+});
 
 describe('renderMsg', () => {
   it('should render message with reasoning and output tag adjacent correctly', () => {
@@ -11,6 +31,13 @@ describe('renderMsg', () => {
       '<details class="memori-think"><summary>Reasoning...</summary>L\'utente vuole che io elenchi i parametri dell\'ALBERO ESISTENTE.</details>\n\n<output class="rails-query" style="display:none">\nproject = Project.find("68d99b05783713e16737d32b")\n</output>\n\n<p>Recupero tutti i 7 parametri dell\'ALBERO ESISTENTE...</p>'
     );
   });
+
+  it('strips onerror from XSS img payload in rendered output', () => {
+    const payload =
+      '<img src="immagine-inesistente.jpg" onerror="alert(\'XSS Eseguito!\')">';
+    const result = renderMsg(payload, false, 'Reasoning...', false);
+    expect(result.text).not.toMatch(/onerror/i);
+  });
 });
 
 describe('stripAttachmentTags', () => {

package/src/helpers/message.ts

@@ -85,6 +85,9 @@ export const truncateMessage = (message: string) => {
   return truncatedMessage;
 };
 
+export const sanitizeMsg = (msg: string) =>
+  DOMPurify.sanitize(msg, { ADD_ATTR: ['target'] });
+
 export const renderMsg = (
   text: string,
   useMathFormatting = false,
@@ -196,9 +199,6 @@ export const renderMsg = (
     return { text: finalText };
   } catch (e) {
     console.error('Error rendering message:', e);
-    return { text };
+    return { text: sanitizeMsg(text) };
   }
 };
-
-export const sanitizeMsg = (msg: string) =>
-  DOMPurify.sanitize(msg, { ADD_ATTR: ['target'] });