@memori.ai/memori-react 6.8.1 → 6.8.4

package/src/components/UploadButton/UploadButton.stories.tsx

@@ -0,0 +1,164 @@
+import React, { useState } from 'react';
+import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
+import UploadButton from './UploadButton';
+import FilePreview from '../FilePreview/FilePreview';
+import './UploadButton.css';
+
+// Define the component props
+interface UploadButtonProps {
+  authToken?: string;
+  apiUrl?: string;
+  sessionID?: string;
+  isMediaAccepted?: boolean;
+  setDocumentPreviewFiles: (files: { name: string; id: string; content: string; type?: string }[]) => void;
+  disabled?: boolean;
+}
+
+const meta: Meta<UploadButtonProps> = {
+  title: 'Widget/Upload Button',
+  component: UploadButton as React.ComponentType<UploadButtonProps>,
+  argTypes: {
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    isMediaAccepted: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    authToken: {
+      control: {
+        type: 'text',
+      },
+    },
+    apiUrl: {
+      control: {
+        type: 'text',
+      },
+    },
+    sessionID: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+// Create the template
+const Template: Story<UploadButtonProps> = (args) => {
+  const [documentPreviewFiles, setDocumentPreviewFiles] = useState<{
+    name: string;
+    id: string;
+    content: string;
+    type?: string;
+  }[]>([]);
+
+  const removeFile = (id: string) => {
+    setDocumentPreviewFiles(prev => prev.filter(file => file.id !== id));
+  };
+
+  return (
+    <I18nWrapper>
+      <div
+        style={{
+          minHeight: '400px',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'flex-start',
+          justifyContent: 'center',
+          padding: '20px',
+          border: '1px solid #eee',
+          borderRadius: '8px',
+        }}
+      >
+        <div style={{ alignSelf: 'flex-end', marginBottom: '20px' }}>
+          <UploadButton {...args} setDocumentPreviewFiles={setDocumentPreviewFiles} documentPreviewFiles={documentPreviewFiles} />
+        </div>
+        
+        {documentPreviewFiles.length > 0 && (
+          <div style={{ width: '100%', marginTop: '20px' }}>
+            <h3>Uploaded Files</h3>
+            <FilePreview 
+              previewFiles={documentPreviewFiles} 
+              removeFile={removeFile}
+            />
+          </div>
+        )}
+      </div>
+    </I18nWrapper>
+  );
+};
+
+// Default state - no auth token, documents only
+export const Default = Template.bind({});
+Default.args = {
+  authToken: '',
+  apiUrl: 'https://api.example.com',
+  sessionID: 'session-123',
+  isMediaAccepted: false,
+};
+
+// Authenticated user - can upload documents
+export const AuthenticatedDocumentsOnly = Template.bind({});
+AuthenticatedDocumentsOnly.args = {
+  authToken: 'dummy-auth-token-12345',
+  apiUrl: 'https://api.example.com',
+  sessionID: 'session-123',
+  isMediaAccepted: false,
+};
+
+// Authenticated user - can upload documents and images
+export const AuthenticatedWithImages = Template.bind({});
+AuthenticatedWithImages.args = {
+  authToken: 'dummy-auth-token-12345',
+  apiUrl: 'https://api.example.com',
+  sessionID: 'session-123',
+  isMediaAccepted: true,
+};
+
+// Not authenticated but media accepted (should show warning for images)
+export const UnauthenticatedWithMediaAccepted = Template.bind({});
+UnauthenticatedWithMediaAccepted.args = {
+  authToken: '',
+  apiUrl: 'https://api.example.com',
+  sessionID: 'session-123',
+  isMediaAccepted: true,
+};
+
+// Disabled state
+export const Disabled = Template.bind({});
+Disabled.args = {
+  authToken: 'dummy-auth-token-12345',
+  apiUrl: 'https://api.example.com',
+  sessionID: 'session-123',
+  isMediaAccepted: true,
+  disabled: true,
+};
+
+
+// Mobile view simulation
+export const MobileView = Template.bind({});
+MobileView.args = {
+  authToken: 'dummy-auth-token-12345',
+  apiUrl: 'https://api.example.com',
+  sessionID: 'session-123',
+  isMediaAccepted: true,
+};
+MobileView.parameters = {
+  viewport: {
+    defaultViewport: 'mobile1',
+  },
+  docs: {
+    description: {
+      story: 'A simulation of how the upload button appears on mobile devices.',
+    },
+  },
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import UploadButton from './UploadButton';
+
+it('renders UploadButton unchanged', () => {
+  const { container } = render(
+    <UploadButton setDocumentPreviewFiles={jest.fn()} documentPreviewFiles={[]} />
+  );
+  expect(container).toMatchSnapshot();
+});
+

package/src/components/UploadButton/UploadButton.tsx

@@ -0,0 +1,490 @@
+import React, { useState, useRef, useEffect } 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 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';
+
+// Constants
+const MAX_IMAGES = 5;
+const MAX_DOCUMENTS = 5;
+
+// Props interface
+interface UploadManagerProps {
+  authToken?: string;
+  client?: ReturnType<typeof memoriApiClient>;
+  sessionID?: string;
+  isMediaAccepted?: boolean;
+  setDocumentPreviewFiles: any;
+  documentPreviewFiles: {
+    name: string;
+    id: string;
+    content: string;
+    mediumID?: string;
+    type?: string;
+  }[];
+  memoriID?: string;
+}
+
+const UploadButton: React.FC<UploadManagerProps> = ({
+  authToken = '',
+  client,
+  sessionID = '',
+  isMediaAccepted = false,
+  setDocumentPreviewFiles,
+  documentPreviewFiles,
+  memoriID = '',
+}) => {
+  // State
+  const [isLoading, setIsLoading] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [errors, setErrors] = useState<
+    { message: string; severity: 'error' | 'warning' | 'info' }[]
+  >([]);
+  const { t, i18n } = useTranslation();
+
+  // Refs
+  const menuRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const documentRef = useRef<HTMLDivElement>(null);
+  const imageRef = useRef<HTMLDivElement>(null);
+
+  // Calculate image count and remaining slots
+  const currentImageCount = documentPreviewFiles.filter(
+    file => file.type === 'image'
+  ).length;
+  const remainingSlots = MAX_IMAGES - currentImageCount;
+  const currentDocumentCount = documentPreviewFiles.filter(
+    file => file.type === 'document'
+  ).length;
+  const remainingDocumentSlots = MAX_DOCUMENTS - currentDocumentCount;
+  const hasReachedImageLimit = remainingSlots <= 0;
+  const hasReachedDocumentLimit = remainingDocumentSlots <= 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);
+  };
+
+  // Menu handling
+  const toggleMenu = () => {
+    setMenuOpen(prev => !prev);
+  };
+
+  const closeMenu = () => {
+    setMenuOpen(false);
+  };
+
+  // Click outside handler
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        menuRef.current &&
+        buttonRef.current &&
+        !menuRef.current.contains(event.target as Node) &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        closeMenu();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  // Handler for document files - now supports multiple documents
+  const handleDocumentFiles = (
+    files: { name: string; id: string; content: string; mimeType: string }[]
+  ) => {
+    if (files.length === 0) return;
+
+    // Funzione helper per fare escape dell'HTML nei valori degli attributi
+    const escapeAttributeValue = (text: string) => {
+      return text
+        .replace(/&/g, '&amp;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+    };
+
+    // 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>`;
+
+      return {
+        name: file.name,
+        id: file.id,
+        content: formattedContent,
+        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) {
+      documentButtonElement.click();
+    }
+    closeMenu();
+  };
+
+  // When image option is clicked
+  const handleImageClick = () => {
+    if (!isMediaAccepted) {
+      addError({
+        message:
+          t('upload.mediaNotAccepted') ?? 'Media uploads are not accepted',
+        severity: 'info',
+      });
+      closeMenu();
+      return;
+    }
+
+    if (hasReachedImageLimit) {
+      addError({
+        message:
+          t('upload.maxImagesReached', { max: MAX_IMAGES }) ??
+          `Maximum ${MAX_IMAGES} images already uploaded`,
+        severity: 'warning',
+      });
+      closeMenu();
+      return;
+    }
+
+    // If all checks pass, click the button in UploadImages component
+    const imageButtonElement = imageRef.current?.querySelector('button');
+    if (imageButtonElement) {
+      imageButtonElement.click();
+    }
+    closeMenu();
+  };
+
+  // Set loading state for child components
+  const handleLoadingChange = (loading: boolean) => {
+    setIsLoading(loading);
+  };
+
+  return (
+    <div className="memori--unified-upload-wrapper">
+      {/* 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={toggleMenu}
+        disabled={isLoading}
+        title={t('upload.uploadFiles') ?? 'Upload files'}
+      >
+        {isLoading ? (
+          <Spin spinning className="memori--upload-icon" />
+        ) : (
+          <UploadIcon className="memori--upload-icon" />
+        )}
+      </button>
+
+      {/* Image count indicator - moved here from UploadImages */}
+      {currentImageCount > 0 && (
+        <div
+          className={cx('memori--image-count', {
+            'memori--image-count-full': hasReachedImageLimit,
+          })}
+        >
+          {currentImageCount}/{MAX_IMAGES}
+        </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}>
+          <div
+            className={cx('memori--upload-menu-item', {
+              '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 && (
+                <span className="memori--upload-slots-info">
+                  {hasReachedDocumentLimit
+                    ? ` (${t('upload.maxReached') ?? 'Max reached'})`
+                    : ` (${remainingDocumentSlots} ${
+                        t('upload.remaining') ?? 'remaining'
+                      })`}
+                </span>
+              )} */}
+            </span>
+          </div>
+
+          <div
+            className={cx('memori--upload-menu-item', {
+              'memori--upload-menu-item--disabled':
+                !isMediaAccepted || hasReachedImageLimit,
+            })}
+            onClick={handleImageClick}
+            title={
+              !isMediaAccepted
+                ? t('upload.mediaNotAccepted') ?? 'Media uploads not accepted'
+                : hasReachedImageLimit
+                ? t('upload.maxImagesReached', { max: MAX_IMAGES }) ??
+                  `Maximum ${MAX_IMAGES} images already uploaded`
+                : remainingSlots === 1
+                ? t('upload.lastImageSlot') ?? 'Upload last image'
+                : t('upload.uploadImage', { remaining: remainingSlots }) ??
+                  `Upload image (${remainingSlots} remaining)`
+            }
+          >
+            <ImageIcon className="memori--upload-menu-icon-image" />
+            <span>
+              {t('upload.uploadImage') ?? 'Upload image'}
+              {/* {currentImageCount > 0 && (
+                <span className="memori--upload-slots-info">
+                  {hasReachedImageLimit
+                    ? ` (${t('upload.maxReached') ?? 'Max reached'})`
+                    : ` (${remainingSlots} ${
+                        t('upload.remaining') ?? 'remaining'
+                      })`}
+                </span>
+              )} */}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Hidden components */}
+      <div className="memori--hidden-uploader" ref={documentRef}>
+        <UploadDocuments
+          setDocumentPreviewFiles={handleDocumentFiles}
+          maxDocuments={MAX_DOCUMENTS}
+          documentPreviewFiles={documentPreviewFiles}
+          onLoadingChange={handleLoadingChange}
+          onDocumentError={handleDocumentError}
+          onValidateFile={validateDocumentFile}
+          onValidatePayloadSize={validatePayloadSize}
+        />
+      </div>
+
+      <div className="memori--hidden-uploader" ref={imageRef}>
+        <UploadImages
+          authToken={authToken}
+          client={client}
+          setDocumentPreviewFiles={setDocumentPreviewFiles}
+          sessionID={sessionID}
+          documentPreviewFiles={documentPreviewFiles}
+          isMediaAccepted={isMediaAccepted}
+          onLoadingChange={handleLoadingChange}
+          maxImages={MAX_IMAGES}
+          memoriID={memoriID}
+          onImageError={handleImageError}
+          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={'Upload notification'}
+            description={error.message}
+            onClose={() => removeError(error.message)}
+            width="350px"
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default UploadButton;