@memori.ai/memori-react 9.0.0-alpha.4 → 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/Chat.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Button, Spin } from '@memori.ai/ui';
+import ArtifactDrawer from '../MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer';
 import { useTranslation } from 'react-i18next';
 import {
   Expand,
@@ -229,31 +230,16 @@ const ChatLayout: React.FC<LayoutProps> = ({
 
         <div id="extension" />
 
-        <div
-          className={`memori-chat-layout--main ${
-            useSideArtifactChrome
-              ? 'memori-chat-layout--main-with-artifact'
-              : ''
-          }`}
-        >
+        <div className="memori-chat-layout--main">
+          {/* Chat column — flex:1, shrinks when artifact column grows */}
           <div
             className={
               state.isFullscreen
                 ? `memori-chat-layout-controls-hide`
-                : `memori-chat-layout--controls ${
-                    useSideArtifactChrome
-                      ? 'memori-chat-layout--controls-with-artifact'
-                      : ''
-                  }`
+                : `memori-chat-layout--controls`
             }
           >
-            <div
-              className={`memori-chat-layout--header ${
-                useSideArtifactChrome
-                  ? 'memori-chat-layout--header-with-artifact'
-                  : ''
-              }`}
-            >
+            <div className="memori-chat-layout--header">
               {Header && headerProps && mobileHeaderProps && (
                 <div className="memori-fullpage-header-row">
                     <Header
@@ -424,6 +410,17 @@ const ChatLayout: React.FC<LayoutProps> = ({
               ) : null}
             </div>
           </div>
+
+          {/* Artifact column — width 0→480px with CSS transition */}
+          <div
+            className={`memori--grid-column-artifact${
+              useSideArtifactChrome ? ' memori--grid-column-artifact--open' : ''
+            }`}
+          >
+            {useSideArtifactChrome && (
+              <ArtifactDrawer isLayoutColumn />
+            )}
+          </div>
         </div>
       </Spin>
     </>

package/src/components/layouts/FullPage.tsx

@@ -216,7 +216,7 @@ const FullPageLayout: React.FC<LayoutProps> = ({
       {integrationBackground}
 
       <Spin spinning={loading}>
-        {poweredBy}
+        {useSideArtifactChrome && poweredBy}
 
         {Header && headerProps && mobileHeaderProps && (
           <div className="memori-fullpage-top-header">
@@ -331,40 +331,47 @@ const FullPageLayout: React.FC<LayoutProps> = ({
           />
         )}
 
-        <div className="memori--grid">
-          {!useSideArtifactChrome && (
+        {/* Content row: grid (avatar+chat) + artifact column as full-height siblings */}
+        <div className="memori-fullpage-content-row">
+          <div className="memori--grid">
+            {/* Avatar column — hidden via CSS when artifact is open */}
             <div className="memori--grid-column memori--grid-column-left">
               {Avatar && avatarProps && (
                 <Avatar chatProps={chatProps} {...avatarProps} />
               )}
 
               <div id="extension" />
+
+              {poweredBy}
+            </div>
+
+            {/* Chat column — flex:1, shrinks naturally when artifact column grows */}
+            <div className="memori-chat-layout--main">
+              <div
+                className={
+                  state.isFullscreen
+                    ? `memori-chat-layout-controls-hide`
+                    : `memori-chat-layout--controls`
+                }
+              >
+                {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
+                  <Chat {...chatProps} />
+                ) : startPanelProps ? (
+                  <StartPanel {...startPanelProps} />
+                ) : null}
+              </div>
             </div>
-          )}
+          </div>
+
+          {/* Artifact column — outside the padded grid, spans full content height */}
           <div
-            className={`memori-chat-layout--main ${
-              hasArtifact && !state.isChatLogPanelPresentation
-                ? 'memori-chat-layout--main-with-artifact'
-                : ''
+            className={`memori--grid-column-artifact${
+              useSideArtifactChrome ? ' memori--grid-column-artifact--open' : ''
             }`}
           >
-            <div
-              className={
-                state.isFullscreen
-                  ? `memori-chat-layout-controls-hide`
-                  : `memori-chat-layout--controls ${
-                      useSideArtifactChrome
-                        ? 'memori-chat-layout--controls-with-artifact'
-                        : ''
-                    }`
-              }
-            >
-              {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
-                <Chat {...chatProps} />
-              ) : startPanelProps ? (
-                <StartPanel {...startPanelProps} />
-              ) : null}
-            </div>
+            {useSideArtifactChrome && (
+              <ArtifactDrawer isLayoutColumn />
+            )}
           </div>
         </div>
       </Spin>

package/src/components/layouts/HiddenChat.tsx

@@ -23,6 +23,7 @@ import {
   X,
 } from 'lucide-react';
 import { getResourceUrl } from '../../helpers/media';
+import ArtifactDrawer from '../MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer';
 import ChatInputs from '../ChatInputs/ChatInputs';
 import ShareButton from '../ShareButton/ShareButton';
 import MobileSessionPanel from '../MobileSessionPanel/MobileSessionPanel';
@@ -752,6 +753,9 @@ const HiddenChatLayout: React.FC<LayoutProps> = ({
           </div>
         </aside>
       </div>
+
+      {/* Artifact drawer — fixed overlay that pairs with the sidebar shift (right: 46%) */}
+      {useSideArtifactChrome && <ArtifactDrawer />}
     </>
   );
 };

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

@@ -4,6 +4,8 @@ import { LayoutProps } from '../../MemoriWidget/MemoriWidget';
 import Blob from '../../Blob/Blob';
 import { X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { useArtifact } from '../../MemoriArtifactSystem/context/ArtifactContext';
+import ArtifactDrawer from '../../MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer';
 
 const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
   Header,
@@ -22,6 +24,9 @@ const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
   avatar3dHidden,
 }) => {
   const { t } = useTranslation();
+  const { state: artifactState } = useArtifact();
+  const useSideArtifactChrome =
+    artifactState.isDrawerOpen && !artifactState.isChatLogPanelPresentation;
   const [collapsed, _setCollapsed] = useState(true);
   const [expandedKey, setExpandedKey] = useState<string>();
 
@@ -131,6 +136,9 @@ const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
           </>
         )}
       </div>
+
+      {/* Artifact drawer — fixed overlay beside the website assistant panel */}
+      {useSideArtifactChrome && <ArtifactDrawer />}
     </>
   );
 };

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

@@ -214,9 +214,7 @@
 @media (min-width: 1024px) {
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
-        width: 30vw;
-        min-width: 400px;
-        max-width: 480px;
+        width: 480px;
         border-radius: var(--memori-radius-box) 0 0 0;
     }
 
@@ -420,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/ZoomedFullBody.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Button, Spin } from '@memori.ai/ui';
 import { useTranslation } from 'react-i18next';
+import ArtifactDrawer from '../MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer';
 import {
   Expand,
   MapPin,
@@ -329,8 +330,10 @@ const ZoomedFullBodyLayout: React.FC<LayoutProps> = ({
             }}
           />
         )}
-        <div className="memori--grid">
-          {!useSideArtifactChrome && (
+        {/* Content row: grid (avatar+chat) + artifact column as full-height siblings */}
+        <div className="memori-fullpage-content-row">
+          <div className="memori--grid">
+            {/* Avatar column — hidden via CSS when artifact is open */}
             <div className="memori--grid-column memori--grid-column-left">
               {Avatar && avatarProps && (
                 <Avatar chatProps={chatProps} isZoomed {...avatarProps} />
@@ -338,31 +341,34 @@ const ZoomedFullBodyLayout: React.FC<LayoutProps> = ({
 
               <div id="extension" />
             </div>
-          )}
+
+            {/* Chat column — flex:1, shrinks naturally when artifact column grows */}
+            <div className="memori-chat-layout--main">
+              <div
+                className={
+                  state.isFullscreen
+                    ? `memori-chat-layout-controls-hide`
+                    : `memori-chat-layout--controls`
+                }
+              >
+                {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
+                  <Chat {...chatProps} />
+                ) : startPanelProps ? (
+                  <StartPanel {...startPanelProps} />
+                ) : null}
+              </div>
+            </div>
+          </div>
+
+          {/* Artifact column — outside the padded grid, spans full content height */}
           <div
-            className={`memori-chat-layout--main ${
-              hasArtifact && !state.isChatLogPanelPresentation
-                ? 'memori-chat-layout--main-with-artifact'
-                : ''
+            className={`memori--grid-column-artifact${
+              useSideArtifactChrome ? ' memori--grid-column-artifact--open' : ''
             }`}
           >
-            <div
-              className={
-                state.isFullscreen
-                  ? `memori-chat-layout-controls-hide`
-                  : `memori-chat-layout--controls ${
-                      useSideArtifactChrome
-                        ? 'memori-chat-layout--controls-with-artifact'
-                        : ''
-                    }`
-              }
-            >
-              {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
-                <Chat {...chatProps} />
-              ) : startPanelProps ? (
-                <StartPanel {...startPanelProps} />
-              ) : null}
-            </div>
+            {useSideArtifactChrome && (
+              <ArtifactDrawer isLayoutColumn />
+            )}
           </div>
         </div>
       </Spin>

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

@@ -207,13 +207,13 @@ exports[`renders Chat layout unchanged 1`] = `
         id="extension"
       />
       <div
-        class="memori-chat-layout--main "
+        class="memori-chat-layout--main"
       >
         <div
-          class="memori-chat-layout--controls "
+          class="memori-chat-layout--controls"
         >
           <div
-            class="memori-chat-layout--header "
+            class="memori-chat-layout--header"
           >
             <div
               class="memori-fullpage-header-row"
@@ -734,6 +734,9 @@ exports[`renders Chat layout unchanged 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="memori--grid-column-artifact"
+        />
       </div>
     </div>
     <audio