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

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

@@ -5,6 +5,9 @@ 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';
+import { useWidgetSurfaceEl } from '../../../context/widgetSurfaceContext';
 // Types
 type PreviewFile = {
   name: string;
@@ -78,6 +81,7 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
   onValidatePayloadSize,
 }) => {
   const { t } = useTranslation();
+  const surfaceEl = useWidgetSurfaceEl();
   const { backend } = client || {
     backend: { uploadAsset: null, uploadAssetUnlogged: null },
   };
@@ -165,64 +169,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 +276,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 +346,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 +416,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 +516,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}
@@ -468,6 +557,7 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
 
       {/* Modal */}
       <Modal
+        container={surfaceEl ?? undefined}
         width="80%"
         widthMd="80%"
         open={!!selectedFile}

package/src/components/UploadButton/UploadImages/UploadImages.tsx

@@ -8,6 +8,7 @@ import { Asset, Medium } from '@memori.ai/memori-api-client/dist/types';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@memori.ai/ui';
 import { compressImage } from '../../../helpers/imageCompression';
+import { useWidgetSurfaceEl } from '../../../context/widgetSurfaceContext';
 
 // Types
 type PreviewFile = {
@@ -54,6 +55,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
   onValidateImageFile,
 }) => {
   const { t, i18n } = useTranslation();
+  const surfaceEl = useWidgetSurfaceEl();
   // Client
   const { backend, dialog } = client || {
     backend: { uploadAsset: null, uploadAssetUnlogged: null },
@@ -483,6 +485,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
 
       {/* Upload Modal with Title Input */}
       <Modal
+        container={surfaceEl ?? undefined}
         open={showUploadModal && !!selectedFile}
         className="memori--modal-preview-file memori--upload-image-preview-modal"
         onClose={handleCancelUpload}

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/WhyThisAnswer/WhyThisAnswer.tsx

@@ -13,6 +13,7 @@ import {
 } from '@memori.ai/ui';
 import { getErrori18nKey } from '../../helpers/error';
 import { useTranslation } from 'react-i18next';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import Snippet from '../Snippet/Snippet';
 import MediaWidget from '../MediaWidget/MediaWidget';
 import { Card } from '@memori.ai/ui';
@@ -40,6 +41,7 @@ const WhyThisAnswer = ({
   client,
   _TEST_loading = false,
 }: Props) => {
+  const surfaceEl = useWidgetSurfaceEl();
   const { t } = useTranslation();
   const { add } = useAlertManager();
   const searchMemory = client?.search.searchMemory;
@@ -97,6 +99,7 @@ const WhyThisAnswer = ({
 
   return (
     <Drawer
+      container={surfaceEl ?? undefined}
       open={visible}
       anchor="right"
       className="memori-whythisanswer-drawer"

package/src/components/layouts/WebsiteAssistant/WebsiteAssistant.tsx

@@ -62,6 +62,10 @@ const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
       <div
         className={`memori-website_assistant--${
           collapsed ? 'collapsed' : 'expanded'
+        }${
+          useSideArtifactChrome
+            ? ' memori-website_assistant--artifact-open'
+            : ''
         }`}
       >
         {!collapsed && (

package/src/components/layouts/WebsiteAssistant/__snapshots__/WebsiteAssistant.test.tsx.snap

@@ -12,56 +12,60 @@ exports[`renders WEBSITE_ASSISTANT layout unchanged 1`] = `
     style="height: 100vh;"
   >
     <div
-      class="memori-website_assistant--trigger"
+      class="memori-widget__surface"
     >
-      <button
-        aria-expanded="false"
-        aria-label="expand"
-        class="memori-button memori-button--ghost memori-button--md memori-button--circle memori-website_assistant--trigger-button"
-        tabindex="0"
-        title="expand"
-        type="button"
+      <div
+        class="memori-website_assistant--trigger"
       >
-        <span
-          class="memori-button__content"
+        <button
+          aria-expanded="false"
+          aria-label="expand"
+          class="memori-button memori-button--ghost memori-button--md memori-button--circle memori-website_assistant--trigger-button"
+          tabindex="0"
+          title="expand"
+          type="button"
         >
-          <div
-            class="memori-blob"
+          <span
+            class="memori-button__content"
           >
-            <figure>
-              <img
-                alt=""
-                role="presentation"
-                src="https://aisuru.com/images/aisuru/square_logo.png"
-              />
-            </figure>
-            <div
-              class="mainDiv"
-            />
-            <div
-              class="mainDiv"
-            />
             <div
-              class="mainDiv"
-            />
-            <div
-              class="mainDiv"
-            />
-            <div
-              class="mainDiv"
-            />
-          </div>
-        </span>
-      </button>
+              class="memori-blob"
+            >
+              <figure>
+                <img
+                  alt=""
+                  role="presentation"
+                  src="https://aisuru.com/images/aisuru/square_logo.png"
+                />
+              </figure>
+              <div
+                class="mainDiv"
+              />
+              <div
+                class="mainDiv"
+              />
+              <div
+                class="mainDiv"
+              />
+              <div
+                class="mainDiv"
+              />
+              <div
+                class="mainDiv"
+              />
+            </div>
+          </span>
+        </button>
+      </div>
+      <div
+        class="memori-website_assistant--collapsed"
+      />
+      <audio
+        id="memori-audio"
+        src="https://aisuru.com/intro.mp3"
+        style="display: none;"
+      />
     </div>
-    <div
-      class="memori-website_assistant--collapsed"
-    />
-    <audio
-      id="memori-audio"
-      src="https://aisuru.com/intro.mp3"
-      style="display: none;"
-    />
   </div>
   <div
     aria-atomic="false"

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

@@ -195,6 +195,15 @@
     pointer-events: all;
 }
 
+/*
+ * Keep in sync with ArtifactDrawer split width (46% / --memori-modal-size-md override).
+ * Same pairing as HiddenChat's `.memori-sidebar-toggle-artifact` → `right: 46%`.
+ */
+.memori-widget.memori-layout-website_assistant
+    .memori-website_assistant--expanded.memori-website_assistant--artifact-open {
+    right: 46%;
+}
+
 /* Tablet */
 @media (min-width: 601px) {
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
@@ -205,6 +214,11 @@
         border-radius: var(--memori-radius-box) 0 0 0;
     }
 
+    .memori-widget.memori-layout-website_assistant
+        .memori-website_assistant--expanded.memori-website_assistant--artifact-open {
+        right: 46%;
+    }
+
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
         height: min(75vh, calc(100vh - var(--memori-spacing-5xl)));
     }
@@ -218,6 +232,11 @@
         border-radius: var(--memori-radius-box) 0 0 0;
     }
 
+    .memori-widget.memori-layout-website_assistant
+        .memori-website_assistant--expanded.memori-website_assistant--artifact-open {
+        right: 46%;
+    }
+
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
         height: 100vh;
         border-radius: 0;
@@ -418,7 +437,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);
 }