@memori.ai/memori-react 8.45.2 → 8.45.5

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

@@ -1,538 +0,0 @@
-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 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 { compressImage } from '../../../helpers/imageCompression';
-
-// Types
-type PreviewFile = {
-  name: string;
-  id: string;
-  content: string;
-  type: 'image';
-  previewUrl?: string;
-  uploaded?: boolean;
-  file?: File;
-  error?: boolean;
-  title?: string;
-};
-
-// Props interface
-interface UploadImagesProps {
-  authToken?: string;
-  client?: ReturnType<typeof memoriApiClient>;
-  sessionID?: string;
-  isMediaAccepted?: boolean;
-  setDocumentPreviewFiles: any;
-  documentPreviewFiles: any;
-  onLoadingChange?: (loading: boolean, fileCount?: number) => void;
-  maxImages?: number;
-  memoriID?: string;
-  onImageError?: (error: { message: string; severity: 'error' | 'warning' | 'info' }) => void;
-  onValidateImageFile?: (file: File) => boolean;
-}
-
-const UploadImages: React.FC<UploadImagesProps> = ({
-  authToken = '',
-  sessionID = '',
-  client,
-  isMediaAccepted = false,
-  setDocumentPreviewFiles,
-  documentPreviewFiles,
-  onLoadingChange,
-  maxImages = 5,
-  memoriID = '',
-  onImageError,
-  onValidateImageFile,
-}) => {
-  const { t, i18n } = useTranslation();
-  // Client
-  const { backend, dialog } = client || {
-    backend: { uploadAsset: null, uploadAssetUnlogged: null },
-    dialog: { postMediumSelectedEvent: null, postMediumDeselectedEvent: null },
-  };
-
-  // State
-  const [isLoading, setIsLoading] = useState(false);
-  const [loadingFileCount, setLoadingFileCount] = useState(0);
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
-  const [filePreview, setFilePreview] = useState<string | null>(null);
-  const [imageTitle, setImageTitle] = useState('');
-  const [showUploadModal, setShowUploadModal] = useState(false);
-
-  // Refs
-  const imageInputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (onLoadingChange) {
-      onLoadingChange(isLoading, isLoading ? loadingFileCount : 0);
-    }
-  }, [isLoading, loadingFileCount, onLoadingChange]);
-
-  // Check current total media count (images + documents)
-  const currentMediaCount = documentPreviewFiles.length;
-
-  // Image upload
-  const validateImageFile = (file: File): boolean => {
-    if (onValidateImageFile) {
-      return onValidateImageFile(file);
-    }
-    return true;
-  };
-
-  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(e.target.files || []);
-    if (files.length === 0) return;
-
-    const remainingSlots = Math.max(0, maxImages - currentMediaCount);
-    const filesToProcess = files.slice(0, remainingSlots);
-
-    if (files.length > filesToProcess.length) {
-      const skipped = files.length - filesToProcess.length;
-      onImageError?.({
-        message:
-          t('upload.imagesNotAddedMaxAllowed', {
-            count: skipped,
-            max: maxImages,
-            defaultValue: `${skipped} image(s) not added (maximum ${maxImages} files allowed).`,
-          }) ?? `${skipped} image(s) not added (maximum ${maxImages} files allowed).`,
-        severity: 'warning',
-      });
-    }
-
-    if (filesToProcess.length === 0) {
-      if (imageInputRef.current) {
-        imageInputRef.current.value = '';
-      }
-      return;
-    }
-
-    // Validate all files first
-    const validFiles = filesToProcess.filter(file => {
-      if (!validateImageFile(file)) {
-        return false;
-      }
-      return true;
-    });
-
-    if (validFiles.length === 0) {
-      if (imageInputRef.current) {
-        imageInputRef.current.value = '';
-      }
-      return;
-    }
-
-    // If only one file, show modal for title input
-    if (validFiles.length === 1) {
-      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 {
-      // For multiple files, upload them directly with default titles
-      await uploadMultipleImages(validFiles);
-    }
-
-    if (imageInputRef.current) {
-      imageInputRef.current.value = '';
-    }
-  };
-
-  const uploadMultipleImages = async (files: File[]) => {
-    setLoadingFileCount(files.length);
-    setIsLoading(true);
-
-    try {
-      const uploadPromises = files.map(async (file) => {
-        // Compress image before upload
-        let fileToUpload = file;
-        try {
-          fileToUpload = await compressImage(file);
-        } catch (error) {
-          // If compression fails, use original file
-          console.warn('Image compression failed, using original file', error);
-          fileToUpload = file;
-        }
-
-        return new Promise<{
-          name: string;
-          id: string;
-          content: string;
-          type: string;
-          mediumID: string | undefined;
-          url: string;
-          mimeType: string;
-        } | null>((resolve) => {
-          const reader = new FileReader();
-          
-          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('.');
-
-            if (client) {
-              try {
-                let asset: Asset;
-                let response;
-
-                if (authToken && backend?.uploadAsset) {
-                  response = await backend.uploadAsset(
-                    fileToUpload.name,
-                    fileDataUrl,
-                    authToken
-                  );
-                } else if (memoriID && sessionID && backend?.uploadAssetUnlogged) {
-                  response = await backend.uploadAssetUnlogged(
-                    fileToUpload.name,
-                    fileDataUrl,
-                    memoriID,
-                    sessionID
-                  );
-
-                  if (!response) {
-                    throw new Error('Upload failed');
-                  }
-                } else {
-                  throw new Error('Missing required parameters for upload');
-                }
-
-                asset = response.asset;
-                if (response.resultCode !== 0) {
-                  throw new Error(response.resultMessage || 'Upload failed');
-                }
-
-                let medium: any = null;
-                if (dialog?.postMediumSelectedEvent && sessionID) {
-                  medium = await dialog.postMediumSelectedEvent(sessionID, {
-                    url: asset.assetURL,
-                    mimeType: asset.mimeType,
-                  } as Medium);
-                }
-
-                let finalMediumID: string | undefined = undefined;
-                if (medium?.currentState?.currentMedia) {
-                  const existingMediumIDs = new Set(
-                    documentPreviewFiles.map((file: any) => file.mediumID)
-                  );
-
-                  finalMediumID = medium.currentState.currentMedia.find(
-                    (media: any) => !existingMediumIDs.has(media.mediumID)
-                  )?.mediumID;
-                }
-
-                resolve({
-                  name: fileName,
-                  id: fileId,
-                  url: asset.assetURL,
-                  content: asset.assetURL,
-                  type: 'image',
-                  mediumID: finalMediumID,
-                  mimeType: asset.mimeType,
-                });
-              } catch (error) {
-                onImageError?.({
-                  message: t('upload.uploadFailed') ?? 'Upload failed',
-                  severity: 'warning',
-                });
-                resolve(null);
-              }
-            } else {
-              onImageError?.({
-                message:
-                  t('upload.apiClientNotConfigured') ??
-                  'API client not configured properly for media upload',
-                severity: 'warning',
-              });
-              resolve(null);
-            }
-          };
-
-          reader.onerror = () => {
-            onImageError?.({
-              message: t('upload.fileReadingFailed') ?? 'File reading failed',
-              severity: 'warning',
-            });
-            resolve(null);
-          };
-
-          reader.readAsDataURL(fileToUpload);
-        });
-      });
-
-      const results = await Promise.all(uploadPromises);
-      const successfulUploads = results.filter(result => result !== null);
-
-      if (successfulUploads.length > 0) {
-        setDocumentPreviewFiles((prevFiles: any[]) => [
-          ...prevFiles,
-          ...successfulUploads,
-        ]);
-      }
-    } catch (error) {
-      onImageError?.({
-        message: t('upload.uploadFailed') ?? 'Upload failed',
-        severity: 'warning',
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleTitleSubmit = async () => {
-    if (!selectedFile || !imageTitle.trim()) return;
-
-    setLoadingFileCount(1);
-    setIsLoading(true);
-    setShowUploadModal(false);
-
-    try {
-      // Compress image before upload
-      let fileToUpload = selectedFile;
-      try {
-        fileToUpload = await compressImage(selectedFile);
-      } catch (error) {
-        // If compression fails, use original file
-        console.warn('Image compression failed, using original file', error);
-        fileToUpload = selectedFile;
-      }
-
-      const reader = new FileReader();
-
-      reader.onload = async e => {
-        const fileDataUrl = e.target?.result as string;
-        const fileId = Math.random().toString(36).substr(2, 9);
-
-        if (client) {
-          try {
-            let asset: Asset;
-            let response;
-
-            if (authToken && backend?.uploadAsset) {
-              response = await backend.uploadAsset(
-                fileToUpload.name,
-                fileDataUrl,
-                authToken,
-                // memoriID
-              );
-            } else if (memoriID && sessionID && backend?.uploadAssetUnlogged) {
-              response = await backend.uploadAssetUnlogged(
-                fileToUpload.name,
-                fileDataUrl,
-                memoriID,
-                sessionID
-              );
-
-              if (!response) {
-                throw new Error('Upload failed');
-              }
-            } else {
-              throw new Error('Missing required parameters for upload');
-            }
-
-            asset = response.asset;
-            if (response.resultCode !== 0) {
-              throw new Error(response.resultMessage || 'Upload failed');
-            }
-
-            let medium: any = null;
-            if (dialog?.postMediumSelectedEvent && sessionID) {
-              medium = await dialog.postMediumSelectedEvent(sessionID, {
-                url: asset.assetURL,
-                mimeType: asset.mimeType,
-              } as Medium);
-            }
-
-            let finalMediumID: string | undefined = undefined;
-            if (medium?.currentState?.currentMedia) {
-              const existingMediumIDs = new Set(
-                documentPreviewFiles.map((file: any) => file.mediumID)
-              );
-
-              finalMediumID = medium.currentState.currentMedia.find(
-                (media: any) => !existingMediumIDs.has(media.mediumID)
-              )?.mediumID;
-            }
-
-            setDocumentPreviewFiles(
-              (
-                prevFiles: {
-                  name: string;
-                  id: string;
-                  content: string;
-                  type: string;
-                  mediumID: string | undefined;
-                  url: string;
-                  mimeType: string;
-                }[]
-              ) => [
-                ...prevFiles,
-                {
-                  name: imageTitle,
-                  id: fileId,
-                  url: asset.assetURL,
-                  content: asset.assetURL,
-                  type: 'image',
-                  mediumID: finalMediumID,
-                  mimeType: asset.mimeType,
-                },
-              ]
-            );
-          } catch (error) {
-            onImageError?.({
-              message: t('upload.uploadFailed') ?? 'Upload failed',
-              severity: 'warning',
-            });
-          }
-        } else {
-          onImageError?.({
-            message:
-              t('upload.apiClientNotConfigured') ??
-              'API client not configured properly for media upload',
-            severity: 'warning',
-          });
-        }
-
-        setIsLoading(false);
-      };
-
-      reader.onerror = () => {
-        onImageError?.({
-          message: t('upload.fileReadingFailed') ?? 'File reading failed',
-          severity: 'warning',
-        });
-        setIsLoading(false);
-      };
-
-      reader.readAsDataURL(fileToUpload);
-    } catch (error) {
-      onImageError?.({
-        message: t('upload.uploadFailed') ?? 'Upload failed',
-        severity: 'warning',
-      });
-      setIsLoading(false);
-    }
-  };
-
-  const handleCancelUpload = () => {
-    setShowUploadModal(false);
-    setSelectedFile(null);
-    setFilePreview(null);
-    setImageTitle('');
-  };
-
-  return (
-    <div className="memori--image-upload-wrapper">
-      {/* Hidden file input */}
-      <input
-        ref={imageInputRef}
-        type="file"
-        accept=".jpg,.jpeg,.png"
-        multiple
-        className="memori--upload-file-input"
-        onChange={handleImageUpload}
-        disabled={
-          isLoading || !isMediaAccepted || currentMediaCount >= maxImages
-        }
-      />
-
-      {/* Upload image button */}
-      <button
-        className={cx(
-          'memori-button',
-          'memori-button--circle',
-          'memori-button--icon-only',
-          'memori-share-button--button',
-          'memori--conversation-button',
-          'memori--image-upload-button'
-        )}
-        onClick={() => imageInputRef.current?.click()}
-        disabled={
-          isLoading || !isMediaAccepted || currentMediaCount >= maxImages
-        }
-      >
-        {isLoading ? (
-          <Spin spinning className="memori--upload-icon" />
-        ) : (
-          <ImageIcon className="memori--upload-icon" />
-        )}
-      </button>
-
-      {/* Upload Modal with Title Input */}
-      <Modal
-        width="80%"
-        widthMd="80%"
-        open={showUploadModal && !!selectedFile}
-        className="memori--modal-preview-file"
-        onClose={handleCancelUpload}
-        closable
-        // title={t('upload.titleImage', { title: imageTitle })}
-        // description={t('upload.imageTitleDescription')}
-      >
-        <div
-          className="memori--preview-content"
-          style={{
-            maxHeight: '70vh',
-            overflowY: 'auto',
-            textAlign: 'center',
-          }}
-        >
-          {filePreview && (
-            <img
-              src={filePreview}
-              alt={selectedFile?.name || 'Preview'}
-              style={{
-                maxWidth: '100%',
-                maxHeight: '40vh',
-                marginBottom: '20px',
-              }}
-            />
-          )}
-
-          <div
-            style={{ maxWidth: '400px', margin: '0 auto', textAlign: 'left' }}
-          >
-            <p style={{ marginBottom: '10px', color: '#666' }}>
-              {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>
-          </div>
-        </div>
-      </Modal>
-    </div>
-  );
-};
-
-export default UploadImages;

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

@@ -1,165 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders UploadButton unchanged 1`] = `
-<div>
-  <div
-    class="memori--unified-upload-wrapper"
-  >
-    <input
-      accept=".jpg,.jpeg,.png,.pdf,.docx,.docm,.dotx,.xlsx,.xlsm,.xls,.xltx,.ods,.pptx,.pptm,.potx,.txt,.csv,.tsv,.html,.xhtml,.htm,.xml,.json,.md,.log,.yml,.yaml"
-      class="memori--upload-file-input"
-      multiple=""
-      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"
-    >
-      <svg
-        class="memori--upload-icon"
-        fill="none"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <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>
-    <div
-      class="memori--hidden-uploader"
-    >
-      <div
-        class="memori--document-upload-wrapper"
-      >
-        <input
-          accept=".pdf,.docx,.docm,.dotx,.xlsx,.xlsm,.xls,.xltx,.ods,.pptx,.pptm,.potx,.txt,.csv,.tsv,.html,.xhtml,.htm,.xml,.json,.md,.log,.yml,.yaml"
-          class="memori--upload-file-input"
-          multiple=""
-          type="file"
-        />
-        <button
-          class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button memori--document-upload-button"
-          title="Upload documents"
-        >
-          <svg
-            class="memori--upload-icon"
-            fill="none"
-            viewBox="0 0 24 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"
-            />
-            <path
-              d="M14 2.5V8H19.5"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-            />
-            <path
-              d="M16 13H8"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-            />
-            <path
-              d="M16 17H8"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-            />
-            <path
-              d="M10 9H8"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-    <div
-      class="memori--hidden-uploader"
-    >
-      <div
-        class="memori--image-upload-wrapper"
-      >
-        <input
-          accept=".jpg,.jpeg,.png"
-          class="memori--upload-file-input"
-          disabled=""
-          multiple=""
-          type="file"
-        />
-        <button
-          class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button memori--image-upload-button"
-          disabled=""
-        >
-          <svg
-            class="memori--upload-icon"
-            fill="none"
-            viewBox="0 0 24 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"
-              width="18"
-              x="3"
-              y="3"
-            />
-            <circle
-              cx="8.5"
-              cy="8.5"
-              fill="currentColor"
-              r="1.5"
-            />
-            <path
-              d="M21 15L16 10L5 21"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-    <div
-      class="memori--error-message-container"
-    />
-  </div>
-</div>
-`;