@memori.ai/memori-react 7.33.3 → 7.34.0

package/src/components/ChatHistoryDrawer/ChatHistory.tsx

@@ -377,7 +377,7 @@ const ChatHistoryDrawer = ({
   loginToken,
 }: Props) => {
   const { t } = useTranslation();
-  const { getUserChatLogsByToken } = apiClient.chatLogs;
+  const { getUserChatLogsByTokenPaged } = apiClient.chatLogs;
 
   const textCurrentChat = `${t(
     'write_and_speak.conversationStartedLabel'
@@ -392,6 +392,7 @@ const ChatHistoryDrawer = ({
   const [chatLogs, setChatLogs] = useState<ChatLog[]>([]);
   const [selectedChatLog, setSelectedChatLog] = useState<ChatLog | null>(null);
   const [currentPage, setCurrentPage] = useState(1);
+  const [indexPage, setIndexPage] = useState(0);
   const [searchText, setSearchText] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -399,6 +400,8 @@ const ChatHistoryDrawer = ({
   const [dateRange, setDateRange] = useState<
     'today' | 'yesterday' | 'last_7_days' | 'last_30_days' | 'all'
   >('all');
+  const [totalItems, setTotalItems] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
 
   const formatDateForAPI = (date: Date) => {
     const year = date.getFullYear();
@@ -466,75 +469,111 @@ const ChatHistoryDrawer = ({
     }
   };
 
-  const fetchChatLogs = useCallback(async () => {
-    if (!loginToken) {
-      setError(
-        t('errorFetchingSession') ||
-          'Login token required to fetch chat history'
-      );
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-    try {
-      let dateFrom = '';
-      let dateTo = '';
-      if (dateRange !== 'all') {
-        const { dateFrom: dateFromTemp, dateTo: dateToTemp } = formatDateRangeForAPI(dateRange) ?? {};
-        dateFrom = dateFromTemp ?? '';
-        dateTo = dateToTemp ?? '';
+  const fetchChatLogs = useCallback(
+    async (
+      dateRangeValue:
+        | 'today'
+        | 'yesterday'
+        | 'last_7_days'
+        | 'last_30_days'
+        | 'all' = 'all'
+    ) => {
+      if (!loginToken) {
+        setError(
+          t('errorFetchingSession') ||
+            'Login token required to fetch chat history'
+        );
+        return;
       }
 
-      const res = await getUserChatLogsByToken(
-        loginToken,
-        memori.engineMemoriID ?? '',
-        dateFrom ?? '',
-        dateTo ?? ''
-      );
-      setChatLogs(
-        res.chatLogs.sort((a, b) => {
+      // Calculate the index based on current page
+      const calculatedIndex = ITEMS_PER_PAGE * (currentPage - 1);
+      setIndexPage(calculatedIndex);
+
+      setIsLoading(true);
+      setError(null);
+      let response;
+      try {
+        if (dateRangeValue === 'all') {
+          response = await getUserChatLogsByTokenPaged(
+            loginToken,
+            memori.engineMemoriID ?? '',
+            calculatedIndex,
+            ITEMS_PER_PAGE,
+            undefined,
+            undefined,
+            false,
+          );
+        } else {
+          const { dateFrom, dateTo } =
+            formatDateRangeForAPI(dateRangeValue) ?? {};
+          response = await getUserChatLogsByTokenPaged(
+            loginToken,
+            memori.engineMemoriID ?? '',
+            calculatedIndex,
+            ITEMS_PER_PAGE,
+            dateFrom ?? undefined,
+            dateTo ?? undefined,
+            false,
+          );
+        }
+
+        const res = response;
+
+        // Sort the chat logs by date
+        const sortedChatLogs = res.chatLogs.sort((a: ChatLog, b: ChatLog) => {
           const dateA = Math.max(
-            ...a.lines.map(l => new Date(l.timestamp).getTime())
+            ...a.lines.map((l: any) => new Date(l.timestamp).getTime())
           );
           const dateB = Math.max(
-            ...b.lines.map(l => new Date(l.timestamp).getTime())
+            ...b.lines.map((l: any) => new Date(l.timestamp).getTime())
           );
           return sortOrder === 'desc' ? dateB - dateA : dateA - dateB;
-        })
-      );
-    } catch (err) {
-      setError(t('errorFetchingSession') || 'Error loading chat history');
-      console.error('Error fetching chat logs:', err);
-    } finally {
-      setIsLoading(false);
+        });
+
+        setChatLogs(sortedChatLogs);
+        setTotalItems(res.count || sortedChatLogs.length);
+        setTotalPages(
+          Math.ceil((res.count || sortedChatLogs.length) / ITEMS_PER_PAGE)
+        );
+      } catch (err) {
+        setError(t('errorFetchingSession') || 'Error loading chat history');
+        console.error('Error fetching chat logs:', err);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [loginToken, memori.engineMemoriID, currentPage, sortOrder, apiUrl]
+  );
+
+  useEffect(() => {
+    if (open) {
+      setCurrentPage(1); // Reset to first page when opening
+      setIndexPage(0); // Reset index to 0
     }
-  }, [loginToken, memori.memoriID, sortOrder, dateRange]);
+  }, [open]);
 
+  // Reset to first page when changing sort order or date range
   useEffect(() => {
-    if (open) fetchChatLogs();
-  }, [open, fetchChatLogs]);
+    if (open) {
+      setCurrentPage(1);
+      setIndexPage(0);
+    }
+  }, [sortOrder, dateRange, open]);
+
+  // Fetch chat logs when current page or date range changes
+  useEffect(() => {
+    if (open && currentPage > 0) {
+      fetchChatLogs(dateRange);
+    }
+  }, [currentPage, dateRange, fetchChatLogs, open]);
 
   const debouncedSearch = useMemo(
     () => debounce((value: string) => setSearchText(value), DEBOUNCE_DELAY),
     []
   );
-
-  const filteredChatLogs = useMemo(() => {
-    return chatLogs.filter(
-      c =>
-        c.lines.some(l =>
-          l.text.toLowerCase().includes(searchText.toLowerCase())
-        ) && c.lines.length > 1
-    );
-  }, [chatLogs, searchText]);
-
-  const totalPages = Math.ceil(filteredChatLogs.length / ITEMS_PER_PAGE);
-
-  const paginatedChatLogs = useMemo(() => {
-    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
-    return filteredChatLogs.slice(startIndex, startIndex + ITEMS_PER_PAGE);
-  }, [filteredChatLogs, currentPage]);
+  // Remove client-side pagination since we're now using server-side pagination
+  const paginatedChatLogs = chatLogs;
 
   const handleResumeChat = async () => {
     if (selectedChatLog) {
@@ -613,7 +652,7 @@ const ChatHistoryDrawer = ({
       );
     }
 
-    if (filteredChatLogs.length === 0) {
+    if (chatLogs.length === 0) {
       return (
         <div className="memori-chat-history-drawer--no-results">
           <p>
@@ -849,7 +888,10 @@ const ChatHistoryDrawer = ({
           <div className="memori-chat-history-drawer--pagination">
             <Button
               primary
-              onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+              onClick={() => {
+                setCurrentPage(p => Math.max(1, p - 1));
+                // fetchChatLogs will be triggered by the useEffect that depends on currentPage
+              }}
               disabled={currentPage === 1}
               className="memori-chat-history-drawer--pagination--button"
             >
@@ -863,7 +905,10 @@ const ChatHistoryDrawer = ({
             </span>
             <Button
               primary
-              onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+              onClick={() => {
+                setCurrentPage(p => Math.min(totalPages, p + 1));
+                // fetchChatLogs will be triggered by the useEffect that depends on currentPage
+              }}
               disabled={currentPage === totalPages}
               className="memori-chat-history-drawer--pagination--button"
             >
@@ -992,7 +1037,10 @@ const ChatHistoryDrawer = ({
                     | 'yesterday'
                     | 'last_7_days'
                     | 'last_30_days'
+                    | 'all'
                 );
+                setCurrentPage(1);
+                // fetchChatLogs will be triggered by the useEffect that depends on dateRange
               }}
             />
           </div>

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -834,6 +834,15 @@ const MemoriWidget = ({
         msg = msg + ' ' + findMediaDocument.content;
       }
 
+      // Handle multiple documents
+      const mediaDocuments = media?.filter(
+        m => !m.mediumID && m.properties?.isAttachedFile
+      );
+      if (mediaDocuments && mediaDocuments.length > 0) {
+        const documentContents = mediaDocuments.map(doc => doc.content).join(' ');
+        msg = msg + ' ' + documentContents;
+      }
+
       // Add chat reference link to the message if it exists
       // if (chatLogID) {
       //   msg =

package/src/components/UploadButton/UploadButton.css

@@ -380,10 +380,20 @@
 /* Positioned containers */
 .memori--error-message-container,
 .memori--login-tip {
-  position: absolute;
+  position: fixed;
   z-index: 1001;
-  right: 0;
-  bottom: 50px;
+  top: 120px;
+  right: 20px;
+}
+
+/* Responsive adjustments for mobile */
+@media (max-width: 768px) {
+  .memori--error-message-container,
+  .memori--login-tip {
+    top: 100px;
+    right: 10px;
+    max-width: calc(100vw - 20px);
+  }
 }
 
 /* File Stats */
@@ -425,6 +435,25 @@
   background-color: #fa5252;
 }
 
+/* Document count indicator */
+.memori--document-count {
+  position: absolute;
+  z-index: 5;
+  top: -8px;
+  right: -8px;
+  padding: 1px 6px;
+  border-radius: 10px;
+  background-color: #51cf66;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  color: white;
+  font-size: 11px;
+  font-weight: bold;
+}
+
+.memori--document-count-full {
+  background-color: #fa5252;
+}
+
 /* Styled upload slots info */
 .memori--upload-slots-info {
   margin-left: 4px;
@@ -465,15 +494,6 @@
   transform: translateX(4px);
 }
 
-/* Error container positioning */
-.memori--error-message-container {
-  position: absolute;
-  z-index: 1001;
-  right: 0;
-  bottom: 50px;
-  min-width: 250px;
-}
-
 input.memori--upload-title-input {
   min-height: 2.5rem;
   border: 1px solid #e0e0e0;

package/src/components/UploadButton/UploadButton.tsx

@@ -9,10 +9,11 @@ import UploadDocuments from './UploadDocuments/UploadDocuments';
 import UploadImages from './UploadImages/UploadImages';
 import { useTranslation } from 'react-i18next';
 import memoriApiClient from '@memori.ai/memori-api-client';
+import { MAX_DOCUMENTS_PER_MESSAGE } from '../../helpers/constants';
 
 // Constants
 const MAX_IMAGES = 5;
-const MAX_DOCUMENTS = 1;
+const MAX_DOCUMENTS = MAX_DOCUMENTS_PER_MESSAGE;
 
 // Props interface
 interface UploadManagerProps {
@@ -107,15 +108,12 @@ const UploadButton: React.FC<UploadManagerProps> = ({
     };
   }, []);
 
-  // Handler for document files - only stores the latest document
+  // Handler for document files - now supports multiple documents
   const handleDocumentFiles = (
     files: { name: string; id: string; content: string; mimeType: string }[]
   ) => {
     if (files.length === 0) return;
 
-    // For simplicity, we only take the first file
-    const file = files[0];
-
     // Funzione helper per fare escape dell'HTML nei valori degli attributi
     const escapeAttributeValue = (text: string) => {
       return text
@@ -126,34 +124,134 @@ const UploadButton: React.FC<UploadManagerProps> = ({
         .replace(/>/g, '&gt;');
     };
 
-    const escapedFileName = escapeAttributeValue(file.name);
-    const formattedContent = `<document_attachment filename="${escapedFileName}" type="${file.mimeType}">
+    // Process each document file
+    const processedDocuments = files.map(file => {
+      const escapedFileName = escapeAttributeValue(file.name);
+      const formattedContent = `<document_attachment filename="${escapedFileName}" type="${file.mimeType}">
 
 ${file.content}
 
 </document_attachment>`;
 
-    //keep just the images in the documentPreviewFiles
-    const imageFiles = documentPreviewFiles.filter(
-      (file: any) => file.type === 'image'
-    );
-    // Replace existing file with new one
-    setDocumentPreviewFiles([
-      {
+      return {
         name: file.name,
         id: file.id,
         content: formattedContent,
-        type: 'file',
+        type: 'document',
         mimeType: file.mimeType,
-      },
+      };
+    });
+
+    // Keep existing images and add new documents
+    const imageFiles = documentPreviewFiles.filter(
+      (file: any) => file.type === 'image'
+    );
+    
+    setDocumentPreviewFiles([
+      ...processedDocuments,
       ...imageFiles,
     ]);
 
     setIsLoading(false);
   };
 
+  // Document validation and error handling
+  const validateDocumentFile = (file: File): boolean => {
+    const fileExt = `.${file.name.split('.').pop()?.toLowerCase()}`;
+    const ALLOWED_FILE_TYPES = ['.pdf', '.txt', '.json', '.xlsx', '.csv', '.md'];
+    const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+
+    if (!ALLOWED_FILE_TYPES.includes(fileExt)) {
+      addError({
+        message: `File type "${fileExt}" is not supported. Please use: ${ALLOWED_FILE_TYPES.join(', ')}`,
+        severity: 'error',
+      });
+      return false;
+    }
+
+    if (file.size > MAX_FILE_SIZE) {
+      addError({
+        message: `File "${file.name}" exceeds ${MAX_FILE_SIZE / 1024 / 1024}MB limit`,
+        severity: 'error',
+      });
+      return false;
+    }
+
+    return true;
+  };
+
+  // Validate total payload size
+  const validatePayloadSize = (newDocuments: { name: string; id: string; content: string; mimeType: string }[]): boolean => {
+    const { MAX_TOTAL_MESSAGE_PAYLOAD } = require('../../helpers/constants');
+    
+    const existingDocuments = documentPreviewFiles.filter(
+      (file: any) => file.type === 'document'
+    );
+    
+    const allDocuments = [...existingDocuments, ...newDocuments];
+    const totalPayloadSize = allDocuments.reduce((total, doc) => total + doc.content.length, 0);
+    
+    if (totalPayloadSize > MAX_TOTAL_MESSAGE_PAYLOAD) {
+      addError({
+        message: `Total document content exceeds ${MAX_TOTAL_MESSAGE_PAYLOAD} characters limit. Please remove some documents.`,
+        severity: 'error',
+      });
+      return false;
+    }
+    
+    return true;
+  };
+
+  // Handle document upload errors
+  const handleDocumentError = (error: { message: string; severity: 'error' | 'warning' | 'info' }) => {
+    addError(error);
+  };
+
+  // Image validation and error handling
+  const validateImageFile = (file: File): boolean => {
+    const fileExt = `.${file.name.split('.').pop()?.toLowerCase()}`;
+    const ALLOWED_FILE_TYPES = ['.jpg', '.jpeg', '.png'];
+    const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+
+    if (
+      !ALLOWED_FILE_TYPES.includes(fileExt) &&
+      !file.type.startsWith('image/')
+    ) {
+      addError({
+        message: `File type "${fileExt}" is not supported. Please use: ${ALLOWED_FILE_TYPES.join(', ')}`,
+        severity: 'error',
+      });
+      return false;
+    }
+
+    if (file.size > MAX_FILE_SIZE) {
+      addError({
+        message: `File "${file.name}" exceeds ${MAX_FILE_SIZE / 1024 / 1024}MB limit`,
+        severity: 'error',
+      });
+      return false;
+    }
+
+    return true;
+  };
+
+  // Handle image upload errors
+  const handleImageError = (error: { message: string; severity: 'error' | 'warning' | 'info' }) => {
+    addError(error);
+  };
+
   // When document option is clicked
   const handleDocumentClick = () => {
+    // Check if document limit has been reached
+    if (hasReachedDocumentLimit) {
+      addError({
+        message: `Maximum ${MAX_DOCUMENTS} documents allowed.`,
+        severity: 'error',
+      });
+      closeMenu();
+      return;
+    }
+
     // Find the actual button in the UploadDocuments component and click it
     const documentButtonElement = documentRef.current?.querySelector('button');
     if (documentButtonElement) {
@@ -234,6 +332,17 @@ ${file.content}
         </div>
       )}
 
+      {/* Document count indicator */}
+      {currentDocumentCount > 0 && (
+        <div
+          className={cx('memori--document-count', {
+            'memori--document-count-full': hasReachedDocumentLimit,
+          })}
+        >
+          {currentDocumentCount}/{MAX_DOCUMENTS}
+        </div>
+      )}
+
       {/* Floating menu */}
       {menuOpen && (
         <div className="memori--upload-menu" ref={menuRef}>
@@ -242,11 +351,20 @@ ${file.content}
               'memori--upload-menu-item--disabled': hasReachedDocumentLimit,
             })}
             onClick={handleDocumentClick}
+            title={
+              hasReachedDocumentLimit
+                ? t('upload.maxDocumentsReached', { max: MAX_DOCUMENTS }) ??
+                  `Maximum ${MAX_DOCUMENTS} documents already uploaded`
+                : remainingDocumentSlots === 1
+                ? t('upload.lastDocumentSlot') ?? 'Upload last document'
+                : t('upload.uploadDocument', { remaining: remainingDocumentSlots }) ??
+                  `Upload document (${remainingDocumentSlots} remaining)`
+            }
           >
             <DocumentIcon className="memori--upload-menu-icon" />
             <span>
               {t('upload.uploadDocument') ?? 'Upload document'}
-              {currentDocumentCount > 0 && (
+              {/* {currentDocumentCount > 0 && (
                 <span className="memori--upload-slots-info">
                   {hasReachedDocumentLimit
                     ? ` (${t('upload.maxReached') ?? 'Max reached'})`
@@ -254,7 +372,7 @@ ${file.content}
                         t('upload.remaining') ?? 'remaining'
                       })`}
                 </span>
-              )}
+              )} */}
             </span>
           </div>
 
@@ -279,7 +397,7 @@ ${file.content}
             <ImageIcon className="memori--upload-menu-icon-image" />
             <span>
               {t('upload.uploadImage') ?? 'Upload image'}
-              {currentImageCount > 0 && (
+              {/* {currentImageCount > 0 && (
                 <span className="memori--upload-slots-info">
                   {hasReachedImageLimit
                     ? ` (${t('upload.maxReached') ?? 'Max reached'})`
@@ -287,7 +405,7 @@ ${file.content}
                         t('upload.remaining') ?? 'remaining'
                       })`}
                 </span>
-              )}
+              )} */}
             </span>
           </div>
         </div>
@@ -299,7 +417,10 @@ ${file.content}
           setDocumentPreviewFiles={handleDocumentFiles}
           maxDocuments={MAX_DOCUMENTS}
           documentPreviewFiles={documentPreviewFiles}
-          // onLoadingChange={handleLoadingChange}
+          onLoadingChange={handleLoadingChange}
+          onDocumentError={handleDocumentError}
+          onValidateFile={validateDocumentFile}
+          onValidatePayloadSize={validatePayloadSize}
         />
       </div>
 
@@ -314,6 +435,8 @@ ${file.content}
           onLoadingChange={handleLoadingChange}
           maxImages={MAX_IMAGES}
           memoriID={memoriID}
+          onImageError={handleImageError}
+          onValidateImageFile={validateImageFile}
         />
       </div>
 
@@ -321,6 +444,7 @@ ${file.content}
       <div className="memori--error-message-container">
         {errors.map((error, index) => (
           <Alert
+            className='memori--error-message-alert'
             key={`${error.message}-${index}`}
             open={true}
             type={error.severity}