@memori.ai/memori-react 7.25.0 → 7.26.0

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

@@ -0,0 +1,434 @@
+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 { Medium } from '@memori.ai/memori-api-client/dist/types';
+import { useTranslation } from 'react-i18next';
+import Button from '../../ui/Button';
+
+// Types
+type UploadError = {
+  message: string;
+  severity: 'error' | 'warning' | 'info';
+  fileId?: string;
+};
+
+type PreviewFile = {
+  name: string;
+  id: string;
+  content: string;
+  type: 'image';
+  previewUrl?: string;
+  uploaded?: boolean;
+  file?: File;
+  error?: boolean;
+  title?: string;
+};
+
+// Constants
+const DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+
+// Props interface
+interface UploadImagesProps {
+  authToken?: string;
+  apiUrl?: string;
+  sessionID?: string;
+  isMediaAccepted?: boolean;
+  setDocumentPreviewFiles: any;
+  documentPreviewFiles: any;
+  onLoadingChange?: (loading: boolean) => void;
+  maxImages?: number;
+}
+
+const ALLOWED_FILE_TYPES = ['.jpg', '.jpeg', '.png'];
+
+const UploadImages: React.FC<UploadImagesProps> = ({
+  authToken = '',
+  apiUrl = '',
+  sessionID = '',
+  isMediaAccepted = false,
+  setDocumentPreviewFiles,
+  documentPreviewFiles,
+  onLoadingChange,
+  maxImages = 5, // Default value if not provided
+}) => {
+  const { t, i18n } = useTranslation();
+  // Client
+  const client = apiUrl ? memoriApiClient(apiUrl) : null;
+  const { backend, dialog } = client || {
+    backend: { uploadAsset: null },
+    dialog: { postMediumSelectedEvent: null, postMediumDeselectedEvent: null },
+  };
+
+  // State
+  const [isLoading, setIsLoading] = useState(false);
+  const [errors, setErrors] = useState<UploadError[]>([]);
+  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);
+
+  // Update loading state in parent component
+  useEffect(() => {
+    if (onLoadingChange) {
+      onLoadingChange(isLoading);
+    }
+  }, [isLoading, onLoadingChange]);
+
+  // Error handling
+  const clearErrors = () => setErrors([]);
+
+  const removeError = (errorMessage: string) => {
+    setErrors(prev => prev.filter(e => e.message !== errorMessage));
+  };
+
+  const addError = (error: UploadError) => {
+    setErrors(prev => [...prev, error]);
+    setTimeout(() => removeError(error.message), 5000);
+  };
+
+  // Check current image count
+  const currentImageCount = documentPreviewFiles.filter(
+    (file: any) => file.type === 'image'
+  ).length;
+
+  // Image upload
+  const validateImageFile = (file: File): boolean => {
+    const fileExt = `.${file.name.split('.').pop()?.toLowerCase()}`;
+
+    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',
+        fileId: file.name,
+      });
+      return false;
+    }
+
+    if (file.size > DEFAULT_MAX_FILE_SIZE) {
+      addError({
+        message: `File "${file.name}" exceeds ${
+          DEFAULT_MAX_FILE_SIZE / 1024 / 1024
+        }MB limit`,
+        severity: 'error',
+        fileId: file.name,
+      });
+      return false;
+    }
+
+    return true;
+  };
+
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length === 0) return;
+
+    // Check if adding these files would exceed the limit
+    const availableSlots = maxImages - currentImageCount;
+
+    if (availableSlots <= 0) {
+      // This check should rarely be needed since the button should be disabled
+      return;
+    }
+
+    // If we can't upload all files, only upload what we can and show warning
+    let filesToUpload = files;
+    if (files.length > availableSlots) {
+      filesToUpload = files.slice(0, availableSlots);
+      addError({
+        message:
+          t('upload.partialUpload', {
+            uploaded: availableSlots,
+            total: files.length,
+          }) ??
+          `Only ${availableSlots} out of ${files.length} images will be uploaded. Maximum ${maxImages} images allowed.`,
+        severity: 'warning',
+      });
+    }
+
+    clearErrors();
+
+    // For simplicity, we'll handle one file at a time
+    const file = filesToUpload[0];
+
+    if (!validateImageFile(file)) {
+      if (imageInputRef.current) {
+        imageInputRef.current.value = '';
+      }
+      return;
+    }
+
+    // Set file and create preview
+    console.log('file', file);
+    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);
+
+    if (imageInputRef.current) {
+      imageInputRef.current.value = '';
+    }
+  };
+
+  const handleTitleSubmit = async () => {
+    if (!selectedFile || !imageTitle.trim()) return;
+
+    setIsLoading(true);
+    setShowUploadModal(false);
+
+    try {
+      // Read the file as a data URL
+      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 (backend?.uploadAsset && authToken) {
+          try {
+            // Upload the asset
+            const { asset, ...resp } = await backend.uploadAsset(
+              selectedFile.name,
+              fileDataUrl,
+              authToken
+            );
+
+            if (resp.resultCode !== 0) {
+              throw new Error(resp.resultMessage || 'Upload failed');
+            }
+
+            // Call the MediumSelected event if dialog API is available
+            let medium: any = null;
+            if (dialog?.postMediumSelectedEvent && sessionID) {
+              medium = await dialog.postMediumSelectedEvent(sessionID, {
+                url: asset.assetURL,
+                mimeType: asset.mimeType,
+              } as Medium);
+            }
+
+            // Find mediumID that isn't already in documentPreviewFiles
+            let finalMediumID: string | undefined = undefined;
+            if (medium?.currentState?.currentMedia) {
+              // create a set of existing mediumIDs
+              const existingMediumIDs = new Set(
+                documentPreviewFiles.map((file: any) => file.mediumID)
+              );
+
+              // find the first mediumID that isn't already in the set
+              finalMediumID = medium.currentState.currentMedia.find(
+                (media: any) => !existingMediumIDs.has(media.mediumID)
+              )?.mediumID;
+            }
+
+            // Update parent component with the new file
+            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) {
+            addError({
+              message: t('upload.uploadFailed') ?? 'Upload failed',
+              severity: 'error',
+              fileId: selectedFile.name,
+            });
+          }
+        } else {
+          addError({
+            message:
+              t('upload.apiClientNotConfigured') ??
+              'API client not configured properly for media upload',
+            severity: 'warning',
+          });
+        }
+
+        setIsLoading(false);
+      };
+
+      reader.onerror = () => {
+        addError({
+          message: t('upload.fileReadingFailed') ?? 'File reading failed',
+          severity: 'error',
+          fileId: selectedFile.name,
+        });
+        setIsLoading(false);
+      };
+
+      reader.readAsDataURL(selectedFile);
+    } catch (error) {
+      addError({
+        message: t('upload.uploadFailed') ?? 'Upload failed',
+        severity: 'error',
+        fileId: selectedFile.name,
+      });
+      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={ALLOWED_FILE_TYPES.join(',')}
+        className="memori--upload-file-input"
+        onChange={handleImageUpload}
+        disabled={
+          isLoading ||
+          !isMediaAccepted ||
+          !authToken ||
+          currentImageCount >= maxImages
+        }
+        multiple
+      />
+
+      {/* 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 ||
+          !authToken ||
+          currentImageCount >= 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' }}>
+              <Button
+                onClick={handleTitleSubmit}
+                disabled={!selectedFile || !imageTitle.trim()}
+                className="memori-button memori-button--primary"
+              >
+                {t('confirm') ?? 'Confirm'}
+              </Button>
+              <Button
+                onClick={handleCancelUpload}
+                className="memori-button memori-button--secondary"
+              >
+                {t('cancel') ?? 'Cancel'}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Modal>
+
+      {/* Error messages container */}
+      <div className="memori--error-message-container">
+        {errors.map((error, index) => (
+          <Alert
+            key={`${error.message}-${index}`}
+            open={true}
+            type={error.severity}
+            title={'Upload notification'}
+            description={error.message}
+            onClose={() => removeError(error.message)}
+            width="350px"
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default UploadImages;

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

@@ -3,31 +3,158 @@
 exports[`renders UploadButton unchanged 1`] = `
 <div>
   <div
-    class="relative file-upload-wrapper"
+    class="memori--unified-upload-wrapper"
   >
-    <input
-      accept=".pdf,.txt,.md,.json,.xlsx,.csv"
-      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"
-      title="Upload file"
+      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
-        aria-hidden="true"
         class="memori--upload-icon"
-        focusable="false"
-        role="img"
+        fill="none"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"
+          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,.txt,.md,.json,.xlsx,.csv"
+          class="memori--upload-file-input"
+          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
+          class="memori--error-message-container"
+        />
+      </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
+          class="memori--error-message-container"
+        />
+      </div>
+    </div>
     <div
       class="memori--error-message-container"
     />

package/src/components/icons/Bug.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+const Bug = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    width="800px"
+    height="800px"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    aria-label={title}
+    color="currentColor"
+  >
+    <path
+      d="M19 15V11.9375C19 9.76288 17.2371 8 15.0625 8H8.9375C6.76288 8 5 9.76288 5 11.9375V15C5 18.866 8.13401 22 12 22C15.866 22 19 18.866 19 15Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M16.5 8.5V7.5C16.5 5.01472 14.4853 3 12 3C9.51472 3 7.5 5.01472 7.5 7.5V8.5"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M19 14H22"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M5 14H2"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M14.5 3.5L17 2"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M9.5 3.5L7 2"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M20.5 20.0002L18.5 19.2002"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M20.5 7.9998L18.5 8.7998"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M3.5 20.0002L5.5 19.2002"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M3.5 7.9998L5.5 8.7998"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M12 21.5V15"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+export default Bug;