@memori.ai/memori-react 8.38.5 → 9.0.0-alpha.0

package/src/components/UploadButton/UploadButton.tsx

@@ -1,15 +1,18 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { DocumentIcon } from '../icons/Document';
-import { ImageIcon } from '../icons/Image';
-import { UploadIcon } from '../icons/Upload';
-import Spin from '../ui/Spin';
-import Alert from '../ui/Alert';
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useMemo,
+} from 'react';
+import { Upload as UploadIcon } from 'lucide-react';
+import { Spin, Tooltip, useAlertManager } from '@memori.ai/ui';
 import cx from 'classnames';
 import UploadDocuments from './UploadDocuments/UploadDocuments';
 import UploadImages from './UploadImages/UploadImages';
 import { useTranslation } from 'react-i18next';
 import memoriApiClient from '@memori.ai/memori-api-client';
-import Tooltip from '../ui/Tooltip';
+
 // Props interface
 interface UploadManagerProps {
   authToken?: string;
@@ -33,6 +36,8 @@ interface UploadManagerProps {
   maxDocumentContentLength?: number;
   /** Called when the upload loading state changes. */
   onUploadLoadingChange?: (loading: boolean, fileCount?: number) => void;
+  /** When true, the control does not open the file picker and ignores paste/drop for uploads. */
+  disabled?: boolean;
 }
 
 const UploadButton: React.FC<UploadManagerProps> = ({
@@ -47,6 +52,7 @@ const UploadButton: React.FC<UploadManagerProps> = ({
   maxDocumentsPerMessage = 10,
   maxDocumentContentLength = 300000,
   onUploadLoadingChange,
+  disabled = false,
 }) => {
   // Per-document character limit for the inlined `<document_attachment>`
   // content. Does NOT affect the full text uploaded as an asset.
@@ -59,11 +65,9 @@ const UploadButton: React.FC<UploadManagerProps> = ({
   const [docUploadingCount, setDocUploadingCount] = useState(0);
   const [imgUploadingCount, setImgUploadingCount] = useState(0);
   const uploadingFileCount = docUploadingCount + imgUploadingCount;
-  const [errors, setErrors] = useState<
-    { message: string; severity: 'error' | 'warning' | 'info' }[]
-  >([]);
   const [isDragging, setIsDragging] = useState(false);
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
+  const alertManager = useAlertManager();
 
   // Refs
   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -77,18 +81,22 @@ const UploadButton: React.FC<UploadManagerProps> = ({
   const remainingSlots = maxDocumentsPerMessage - currentMediaCount;
   const hasReachedMediaLimit = remainingSlots <= 0;
 
-  // Error handling
-  const removeError = (errorMessage: string) => {
-    setErrors(prev => prev.filter(e => e.message !== errorMessage));
-  };
-
-  const addError = (error: {
-    message: string;
-    severity: 'error' | 'warning' | 'info';
-  }) => {
-    setErrors(prev => [...prev, error]);
-    setTimeout(() => removeError(error.message), 5000);
-  };
+  // Error handling - show alerts via toast manager
+  const addError = useCallback(
+    (error: { message: string; severity: 'error' | 'warning' | 'info' }) => {
+      alertManager.add({
+        id: `upload-notification-${Date.now()}`,
+        title: 'Upload notification',
+        description: error.message,
+        data: {
+          severity: error.severity,
+          closable: true,
+          style: { zIndex: 10002, top: 30, right: 30, position: 'fixed' },
+        },
+      });
+    },
+    [alertManager]
+  );
 
   // Check if file is an image
   const isImageFile = (file: File): boolean => {
@@ -246,6 +254,7 @@ const UploadButton: React.FC<UploadManagerProps> = ({
 
   // Handle button click - open file chooser directly
   const handleButtonClick = () => {
+    if (disabled) return;
     if (unifiedInputRef.current) {
       unifiedInputRef.current.click();
     }
@@ -266,6 +275,7 @@ const UploadButton: React.FC<UploadManagerProps> = ({
   // Paste handler for files
   useEffect(() => {
     const handlePaste = (e: ClipboardEvent) => {
+      if (disabled) return;
       const clipboardData = e.clipboardData;
       if (!clipboardData) {
         return;
@@ -320,7 +330,7 @@ const UploadButton: React.FC<UploadManagerProps> = ({
     return () => {
       document.removeEventListener('paste', handlePaste);
     };
-  }, [handleUnifiedFileSelection]);
+  }, [handleUnifiedFileSelection, disabled]);
 
   // Drag and drop handlers
   useEffect(() => {
@@ -329,6 +339,7 @@ const UploadButton: React.FC<UploadManagerProps> = ({
     const handleDragEnter = (e: DragEvent) => {
       e.preventDefault();
       e.stopPropagation();
+      if (disabled) return;
       dragCounter++;
       if (dragCounter === 1) {
         setIsDragging(true);
@@ -355,6 +366,8 @@ const UploadButton: React.FC<UploadManagerProps> = ({
       dragCounter = 0;
       setIsDragging(false);
 
+      if (disabled) return;
+
       const files = e.dataTransfer?.files;
       if (files && files.length > 0) {
         handleUnifiedFileSelection(files);
@@ -373,7 +386,7 @@ const UploadButton: React.FC<UploadManagerProps> = ({
       document.removeEventListener('dragover', handleDragOver);
       document.removeEventListener('drop', handleDrop);
     };
-  }, [handleUnifiedFileSelection]);
+  }, [handleUnifiedFileSelection, disabled]);
 
   // Handler for document files - now supports multiple documents
   const handleDocumentFiles = (
@@ -400,16 +413,12 @@ const UploadButton: React.FC<UploadManagerProps> = ({
     // Process each document file
     const processedDocuments = files.map(file => {
       const escapedFileName = escapeAttributeValue(file.name);
-
-      // Truncate only the content that gets inlined inside the message
-      // <document_attachment> tag. The full text is still available via
-      // textAssetUrl as an uploaded asset.
+      // Truncate the inlined content to the per-document character limit.
+      // The full text remains available via the uploaded asset link.
       const inlinedContent =
         file.content.length > effectivePerDocumentLimit
-          ? file.content.substring(0, effectivePerDocumentLimit) +
-            '\n\n[Content truncated due to size limits]'
+          ? file.content.slice(0, effectivePerDocumentLimit)
           : file.content;
-
       const formattedContent = `<document_attachment filename="${escapedFileName}" type="${
         file.mimeType
       }">
@@ -551,10 +560,46 @@ ${file.textAssetUrl || ''}
     onUploadLoadingChange?.(isLoading, isLoading ? uploadingFileCount : 0);
   }, [isLoading, uploadingFileCount, onUploadLoadingChange]);
 
+  const uploadTooltipTitle = useMemo(() => {
+    if (hasReachedMediaLimit) {
+      return t('upload.maxReached') ?? 'Max limit reached';
+    }
+
+    return t('upload.uploadFilesOrImages') ?? 'Upload files or images';
+  }, [hasReachedMediaLimit, t]);
+
+  const isUploadDisabled = disabled || isLoading || hasReachedMediaLimit;
+
+  const uploadButton = (
+    <button
+      ref={buttonRef}
+      type="button"
+      className={cx(
+        'memori-button',
+        'memori-button--circle',
+        'memori-button--icon-only',
+        'memori-share-button--button',
+        'memori--conversation-button',
+        'memori--unified-upload-button'
+      )}
+      onClick={handleButtonClick}
+      disabled={isUploadDisabled}
+      tabIndex={isUploadDisabled ? -1 : undefined}
+      aria-label={uploadTooltipTitle}
+    >
+      {isLoading ? (
+        <Spin spinning className="memori--upload-icon" />
+      ) : (
+        <UploadIcon className="memori--upload-icon" />
+      )}
+    </button>
+  );
+
   return (
     <div
       className={cx('memori--unified-upload-wrapper', {
-        'memori--dragging': isDragging,
+        'memori--dragging': isDragging && !disabled,
+        'memori--upload-disabled': disabled,
       })}
       ref={wrapperRef}
     >
@@ -569,36 +614,27 @@ ${file.textAssetUrl || ''}
         style={{ display: 'none' }}
       />
 
-      {/* Main upload button */}
-      <button
-        ref={buttonRef}
-        className={cx(
-          'memori-button',
-          'memori-button--circle',
-          'memori-button--icon-only',
-          'memori-share-button--button',
-          'memori--conversation-button',
-          'memori--unified-upload-button',
-          { 'memori--error': errors.length > 0 }
-        )}
-        onClick={handleButtonClick}
-        disabled={isLoading || hasReachedMediaLimit}
-        title={
-          t('upload.uploadFiles', {
-            shortcut:
-              /Mac|iPhone|iPod|iPad/i.test(navigator.platform) ||
-              navigator.userAgent.includes('Mac')
-                ? 'Cmd'
-                : 'Ctrl',
-          }) ?? 'Upload files (drag & drop)'
-        }
-      >
-        {isLoading ? (
-          <Spin spinning className="memori--upload-icon" />
+      {/* Main upload button — direct child of Tooltip so Tab reaches the button (no extra span wrapper) */}
+      <Tooltip placement="top" title={uploadTooltipTitle}>
+        {isUploadDisabled ? (
+          <span
+            className="memori--unified-upload-button-tooltip-trigger"
+            tabIndex={0}
+            role="button"
+            aria-disabled="true"
+            aria-label={uploadTooltipTitle}
+            onKeyDown={event => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+              }
+            }}
+          >
+            {uploadButton}
+          </span>
         ) : (
-          <UploadIcon className="memori--upload-icon" />
+          uploadButton
         )}
-      </button>
+      </Tooltip>
 
       {/* Media count indicator */}
       {currentMediaCount > 0 && (
@@ -612,7 +648,7 @@ ${file.textAssetUrl || ''}
       )}
 
       {/* Hidden components */}
-      <div className="memori--hidden-uploader" ref={documentRef}>
+      <div className="memori--hidden-uploader" ref={documentRef} aria-hidden>
         <UploadDocuments
           setDocumentPreviewFiles={handleDocumentFiles}
           authToken={authToken}
@@ -628,7 +664,7 @@ ${file.textAssetUrl || ''}
         />
       </div>
 
-      <div className="memori--hidden-uploader" ref={imageRef}>
+      <div className="memori--hidden-uploader" ref={imageRef} aria-hidden>
         <UploadImages
           authToken={authToken}
           client={client}
@@ -643,24 +679,6 @@ ${file.textAssetUrl || ''}
           onValidateImageFile={validateImageFile}
         />
       </div>
-
-      {/* Error messages container */}
-      <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}
-            title={t('upload.uploadNotification', {
-              defaultValue: 'Upload notification',
-            })}
-            description={error.message}
-            onClose={() => removeError(error.message)}
-            width="350px"
-          />
-        ))}
-      </div>
     </div>
   );
 };

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

@@ -1,8 +1,8 @@
 import React, { useState, useRef } from 'react';
 import cx from 'classnames';
-import Spin from '../../ui/Spin';
-import { DocumentIcon } from '../../icons/Document';
-import Modal from '../../ui/Modal';
+import { Spin } from '@memori.ai/ui';
+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';
 // Types
@@ -437,6 +437,7 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
 
       {/* Upload document button */}
       <button
+        type="button"
         className={cx(
           'memori-button',
           'memori-button--circle',
@@ -446,19 +447,21 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
           'memori--document-upload-button',
           { 'memori--error': false } // Removed errors.length > 0
         )}
+        aria-label={String(
+          t('upload.addDocument', { defaultValue: 'Upload document' })
+        )}
         onClick={() => documentInputRef.current?.click()}
         disabled={
           isLoading ||
           (maxDocuments && documentPreviewFiles.length >= maxDocuments) ||
           false
         }
-        title="Upload documents"
       >
         {isLoading ? (
           <Spin spinning className="memori--upload-icon" />
         ) : (
           <React.Fragment>
-            <DocumentIcon className="memori--upload-icon" />
+            <DocumentIcon className="memori--upload-icon" aria-hidden />
           </React.Fragment>
         )}
       </button>

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

@@ -1,13 +1,12 @@
 import React, { useState, useRef, useEffect } from 'react';
 import cx from 'classnames';
-import Spin from '../../ui/Spin';
-import Alert from '../../ui/Alert';
-import { ImageIcon } from '../../icons/Image';
-import Modal from '../../ui/Modal';
+import { Field, FieldGroup, Input, Spin } from '@memori.ai/ui';
+import { Image as ImageIcon } from 'lucide-react';
+import { Modal } from '@memori.ai/ui';
 import memoriApiClient from '@memori.ai/memori-api-client';
 import { Asset, Medium } from '@memori.ai/memori-api-client/dist/types';
 import { useTranslation } from 'react-i18next';
-import Button from '../../ui/Button';
+import { Button } from '@memori.ai/ui';
 import { compressImage } from '../../../helpers/imageCompression';
 
 // Types
@@ -34,7 +33,10 @@ interface UploadImagesProps {
   onLoadingChange?: (loading: boolean, fileCount?: number) => void;
   maxImages?: number;
   memoriID?: string;
-  onImageError?: (error: { message: string; severity: 'error' | 'warning' | 'info' }) => void;
+  onImageError?: (error: {
+    message: string;
+    severity: 'error' | 'warning' | 'info';
+  }) => void;
   onValidateImageFile?: (file: File) => boolean;
 }
 
@@ -101,7 +103,8 @@ const UploadImages: React.FC<UploadImagesProps> = ({
             count: skipped,
             max: maxImages,
             defaultValue: `${skipped} image(s) not added (maximum ${maxImages} files allowed).`,
-          }) ?? `${skipped} image(s) not added (maximum ${maxImages} files allowed).`,
+          }) ??
+          `${skipped} image(s) not added (maximum ${maxImages} files allowed).`,
         severity: 'warning',
       });
     }
@@ -133,11 +136,11 @@ const UploadImages: React.FC<UploadImagesProps> = ({
       const file = validFiles[0];
       setSelectedFile(file);
       setFilePreview(URL.createObjectURL(file));
-      
+
       // Set initial title as filename without extension
       const fileName = file.name.split('.').slice(0, -1).join('.');
       setImageTitle(fileName);
-      
+
       // Show upload modal with preview
       setShowUploadModal(true);
     } else {
@@ -155,7 +158,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
     setIsLoading(true);
 
     try {
-      const uploadPromises = files.map(async (file) => {
+      const uploadPromises = files.map(async file => {
         // Compress image before upload
         let fileToUpload = file;
         try {
@@ -174,13 +177,16 @@ const UploadImages: React.FC<UploadImagesProps> = ({
           mediumID: string | undefined;
           url: string;
           mimeType: string;
-        } | null>((resolve) => {
+        } | null>(resolve => {
           const reader = new FileReader();
-          
-          reader.onload = async (e) => {
+
+          reader.onload = async e => {
             const fileDataUrl = e.target?.result as string;
             const fileId = Math.random().toString(36).substr(2, 9);
-            const fileName = fileToUpload.name.split('.').slice(0, -1).join('.');
+            const fileName = fileToUpload.name
+              .split('.')
+              .slice(0, -1)
+              .join('.');
 
             if (client) {
               try {
@@ -193,7 +199,11 @@ const UploadImages: React.FC<UploadImagesProps> = ({
                     fileDataUrl,
                     authToken
                   );
-                } else if (memoriID && sessionID && backend?.uploadAssetUnlogged) {
+                } else if (
+                  memoriID &&
+                  sessionID &&
+                  backend?.uploadAssetUnlogged
+                ) {
                   response = await backend.uploadAssetUnlogged(
                     fileToUpload.name,
                     fileDataUrl,
@@ -323,7 +333,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
               response = await backend.uploadAsset(
                 fileToUpload.name,
                 fileDataUrl,
-                authToken,
+                authToken
                 // memoriID
               );
             } else if (memoriID && sessionID && backend?.uploadAssetUnlogged) {
@@ -449,6 +459,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
 
       {/* Upload image button */}
       <button
+        type="button"
         className={cx(
           'memori-button',
           'memori-button--circle',
@@ -457,6 +468,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
           'memori--conversation-button',
           'memori--image-upload-button'
         )}
+        aria-label={String(t('upload.addImage', { defaultValue: 'Upload image' }))}
         onClick={() => imageInputRef.current?.click()}
         disabled={
           isLoading || !isMediaAccepted || currentMediaCount >= maxImages
@@ -465,69 +477,70 @@ const UploadImages: React.FC<UploadImagesProps> = ({
         {isLoading ? (
           <Spin spinning className="memori--upload-icon" />
         ) : (
-          <ImageIcon className="memori--upload-icon" />
+          <ImageIcon className="memori--upload-icon" aria-hidden />
         )}
       </button>
 
       {/* Upload Modal with Title Input */}
       <Modal
-        width="80%"
-        widthMd="80%"
         open={showUploadModal && !!selectedFile}
-        className="memori--modal-preview-file"
+        className="memori--modal-preview-file memori--upload-image-preview-modal"
         onClose={handleCancelUpload}
+        footer={
+          <div
+            style={{
+              display: 'flex',
+              gap: 'var(--memori-spacing-sm)',
+              justifyContent: 'end',
+              alignItems: 'center',
+              borderTop: '1px solid rgba(255, 255, 255, 0.2)',
+            }}
+          >
+            <Button onClick={handleCancelUpload} variant="outline">
+              {t('cancel') ?? 'Cancel'}
+            </Button>
+            <Button
+              onClick={handleTitleSubmit}
+              disabled={!selectedFile || !imageTitle.trim()}
+            >
+              {t('confirm') ?? 'Confirm'}
+            </Button>
+          </div>
+        }
         closable
         // title={t('upload.titleImage', { title: imageTitle })}
         // description={t('upload.imageTitleDescription')}
       >
-        <div
-          className="memori--preview-content"
-          style={{
-            maxHeight: '70vh',
-            overflowY: 'auto',
-            textAlign: 'center',
-          }}
-        >
+        <div className="memori--preview-content memori--upload-image-preview-content">
           {filePreview && (
-            <img
-              src={filePreview}
-              alt={selectedFile?.name || 'Preview'}
-              style={{
-                maxWidth: '100%',
-                maxHeight: '40vh',
-                marginBottom: '20px',
-              }}
-            />
+            <div className="memori--upload-image-preview-frame">
+              <img
+                src={filePreview}
+                alt={selectedFile?.name || 'Preview'}
+                className="memori--upload-image-preview"
+              />
+            </div>
           )}
 
-          <div
-            style={{ maxWidth: '400px', margin: '0 auto', textAlign: 'left' }}
-          >
-            <p style={{ marginBottom: '10px', color: '#666' }}>
+          <div style={{ textAlign: 'left' }}>
+            <p
+              style={{
+                marginBottom: '10px',
+                color: 'var(--memori-text-color)',
+              }}
+            >
               {t('upload.titleHelp')}
             </p>
-            <input
-              value={imageTitle}
-              onChange={e => setImageTitle(e.target.value)}
-              placeholder={t('upload.titlePlaceholder') ?? 'Enter image title'}
-              style={{ width: '90%', marginBottom: '20px' }}
-              className="memori--upload-title-input"
-            />
-            <div style={{ display: 'flex', gap: '10px', justifyContent: 'center', alignItems: 'center' }}>
-            <Button
-                onClick={handleCancelUpload}
-                className="memori-button memori-button--outline memori--upload-image"
-              >
-                {t('cancel') ?? 'Cancel'}
-              </Button>
-              <Button
-                onClick={handleTitleSubmit}
-                disabled={!selectedFile || !imageTitle.trim()}
-                className="memori-button memori-button--primary memori-button--image-confirm memori--upload-image"
-              >
-                {t('confirm') ?? 'Confirm'}
-              </Button>
-            </div>
+            <FieldGroup
+              label={t('upload.titlePlaceholder') ?? 'Enter image title'}
+            >
+              <Input
+                value={imageTitle}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setImageTitle(e.target.value)
+                }
+              />
+            </FieldGroup>
           </div>
         </div>
       </Modal>