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

package/src/components/UploadButton/UploadDocuments/UploadDocuments.tsx

@@ -5,6 +5,8 @@ import { FileText as DocumentIcon } from 'lucide-react';
 import { Modal } from '@memori.ai/ui';
 import { useTranslation } from 'react-i18next';
 import memoriApiClient from '@memori.ai/memori-api-client';
+import { officeNativeExtensions } from '../../../helpers/constants';
+import { isOfficeNativeFilename } from '../../../helpers/utils';
 // Types
 type PreviewFile = {
   name: string;
@@ -165,64 +167,101 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
     }
   };
 
-  const extractTextFromXLSX = async (file: File): Promise<string> => {
-    try {
-      if (!window.XLSX) {
-        await new Promise((resolve, reject) => {
-          const script = document.createElement('script');
-          script.src = XLSX_URL;
-          script.onload = resolve;
-          script.onerror = reject;
-          document.head.appendChild(script);
-        });
-      }
+  const loadXLSXLibrary = async (): Promise<void> => {
+    if (window.XLSX) return;
 
-      const arrayBuffer = await file.arrayBuffer();
-      const workbook = window.XLSX.read(arrayBuffer, {
-        type: 'array',
-        cellFormula: true,
-        cellNF: true,
-        cellText: true,
-        cellDates: true,
+    await new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = XLSX_URL;
+      script.onload = resolve;
+      script.onerror = reject;
+      document.head.appendChild(script);
+    });
+  };
+
+  const readXLSXWorkbook = async (file: File) => {
+    await loadXLSXLibrary();
+
+    const arrayBuffer = await file.arrayBuffer();
+    return window.XLSX.read(arrayBuffer, {
+      type: 'array',
+      cellFormula: true,
+      cellNF: true,
+      cellText: true,
+      cellDates: true,
+    });
+  };
+
+  const formatXLSXWorkbookForDisplay = (workbook: {
+    SheetNames: string[];
+    Sheets: Record<string, unknown>;
+  }): string => {
+    let text = '';
+
+    for (const sheetName of workbook.SheetNames) {
+      const worksheet = workbook.Sheets[sheetName];
+      const data = window.XLSX.utils.sheet_to_json(worksheet, {
+        header: 1,
+        raw: false,
       });
 
-      let text = '';
-      for (const sheetName of workbook.SheetNames) {
-        const worksheet = workbook.Sheets[sheetName];
-        const data = window.XLSX.utils.sheet_to_json(worksheet, {
-          header: 1,
-          raw: false,
+      const colWidths = data.reduce((widths: number[], row: any[]) => {
+        row.forEach((cell, i) => {
+          const cellWidth = (cell || '').toString().length;
+          widths[i] = Math.max(widths[i] || 0, cellWidth);
         });
+        return widths;
+      }, []);
+
+      const formattedText = data.map((row: any[]) => {
+        return row
+          .map((cell, i) => {
+            const cellStr = (cell || '').toString();
+            return cellStr.padEnd(colWidths[i] + 2);
+          })
+          .join('|')
+          .trim();
+      });
 
-        const colWidths = data.reduce((widths: number[], row: any[]) => {
-          row.forEach((cell, i) => {
-            const cellWidth = (cell || '').toString().length;
-            widths[i] = Math.max(widths[i] || 0, cellWidth);
-          });
-          return widths;
-        }, []);
-
-        const formattedText = data.map((row: any[]) => {
-          return row
-            .map((cell, i) => {
-              const cellStr = (cell || '').toString();
-              return cellStr.padEnd(colWidths[i] + 2);
-            })
-            .join('|')
-            .trim();
-        });
+      if (formattedText.length > 0) {
+        const separator = colWidths
+          .map((w: number) => '-'.repeat(w + 2))
+          .join('+');
+        formattedText.splice(1, 0, separator);
+      }
 
-        if (formattedText.length > 0) {
-          const separator = colWidths
-            .map((w: number) => '-'.repeat(w + 2))
-            .join('+');
-          formattedText.splice(1, 0, separator);
-        }
+      text += `Sheet: ${sheetName}\n${formattedText.join('\n')}\n\n`;
+    }
+
+    return text;
+  };
 
-        text += `Sheet: ${sheetName}\n${formattedText.join('\n')}\n\n`;
+  const formatXLSXWorkbookAsCsv = (workbook: {
+    SheetNames: string[];
+    Sheets: Record<string, unknown>;
+  }): string => {
+    let text = '';
+
+    for (const sheetName of workbook.SheetNames) {
+      const worksheet = workbook.Sheets[sheetName];
+      const csv = window.XLSX.utils.sheet_to_csv(worksheet, { raw: false });
+      if (csv.trim()) {
+        text += `Sheet: ${sheetName}\n${csv}\n\n`;
       }
+    }
 
-      return text;
+    return text;
+  };
+
+  const extractTextFromXLSX = async (
+    file: File
+  ): Promise<{ display: string; asset: string }> => {
+    try {
+      const workbook = await readXLSXWorkbook(file);
+      return {
+        display: formatXLSXWorkbookForDisplay(workbook),
+        asset: formatXLSXWorkbookAsCsv(workbook),
+      };
     } catch (error) {
       console.error('XLSX extraction failed:', error);
       throw new Error(
@@ -235,21 +274,31 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
 
   const processDocumentFile = async (
     file: File
-  ): Promise<{ text: string | null }> => {
-    const fileExt = file.name.split('.').pop()?.toLowerCase() || '';
+  ): Promise<{
+    text: string | null;
+    textForAsset?: string;
+    uploadAsOriginal?: boolean;
+  }> => {
+    if (isOfficeNativeFilename(file.name)) {
+      return { text: null, uploadAsOriginal: true };
+    }
 
+    const ext = file.name.split('.').pop()?.toLowerCase() || '';
     try {
       let text: string | null = null;
+      let textForAsset: string | undefined;
 
-      if (fileExt === 'pdf') {
+      if (ext === 'pdf') {
         text = await extractTextFromPDF(file);
-      } else if (['txt', 'md', 'json', 'csv', 'html'].includes(fileExt)) {
+      } else if (['txt', 'md', 'json', 'csv', 'html'].includes(ext)) {
         text = await file.text();
-      } else if (fileExt === 'xlsx') {
-        text = await extractTextFromXLSX(file);
+      } else if (ext === 'xlsx') {
+        const extracted = await extractTextFromXLSX(file);
+        text = extracted.display;
+        textForAsset = extracted.asset;
       }
 
-      return { text };
+      return { text, textForAsset };
     } catch (error) {
       console.error('Document processing failed:', error);
       throw new Error(
@@ -295,7 +344,12 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
       throw new Error(response.resultMessage || 'Upload failed');
     }
 
-    return response.asset?.assetURL;
+    const assetURL = response.asset?.assetURL;
+    if (!assetURL) {
+      throw new Error('Upload failed: missing asset URL');
+    }
+
+    return assetURL;
   };
 
   const handleDocumentUpload = async (
@@ -360,11 +414,42 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
         const fileId = Math.random().toString(36).substr(2, 9);
 
         try {
-          const { text } = await processDocumentFile(file);
+          const { text, textForAsset, uploadAsOriginal } =
+            await processDocumentFile(file);
+
+          if (uploadAsOriginal) {
+            // Office native format: upload the original file as asset, no text extraction
+            let assetUrl: string | undefined;
+            try {
+              assetUrl = await uploadAssetFile(file);
+            } catch (uploadError) {
+              console.error('Office asset upload failed:', uploadError);
+              onDocumentError?.({
+                message: t('upload.officeAssetUploadFailed', {
+                  fileName: file.name,
+                  defaultValue: `"${file.name}" could not be uploaded and was not added.`,
+                }),
+                severity: 'error',
+              });
+            }
+
+            if (!assetUrl) {
+              activeCount--;
+              onLoadingChange?.(true, activeCount);
+              continue;
+            }
 
-          if (text) {
+            processedFiles.push({
+              name: file.name,
+              id: fileId,
+              content: '',
+              mimeType: file.type,
+              textAssetUrl: assetUrl,
+            });
+          } else if (text) {
             const baseName = file.name.replace(/\.[^/.]+$/, '') || file.name;
-            const textFile = new File([text], `${baseName}.txt`, {
+            const assetText = textForAsset ?? text;
+            const textFile = new File([assetText], `${baseName}.txt`, {
               type: 'text/plain',
             });
 
@@ -429,7 +514,9 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
       <input
         ref={documentInputRef}
         type="file"
-        accept=".pdf,.txt,.md,.json,.xlsx,.csv,.html"
+        accept={`.pdf,.txt,.md,.json,.xlsx,.csv,.html,${officeNativeExtensions.join(
+          ','
+        )}`}
         multiple
         className="memori--upload-file-input"
         onChange={handleDocumentUpload}

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

@@ -6,7 +6,7 @@ exports[`renders UploadButton unchanged 1`] = `
     class="memori--unified-upload-wrapper"
   >
     <input
-      accept=".jpg,.jpeg,.png,.pdf,.txt,.json,.xlsx,.csv,.md,.html"
+      accept=".jpg,.jpeg,.png,.pdf,.txt,.json,.xlsx,.csv,.md,.html,.doc,.docx,.dotx,.xltx,.potx"
       class="memori--upload-file-input"
       multiple=""
       style="display: none;"
@@ -60,7 +60,7 @@ exports[`renders UploadButton unchanged 1`] = `
         class="memori--document-upload-wrapper"
       >
         <input
-          accept=".pdf,.txt,.md,.json,.xlsx,.csv,.html"
+          accept=".pdf,.txt,.md,.json,.xlsx,.csv,.html,.doc,.docx,.dotx,.xltx,.potx"
           class="memori--upload-file-input"
           multiple=""
           type="file"

package/src/components/layouts/WebsiteAssistant/website-assistant.css

@@ -418,7 +418,8 @@
     transform: none !important;
 }
 
-.memori-layout-website_assistant.memori--avatar-readyplayerme-full .memori--avatar-wrapper > div {
+.memori-layout-website_assistant.memori--avatar-readyplayerme-full .memori--avatar-wrapper > div,
+.memori-layout-website_assistant.memori--avatar-avatar-configurator .memori--avatar-wrapper > div {
     transform: scale(1.7) translate(0px, 10vh);
 }
 

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/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'] });