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

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
@@ -39,7 +39,6 @@ interface UploadDocumentsProps {
       id: string;
       content: string;
       mimeType: string;
-      sourceUrl?: string;
       textAssetUrl?: string;
     }[]
   ) => void;
@@ -63,8 +62,6 @@ interface UploadDocumentsProps {
       mimeType: string;
     }[]
   ) => boolean | { valid: boolean; message?: string };
-  /** Per-document content character limit. */
-  maxDocumentContentLength?: number;
 }
 
 const UploadDocuments: React.FC<UploadDocumentsProps> = ({
@@ -79,7 +76,6 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
   onDocumentError,
   onValidateFile,
   onValidatePayloadSize,
-  maxDocumentContentLength = 300000,
 }) => {
   const { t } = useTranslation();
   const { backend } = client || {
@@ -349,7 +345,6 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
         id: string;
         content: string;
         mimeType: string;
-        sourceUrl?: string;
         textAssetUrl?: string;
       }[] = [];
 
@@ -373,24 +368,11 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
               type: 'text/plain',
             });
 
-            const uploadResults = await Promise.allSettled([
-              uploadAssetFile(file),
-              uploadAssetFile(textFile),
-            ]);
-
-            const sourceUrl =
-              uploadResults[0].status === 'fulfilled'
-                ? uploadResults[0].value
-                : undefined;
-            const textAssetUrl =
-              uploadResults[1].status === 'fulfilled'
-                ? uploadResults[1].value
-                : undefined;
-
-            if (
-              uploadResults[0].status === 'rejected' ||
-              uploadResults[1].status === 'rejected'
-            ) {
+            let textAssetUrl: string | undefined;
+            try {
+              textAssetUrl = await uploadAssetFile(textFile);
+            } catch (uploadError) {
+              console.error('Text asset upload failed:', uploadError);
               onDocumentError?.({
                 message: t('upload.partialAssetUploadWarning', {
                   fileName: file.name,
@@ -401,20 +383,11 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
               });
             }
 
-            let contentForMessage = text;
-            const perDocumentLimit = maxDocumentContentLength;
-            if (text.length > perDocumentLimit) {
-              contentForMessage =
-                text.substring(0, perDocumentLimit) +
-                '\n\n[Content truncated due to size limits]';
-            }
-
             processedFiles.push({
               name: file.name,
               id: fileId,
-              content: contentForMessage,
+              content: text,
               mimeType: file.type,
-              sourceUrl,
               textAssetUrl,
             });
           } else {
@@ -464,6 +437,7 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
 
       {/* Upload document button */}
       <button
+        type="button"
         className={cx(
           'memori-button',
           'memori-button--circle',
@@ -473,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>

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

@@ -12,40 +12,48 @@ exports[`renders UploadButton unchanged 1`] = `
       style="display: none;"
       type="file"
     />
-    <button
-      class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button memori--unified-upload-button"
-      title="upload.uploadFiles"
+    <span
+      class="styles-module__root___-ALla"
     >
-      <svg
-        class="memori--upload-icon"
-        fill="none"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
+      <span
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r1:"
       >
-        <path
-          d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
-        />
-        <path
-          d="M17 8L12 3L7 8"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
-        />
-        <path
-          d="M12 3V15"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
-        />
-      </svg>
-    </button>
+        <button
+          aria-label="upload.uploadFilesOrImages"
+          class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button memori--unified-upload-button"
+          type="button"
+        >
+          <svg
+            class="lucide lucide-upload memori--upload-icon"
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+            />
+            <polyline
+              points="17 8 12 3 7 8"
+            />
+            <line
+              x1="12"
+              x2="12"
+              y1="3"
+              y2="15"
+            />
+          </svg>
+        </button>
+      </span>
+    </span>
     <div
+      aria-hidden="true"
       class="memori--hidden-uploader"
     >
       <div
@@ -58,55 +66,44 @@ exports[`renders UploadButton unchanged 1`] = `
           type="file"
         />
         <button
+          aria-label="upload.addDocument"
           class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button memori--document-upload-button"
-          title="Upload documents"
+          type="button"
         >
           <svg
-            class="memori--upload-icon"
+            aria-hidden="true"
+            class="lucide lucide-file-text memori--upload-icon"
             fill="none"
+            height="24"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
             viewBox="0 0 24 24"
+            width="24"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M14 2.5H6C5.60218 2.5 5.22064 2.65804 4.93934 2.93934C4.65804 3.22064 4.5 3.60218 4.5 4V20C4.5 20.3978 4.65804 20.7794 4.93934 21.0607C5.22064 21.342 5.60218 21.5 6 21.5H18C18.3978 21.5 18.7794 21.342 19.0607 21.0607C19.342 20.7794 19.5 20.3978 19.5 20V8L14 2.5Z"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
+              d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
             />
             <path
-              d="M14 2.5V8H19.5"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
+              d="M14 2v4a2 2 0 0 0 2 2h4"
             />
             <path
-              d="M16 13H8"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
+              d="M10 9H8"
             />
             <path
-              d="M16 17H8"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
+              d="M16 13H8"
             />
             <path
-              d="M10 9H8"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
+              d="M16 17H8"
             />
           </svg>
         </button>
       </div>
     </div>
     <div
+      aria-hidden="true"
       class="memori--hidden-uploader"
     >
       <div
@@ -120,46 +117,44 @@ exports[`renders UploadButton unchanged 1`] = `
           type="file"
         />
         <button
+          aria-label="upload.addImage"
           class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button memori--image-upload-button"
           disabled=""
+          type="button"
         >
           <svg
-            class="memori--upload-icon"
+            aria-hidden="true"
+            class="lucide lucide-image memori--upload-icon"
             fill="none"
+            height="24"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
             viewBox="0 0 24 24"
+            width="24"
             xmlns="http://www.w3.org/2000/svg"
           >
             <rect
               height="18"
               rx="2"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
+              ry="2"
               width="18"
               x="3"
               y="3"
             />
             <circle
-              cx="8.5"
-              cy="8.5"
-              fill="currentColor"
-              r="1.5"
+              cx="9"
+              cy="9"
+              r="2"
             />
             <path
-              d="M21 15L16 10L5 21"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
+              d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
             />
           </svg>
         </button>
       </div>
     </div>
-    <div
-      class="memori--error-message-container"
-    />
   </div>
 </div>
 `;