@memori.ai/memori-react 7.21.1 → 7.23.0

package/src/components/Typing/Typing.tsx

@@ -1,55 +1,53 @@
 import { useEffect, useState } from 'react';
 
 const separator = ' ';
-const defaultDelay = 3;
+const defaultDelay = 15;
+const timeoutMs = 20 * 1000;
+const newWordInterval = 50;
 const defaultSentences = {
   en: [
-    {
-      delayAfter: defaultDelay,
-      text: 'Generating an accurate and fancy response...',
-    },
-    {
-      delayAfter: defaultDelay,
-      text: 'Generating a response that will blow your mind...',
-    },
-    {
-      delayAfter: defaultDelay,
-      text: 'Generating a response that will make you smile...',
-    },
-    { delayAfter: defaultDelay, text: 'Thinking of a response...' },
-    {
-      delayAfter: defaultDelay,
-      text: 'Thinking of a response that will make you smile...',
-    },
-    { delayAfter: defaultDelay, text: 'Gathering my thoughts...' },
-    {
-      delayAfter: defaultDelay,
-      text: 'Gathering my thoughts to give you a response...',
-    },
+    { delayAfter: defaultDelay, text: 'Processing in progress...' },
+    { delayAfter: defaultDelay, text: "I'm thinking..." },
+    { delayAfter: defaultDelay, text: 'Analysing the request...' },
+    { delayAfter: defaultDelay, text: 'Preparing the reply...' },
+    { delayAfter: defaultDelay, text: 'Gathering information...' },
+    { delayAfter: defaultDelay, text: 'Formulating ideas...' },
+    { delayAfter: defaultDelay, text: 'One moment please...' },
+    { delayAfter: defaultDelay, text: 'Almost ready...' },
+    { delayAfter: defaultDelay, text: 'Connecting concepts...' },
+    { delayAfter: defaultDelay, text: 'Organising ideas...' },
+    { delayAfter: defaultDelay, text: 'Evaluating options...' },
+    { delayAfter: defaultDelay, text: 'Looking for the best solution...' },
+    { delayAfter: defaultDelay, text: 'Working for you...' },
+    { delayAfter: defaultDelay, text: 'Please wait...' },
+    { delayAfter: defaultDelay, text: 'Processing data...' },
+    { delayAfter: defaultDelay, text: 'Calculating response...' },
+    { delayAfter: defaultDelay, text: 'Synthesising information...' },
+    { delayAfter: defaultDelay, text: 'Generating content...' },
+    { delayAfter: defaultDelay, text: 'Reflecting on question...' },
+    { delayAfter: defaultDelay, text: 'Refining the answer' },
   ],
   it: [
-    {
-      delayAfter: defaultDelay,
-      text: 'Sto generando una risposta accurata e fantasiosa...',
-    },
-    {
-      delayAfter: defaultDelay,
-      text: 'Sto generando una risposta che ti farà impazzire...',
-    },
-    {
-      delayAfter: defaultDelay,
-      text: 'Sto generando una risposta che ti farà sorridere...',
-    },
-    { delayAfter: defaultDelay, text: 'Sto pensando ad una risposta...' },
-    {
-      delayAfter: defaultDelay,
-      text: 'Sto pensando ad una risposta che ti farà sorridere...',
-    },
-    { delayAfter: defaultDelay, text: 'Sto raccogliendo i miei pensieri...' },
-    {
-      delayAfter: defaultDelay,
-      text: 'Sto raccogliendo i miei pensieri per darti una risposta...',
-    },
+    { delayAfter: defaultDelay, text: 'Elaborazione in corso...' },
+    { delayAfter: defaultDelay, text: 'Sto pensando...' },
+    { delayAfter: defaultDelay, text: 'Analizzando la richiesta...' },
+    { delayAfter: defaultDelay, text: 'Preparando la risposta...' },
+    { delayAfter: defaultDelay, text: 'Raccogliendo informazioni...' },
+    { delayAfter: defaultDelay, text: 'Formulando idee...' },
+    { delayAfter: defaultDelay, text: 'Un momento per favore...' },
+    { delayAfter: defaultDelay, text: 'Quasi pronto...' },
+    { delayAfter: defaultDelay, text: 'Connettendo i concetti...' },
+    { delayAfter: defaultDelay, text: 'Organizzando le idee...' },
+    { delayAfter: defaultDelay, text: 'Valutando le opzioni...' },
+    { delayAfter: defaultDelay, text: 'Cercando la soluzione migliore...' },
+    { delayAfter: defaultDelay, text: 'Sto lavorando per te...' },
+    { delayAfter: defaultDelay, text: 'Attendere prego...' },
+    { delayAfter: defaultDelay, text: 'Elaborazione dati in corso...' },
+    { delayAfter: defaultDelay, text: 'Calcolando la risposta...' },
+    { delayAfter: defaultDelay, text: 'Sintetizzando informazioni...' },
+    { delayAfter: defaultDelay, text: 'Generando contenuti...' },
+    { delayAfter: defaultDelay, text: 'Sto riflettendo sulla domanda...' },
+    { delayAfter: defaultDelay, text: 'Perfezionando la risposta...' },
   ],
 };
 
@@ -98,9 +96,12 @@ const Typing = ({
       : ''
   );
   const [shownText, setShownText] = useState('');
+  const [elapsedTime, setElapsedTime] = useState(0);
 
   useEffect(() => {
     const interval = setInterval(() => {
+      setElapsedTime(prev => prev + newWordInterval);
+
       const letter = text[shownText.length];
       if (letter !== undefined && text.length > 0) {
         setShownText(prev => prev + letter);
@@ -119,7 +120,11 @@ const Typing = ({
         );
         setShownText('');
         setIndex(nextIndex);
-      } else if (!sentences && !sentence && useDefaultSentences) {
+      } else if (
+        !sentences &&
+        !sentence &&
+        (useDefaultSentences || elapsedTime > timeoutMs)
+      ) {
         const sentence =
           defaultSentences[lang][
             Math.floor(Math.random() * defaultSentences[lang].length)
@@ -127,7 +132,7 @@ const Typing = ({
         setText(`${sentence.text}${getSeparatorString(sentence.delayAfter)}`);
         setShownText('');
       }
-    }, 50);
+    }, newWordInterval);
 
     return () => clearInterval(interval);
   });

package/src/components/UploadButton/UploadButton.tsx

@@ -13,8 +13,9 @@ type UploadError = {
 
 /**
  * FileUploadButton component allows users to upload and convert files to text
- * Supports PDF and TXT files up to 10MB
+ * Supports PDF, TXT, CSV and XLSX files up to 10MB
  * Extracts text from PDFs using PDF.js
+ * Extracts text from XLSX using xlsx library
  */
 
 const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
@@ -22,11 +23,14 @@ const MAX_TEXT_LENGTH = 100000; // 100,000 characters
 const PDF_JS_VERSION = '3.11.174'; // Last stable version with .min.js files
 const WORKER_URL = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDF_JS_VERSION}/pdf.worker.min.js`;
 const PDF_JS_URL = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDF_JS_VERSION}/pdf.min.js`;
+const XLSX_URL =
+  'https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js';
 
-// Add type definition for pdfjsLib
+// Add type definitions for external libraries
 declare global {
   interface Window {
     pdfjsLib: any;
+    XLSX: any;
   }
 }
 
@@ -105,6 +109,16 @@ const FileUploadButton = ({
       // Return extracted text
       return text;
     } catch (error) {
+      setErrors(prev => [
+        ...prev,
+        {
+          message: `PDF extraction failed: ${
+            error instanceof Error ? error.message : 'Unknown error'
+          }`,
+          severity: 'error',
+          fileId: file.name,
+        },
+      ]);
       throw new Error(
         `PDF extraction failed: ${
           error instanceof Error ? error.message : 'Unknown error'
@@ -113,6 +127,191 @@ const FileUploadButton = ({
     }
   };
 
+  /**
+   * Extracts text from XLSX using xlsx library with enhanced error handling
+   * @param file XLSX file to process
+   * @returns Promise resolving to extracted text
+   */
+  const extractTextFromXLSX = async (file: File): Promise<string> => {
+    try {
+      // First, check if the XLSX library is loaded in the window object
+      // If not, dynamically load it by creating and appending a script tag
+      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);
+        });
+      }
+
+      // Convert the File object to ArrayBuffer for XLSX parsing
+      const arrayBuffer = await file.arrayBuffer();
+
+      // Check for minimum valid Excel file size
+      if (arrayBuffer.byteLength < 4) {
+        throw new Error('File appears to be corrupted or empty');
+      }
+
+      let workbook;
+      try {
+        // Try parsing with full options first
+        workbook = window.XLSX.read(arrayBuffer, {
+          type: 'array',
+          cellFormula: false, // Disable formula parsing to avoid potential issues
+          cellNF: false, // Disable number format parsing
+          cellHTML: false, // Disable HTML parsing
+          cellText: true, // Force text output
+          cellDates: false, // Disable date parsing to avoid errors
+          error: (e: any) => {
+            console.warn('Non-fatal XLSX error:', e);
+          }, // Log non-fatal errors
+          cellStyles: false, // Disable style parsing
+        });
+      } catch (initialError) {
+        console.warn(
+          'Initial XLSX parsing failed, attempting recovery mode:',
+          initialError
+        );
+
+        // Fallback to a more permissive parsing method
+        try {
+          workbook = window.XLSX.read(arrayBuffer, {
+            type: 'array',
+            sheetRows: 1000, // Limit number of rows to parse
+            cellFormula: false,
+            cellStyles: false,
+            bookDeps: false, // Don't parse external dependencies
+            bookFiles: false, // Don't parse embedded files
+            bookProps: false, // Don't parse document properties
+            bookSheets: false, // Don't parse sheet properties
+            bookVBA: false, // Don't parse VBA
+            WTF: true, // "What the Formula" mode - ignores errors when possible
+          });
+        } catch (recoveryError) {
+          setErrors(prev => [
+            ...prev,
+            {
+              message: `File appears to be corrupted. Recovery attempt failed: ${
+                recoveryError instanceof Error
+                  ? recoveryError.message
+                  : 'Unknown error'
+              }`,
+              severity: 'error',
+              fileId: file.name,
+            },
+          ]);
+          throw new Error(
+            `File appears to be corrupted. Recovery attempt failed: ${
+              recoveryError instanceof Error
+                ? recoveryError.message
+                : 'Unknown error'
+            }`
+          );
+        }
+      }
+
+      // Verify that workbook contains at least one sheet
+      if (
+        !workbook ||
+        !workbook.SheetNames ||
+        workbook.SheetNames.length === 0
+      ) {
+        throw new Error('Excel file contains no valid worksheets');
+      }
+
+      let text = '';
+      let successfulSheets = 0;
+      const totalSheets = workbook.SheetNames.length;
+
+      // Loop through each sheet in the workbook
+      for (const sheetName of workbook.SheetNames) {
+        try {
+          const worksheet = workbook.Sheets[sheetName];
+          if (!worksheet) {
+            throw new Error(`Sheet ${sheetName} is empty or corrupted`);
+          }
+
+          // Safely get the dimensions of the sheet
+          const range = window.XLSX.utils.decode_range(
+            worksheet['!ref'] || 'A1:A1'
+          );
+
+          // Check if sheet seems abnormally large (possible corruption)
+          const rowCount = range.e.r - range.s.r + 1;
+          const colCount = range.e.c - range.s.c + 1;
+          if (rowCount > 10000 || colCount > 1000) {
+            throw new Error(
+              `Sheet ${sheetName} has suspicious dimensions (${rowCount}x${colCount}) and may be corrupted`
+            );
+          }
+
+          // Try to convert sheet to CSV
+          let csv;
+          try {
+            csv = window.XLSX.utils.sheet_to_csv(worksheet);
+          } catch (csvError) {
+            // If CSV conversion fails, try a more basic cell-by-cell approach
+            csv = '';
+            for (let r = range.s.r; r <= Math.min(range.e.r, 1000); ++r) {
+              let row = '';
+              for (let c = range.s.c; c <= Math.min(range.e.c, 100); ++c) {
+                const cell =
+                  worksheet[window.XLSX.utils.encode_cell({ r: r, c: c })];
+                row += (cell ? String(cell.v || '') : '') + ',';
+              }
+              csv += row + '\n';
+            }
+            csv += '...(truncated due to potential corruption)';
+          }
+
+          // Add sheet name and content to final text
+          text += `Sheet: ${sheetName}\n${csv}\n\n`;
+          successfulSheets++;
+        } catch (sheetError) {
+          // Log sheet-specific error but continue with other sheets
+          text += `Sheet: ${sheetName}\nError extracting content: ${
+            sheetError instanceof Error ? sheetError.message : 'Unknown error'
+          }\n\n`;
+        }
+      }
+
+      // If we couldn't extract any sheets successfully
+      if (successfulSheets === 0) {
+        throw new Error(
+          'Could not extract any valid content from the Excel file'
+        );
+      }
+
+      // If some sheets failed but others succeeded
+      if (successfulSheets < totalSheets) {
+        text =
+          `Warning: Only extracted ${successfulSheets} of ${totalSheets} sheets due to possible corruption.\n\n` +
+          text;
+      }
+
+      return text; // Return the extracted text from all sheets
+    } catch (error) {
+      setErrors(prev => [
+        ...prev,
+        {
+          message: `XLSX extraction failed: ${
+            error instanceof Error ? error.message : 'Unknown error'
+          }`,
+          severity: 'error',
+          fileId: file.name,
+        },
+      ]);
+      // If any error occurs during processing, throw with descriptive message
+      throw new Error(
+        `XLSX extraction failed: ${
+          error instanceof Error ? error.message : 'Unknown error'
+        }`
+      );
+    }
+  };
+
   /**
    * Validates uploaded file
    * Checks file type and size restrictions
@@ -121,7 +320,7 @@ const FileUploadButton = ({
    */
   const validateFile = (file: File): boolean => {
     const fileExt = `.${file.name.split('.').pop()?.toLowerCase()}`;
-    const ALLOWED_FILE_TYPES = ['.pdf', '.txt'];
+    const ALLOWED_FILE_TYPES = ['.pdf', '.txt', '.json', '.xlsx', '.csv'];
 
     if (!ALLOWED_FILE_TYPES.includes(fileExt)) {
       addError({
@@ -161,8 +360,10 @@ const FileUploadButton = ({
 
       if (fileExt === 'pdf') {
         text = await extractTextFromPDF(file);
-      } else if (fileExt === 'txt' || fileExt === 'json') {
+      } else if (fileExt === 'txt' || fileExt === 'json' || fileExt === 'csv') {
         text = await file.text();
+      } else if (fileExt === 'xlsx') {
+        text = await extractTextFromXLSX(file);
       }
 
       // Check text length limit
@@ -241,7 +442,7 @@ const FileUploadButton = ({
       <input
         ref={fileInputRef}
         type="file"
-        accept=".pdf,.txt,.json"
+        accept=".pdf,.txt,.json,.xlsx,.csv"
         className="memori--upload-file-input"
         onChange={handleFileSelect}
         multiple

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

@@ -6,7 +6,7 @@ exports[`renders UploadButton unchanged 1`] = `
     class="relative file-upload-wrapper"
   >
     <input
-      accept=".pdf,.txt,.json"
+      accept=".pdf,.txt,.json,.xlsx,.csv"
       class="memori--upload-file-input"
       multiple=""
       type="file"

package/src/components/icons/Alert.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+const Alert = ({
+  className,
+  title,
+}: {
+  className?: string;
+  title?: string;
+}) => (
+  <svg
+    width="800px"
+    height="800px"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    aria-label={title}
+    color="currentColor"
+  >
+    <path
+      d="M12 16H12.01M12 8V12M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default Alert;

package/src/components/icons/Info.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+const Info = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    width="800px"
+    height="800px"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    aria-label={title}
+  >
+    <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1.5" />
+    <path
+      d="M12 17V11"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <circle
+      cx="1"
+      cy="1"
+      r="1"
+      transform="matrix(1 0 0 -1 11 9)"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default Info;

package/src/components/icons/Warning.tsx

@@ -15,8 +15,9 @@ const Warning = ({
     viewBox="0 0 1024 1024"
     className={className}
     aria-label={title}
+    color="currentColor"
   >
-    <path d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"></path>
+    <path fill="currentColor" d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"></path>
   </svg>
 );
 

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

@@ -337,6 +337,80 @@ exports[`renders Chat layout unchanged 1`] = `
                 </option>
               </select>
             </div>
+            <div
+              class="memori--start-privacy-explanation-container"
+            >
+              <p
+                class="memori--start-privacy-explanation"
+              >
+                Le conversazioni sono visibili all'autore dell'agente
+              </p>
+              <div
+                class="memori-tooltip memori-tooltip--align-right"
+              >
+                <div
+                  class="memori-tooltip--content"
+                >
+                  <div
+                    class="memori--privacy-tooltip-content"
+                  >
+                    <p>
+                       
+                      Tutte le conversazioni con questo agente sono visibili all'autore dell'agente
+                    </p>
+                    <ul
+                      class="memori--privacy-tooltip-content-list"
+                    >
+                      <li>
+                        Per utenti anonimi: l'autore vedrà il contenuto e l'indirizzo IP
+                      </li>
+                      <li>
+                        Per utenti registrati: l'autore vedrà il contenuto e il nome utente
+                      </li>
+                    </ul>
+                    <p>
+                      L'autore utilizza queste informazioni per migliorare le funzionalità dell'agente. Continuando, accetti queste condizioni.
+                    </p>
+                    <a
+                      href="https://memori.ai/en/privacy-policy"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      Informativa sulla privacy
+                    </a>
+                  </div>
+                </div>
+                <div
+                  class="memori-tooltip--trigger"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="memori--start-privacy-explanation-icon"
+                    fill="none"
+                    focusable="false"
+                    role="img"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="1.5"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="10"
+                    />
+                    <path
+                      d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
+                    />
+                    <path
+                      d="M12 17L12.01 17"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
             <button
               class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"
             >