@memori.ai/memori-react 8.11.0 → 8.13.0

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

@@ -8,6 +8,7 @@ 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 = {
@@ -74,10 +75,8 @@ const UploadImages: React.FC<UploadImagesProps> = ({
     }
   }, [isLoading, onLoadingChange]);
 
-  // Check current image count
-  const currentImageCount = documentPreviewFiles.filter(
-    (file: any) => file.type === 'image'
-  ).length;
+  // Check current total media count (images + documents)
+  const currentMediaCount = documentPreviewFiles.length;
 
   // Image upload
   const validateImageFile = (file: File): boolean => {
@@ -91,42 +90,192 @@ const UploadImages: React.FC<UploadImagesProps> = ({
     const files = Array.from(e.target.files || []);
     if (files.length === 0) return;
 
-    // Check if adding this file would exceed the limit
-    if (currentImageCount >= maxImages) {
+    // Check if adding these files would exceed the total media limit
+    if (currentMediaCount + files.length > maxImages) {
       onImageError?.({
         message:
-          t('upload.maxImagesReached') ??
-          `Maximum ${maxImages} images allowed.`,
+          `Maximum ${maxImages} media files allowed. You can upload ${Math.max(0, maxImages - currentMediaCount)} more file${maxImages - currentMediaCount !== 1 ? 's' : ''}.`,
         severity: 'error',
       });
       return;
     }
 
-    const file = files[0]; // Only handle the first file
+    // Validate all files first
+    const validFiles = files.filter(file => {
+      if (!validateImageFile(file)) {
+        return false;
+      }
+      return true;
+    });
 
-    if (!validateImageFile(file)) {
+    if (validFiles.length === 0) {
       if (imageInputRef.current) {
         imageInputRef.current.value = '';
       }
       return;
     }
 
-    // Set file and create preview
-    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 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[]) => {
+    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: 'error',
+                });
+                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: 'error',
+            });
+            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: 'error',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const handleTitleSubmit = async () => {
     if (!selectedFile || !imageTitle.trim()) return;
 
@@ -134,6 +283,16 @@ const UploadImages: React.FC<UploadImagesProps> = ({
     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 => {
@@ -147,13 +306,14 @@ const UploadImages: React.FC<UploadImagesProps> = ({
 
             if (authToken && backend?.uploadAsset) {
               response = await backend.uploadAsset(
-                selectedFile.name,
+                fileToUpload.name,
                 fileDataUrl,
-                authToken
+                authToken,
+                // memoriID
               );
             } else if (memoriID && sessionID && backend?.uploadAssetUnlogged) {
               response = await backend.uploadAssetUnlogged(
-                selectedFile.name,
+                fileToUpload.name,
                 fileDataUrl,
                 memoriID,
                 sessionID
@@ -240,7 +400,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
         setIsLoading(false);
       };
 
-      reader.readAsDataURL(selectedFile);
+      reader.readAsDataURL(fileToUpload);
     } catch (error) {
       onImageError?.({
         message: t('upload.uploadFailed') ?? 'Upload failed',
@@ -264,10 +424,11 @@ const UploadImages: React.FC<UploadImagesProps> = ({
         ref={imageInputRef}
         type="file"
         accept=".jpg,.jpeg,.png"
+        multiple
         className="memori--upload-file-input"
         onChange={handleImageUpload}
         disabled={
-          isLoading || !isMediaAccepted || currentImageCount >= maxImages
+          isLoading || !isMediaAccepted || currentMediaCount >= maxImages
         }
       />
 
@@ -283,7 +444,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
         )}
         onClick={() => imageInputRef.current?.click()}
         disabled={
-          isLoading || !isMediaAccepted || currentImageCount >= maxImages
+          isLoading || !isMediaAccepted || currentMediaCount >= maxImages
         }
       >
         {isLoading ? (
@@ -301,7 +462,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
         className="memori--modal-preview-file"
         onClose={handleCancelUpload}
         closable
-        title={t('upload.titleImage', { title: imageTitle })}
+        // title={t('upload.titleImage', { title: imageTitle })}
         // description={t('upload.imageTitleDescription')}
       >
         <div
@@ -337,20 +498,20 @@ const UploadImages: React.FC<UploadImagesProps> = ({
               style={{ width: '90%', marginBottom: '20px' }}
               className="memori--upload-title-input"
             />
-            <div style={{ display: 'flex', gap: '10px' }}>
+            <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"
+                className="memori-button memori-button--primary memori-button--image-confirm memori--upload-image"
               >
                 {t('confirm') ?? 'Confirm'}
               </Button>
-              <Button
-                onClick={handleCancelUpload}
-                className="memori-button memori-button--primary"
-              >
-                {t('cancel') ?? 'Cancel'}
-              </Button>
             </div>
           </div>
         </div>

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

@@ -5,6 +5,13 @@ exports[`renders UploadButton unchanged 1`] = `
   <div
     class="memori--unified-upload-wrapper"
   >
+    <input
+      accept=".jpg,.jpeg,.png,.pdf,.txt,.json,.xlsx,.csv,.md,.html"
+      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"
@@ -45,8 +52,9 @@ exports[`renders UploadButton unchanged 1`] = `
         class="memori--document-upload-wrapper"
       >
         <input
-          accept=".pdf,.txt,.md,.json,.xlsx,.csv"
+          accept=".pdf,.txt,.md,.json,.xlsx,.csv,.html"
           class="memori--upload-file-input"
+          multiple=""
           type="file"
         />
         <button
@@ -108,6 +116,7 @@ exports[`renders UploadButton unchanged 1`] = `
           accept=".jpg,.jpeg,.png"
           class="memori--upload-file-input"
           disabled=""
+          multiple=""
           type="file"
         />
         <button

package/src/components/layouts/FullBody/FullBody.stories.tsx

@@ -9,7 +9,7 @@ import { ArtifactProvider } from '../../MemoriArtifactSystem/context/ArtifactCon
 
 const meta: Meta = {
   title: 'General/Layouts/FullBody',
-  component: (args: Props) => <Memori {...args} engineURL="https://engine.memori.ai" apiURL="https://backend.memori.ai" baseURL="https://www.aisuru.com"    />,
+  component: (args: Props) => <Memori {...args}    />,
   argTypes: {},
   parameters: {
     controls: { expanded: true },
@@ -32,14 +32,13 @@ const Template: Story<Props> = args => (
 
 const DefaultLayout = Template.bind({});
 DefaultLayout.args = {
-  memoriName: 'Layout Storybook',
+  emoriName: 'Layout Storybook',
   ownerUserName: 'andrea.patini',
-  memoriID: '157860e8-f014-43b3-a7c5-fb4a08c87025',
-  ownerUserID: '95753bbe-9e88-4799-ae35-dc060bc11c48',
-  tenantID: 'www.aisuru.com',
-  engineURL: 'https://engine.memori.ai/memori/v2',
-  apiURL: 'https://backend.memori.ai/api/v2',
-  baseURL: 'https://www.aisuru.com',
+  memoriID: 'ae20fc5a-cc15-4db9-b7dd-2cd4a621b85e',
+  ownerUserID: '91dbc9ba-b684-4fbe-9828-b5980af6cda9',
+  tenantID: 'aisuru-staging.aclambda.online',
+  engineURL: 'https://engine-staging.memori.ai/memori/v2',
+  apiURL: 'https://backend-staging.memori.ai/api/v2',
   layout: 'FULL_CHAT',
   uiLang: 'IT',
   spokenLang: 'IT',
@@ -63,7 +62,7 @@ export const FullBodyWithFullBodyAvatar = Template.bind({});
 FullBodyWithFullBodyAvatar.args = {
     ...DefaultLayout.args,
     avatar3DURL:
-      'https://assets.memori.ai/api/v2/asset/692580d6-7b25-4ed0-84ce-82d5f4ac4270.glb#1762875775270',
+      'https://assets-staging.memori.ai/api/v2/asset/c0bb0d40-aebf-4e58-bfa0-45a4d7935153.glb#1763646903757',
   integration: {
     ...baseIntegration,
     customData: JSON.stringify({
@@ -75,7 +74,7 @@ FullBodyWithFullBodyAvatar.args = {
       multilanguage: true,
       avatar: 'readyplayerme-full',
       avatarURL:
-        'https://assets.memori.ai/api/v2/asset/692580d6-7b25-4ed0-84ce-82d5f4ac4270.glb#1762875775270',
+        'https://assets-staging.memori.ai/api/v2/asset/c0bb0d40-aebf-4e58-bfa0-45a4d7935153.glb#1763646903757',
       name: 'Layout Storybook',
       showShare: true,
     }),

package/src/components/layouts/Totem/Totem.stories.tsx

@@ -32,14 +32,13 @@ const Template: Story<Props> = args => (
 
 const DefaultLayout = Template.bind({});
 DefaultLayout.args = {
-  memoriName: 'Layout Storybook',
+  emoriName: 'Layout Storybook',
   ownerUserName: 'andrea.patini',
-  memoriID: '157860e8-f014-43b3-a7c5-fb4a08c87025',
-  ownerUserID: '95753bbe-9e88-4799-ae35-dc060bc11c48',
-  tenantID: 'www.aisuru.com',
-  engineURL: 'https://engine.memori.ai/memori/v2',
-  apiURL: 'https://backend.memori.ai/api/v2',
-  baseURL: 'https://www.aisuru.com',
+  memoriID: 'ae20fc5a-cc15-4db9-b7dd-2cd4a621b85e',
+  ownerUserID: '91dbc9ba-b684-4fbe-9828-b5980af6cda9',
+  tenantID: 'aisuru-staging.aclambda.online',
+  engineURL: 'https://engine-staging.memori.ai/memori/v2',
+  apiURL: 'https://backend-staging.memori.ai/api/v2',
   layout: 'FULL_CHAT',
   uiLang: 'IT',
   spokenLang: 'IT',
@@ -63,7 +62,7 @@ export const TotemWithFullBodyAvatar = Template.bind({});
 TotemWithFullBodyAvatar.args = {
     ...DefaultLayout.args,
     avatar3DURL:
-      'https://assets.memori.ai/api/v2/asset/692580d6-7b25-4ed0-84ce-82d5f4ac4270.glb#1762875775270',
+      'https://assets-staging.memori.ai/api/v2/asset/c0bb0d40-aebf-4e58-bfa0-45a4d7935153.glb#1763646903757',
   integration: {
     ...baseIntegration,
     customData: JSON.stringify({
@@ -75,7 +74,7 @@ TotemWithFullBodyAvatar.args = {
       multilanguage: true,
       avatar: 'readyplayerme-full',
       avatarURL:
-        'https://assets.memori.ai/api/v2/asset/692580d6-7b25-4ed0-84ce-82d5f4ac4270.glb#1762875775270',
+        'https://assets-staging.memori.ai/api/v2/asset/c0bb0d40-aebf-4e58-bfa0-45a4d7935153.glb#1763646903757',
       name: 'Layout Storybook',
       showShare: true,
     }),

package/src/components/layouts/ZoomedFullBody/ZoomedFullBody.stories.tsx

@@ -32,14 +32,13 @@ const Template: Story<Props> = args => (
 
 const DefaultLayout = Template.bind({});
 DefaultLayout.args = {
-  memoriName: 'Layout Storybook',
+  emoriName: 'Layout Storybook',
   ownerUserName: 'andrea.patini',
-  memoriID: '157860e8-f014-43b3-a7c5-fb4a08c87025',
-  ownerUserID: '95753bbe-9e88-4799-ae35-dc060bc11c48',
-  tenantID: 'www.aisuru.com',
-  engineURL: 'https://engine.memori.ai/memori/v2',
-  apiURL: 'https://backend.memori.ai/api/v2',
-  baseURL: 'https://www.aisuru.com',
+  memoriID: 'ae20fc5a-cc15-4db9-b7dd-2cd4a621b85e',
+  ownerUserID: '91dbc9ba-b684-4fbe-9828-b5980af6cda9',
+  tenantID: 'aisuru-staging.aclambda.online',
+  engineURL: 'https://engine-staging.memori.ai/memori/v2',
+  apiURL: 'https://backend-staging.memori.ai/api/v2',
   layout: 'FULL_CHAT',
   uiLang: 'IT',
   spokenLang: 'IT',
@@ -63,7 +62,7 @@ export const ZoomedFullBodyWithFullBodyAvatar = Template.bind({});
 ZoomedFullBodyWithFullBodyAvatar.args = {
     ...DefaultLayout.args,
     avatar3DURL:
-      'https://assets.memori.ai/api/v2/asset/692580d6-7b25-4ed0-84ce-82d5f4ac4270.glb#1762875775270',
+      'https://assets-staging.memori.ai/api/v2/asset/c0bb0d40-aebf-4e58-bfa0-45a4d7935153.glb#1763646903757',
   integration: {
     ...baseIntegration,
     customData: JSON.stringify({
@@ -75,7 +74,7 @@ ZoomedFullBodyWithFullBodyAvatar.args = {
       multilanguage: true,
       avatar: 'readyplayerme-full',
       avatarURL:
-        'https://assets.memori.ai/api/v2/asset/692580d6-7b25-4ed0-84ce-82d5f4ac4270.glb#1762875775270',
+        'https://assets-staging.memori.ai/api/v2/asset/c0bb0d40-aebf-4e58-bfa0-45a4d7935153.glb#1763646903757',
       name: 'Layout Storybook',
       showShare: true,
     }),

package/src/components/layouts/chat.css

@@ -68,7 +68,7 @@
     height: 100%;
     max-height: 100%;
     flex: 1;
-    padding-bottom: 3rem;
+    /* padding-bottom: 1.5rem; */
     transition: all 0.05s ease-in-out;
 }
 

package/src/components/layouts/layouts.stories.tsx

@@ -11,7 +11,7 @@ import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContex
 
 const meta: Meta = {
   title: 'General/Layouts',
-  component: (args: Props) => <Memori {...args} engineURL="https://engine.memori.ai" apiURL="https://backend.memori.ai" baseURL="https://www.aisuru.com"    />,
+  component: (args: Props) => <Memori {...args}    />,
   argTypes: {},
   parameters: {
     controls: { expanded: true },
@@ -36,19 +36,20 @@ const DefaultLayout = Template.bind({});
 DefaultLayout.args = {
   memoriName: 'Layout Storybook',
   ownerUserName: 'andrea.patini',
-  memoriID: '157860e8-f014-43b3-a7c5-fb4a08c87025',
-  ownerUserID: '95753bbe-9e88-4799-ae35-dc060bc11c48',
-  tenantID: 'www.aisuru.com',
-  engineURL: 'https://engine.memori.ai/memori/v2',
-  apiURL: 'https://backend.memori.ai/api/v2',
-  baseURL: 'https://www.aisuru.com',
-  layout: 'FULL_CHAT',
+  memoriID: 'ae20fc5a-cc15-4db9-b7dd-2cd4a621b85e',
+  ownerUserID: '91dbc9ba-b684-4fbe-9828-b5980af6cda9',
+  tenantID: 'aisuru-staging.aclambda.online',
+  engineURL: 'https://engine-staging.memori.ai/memori/v2',
+  apiURL: 'https://backend-staging.memori.ai/api/v2',
+  layout: 'FULLPAGE',
   uiLang: 'IT',
   spokenLang: 'IT',
   integrationID: '0b1256c1-530c-4e67-aef8-36667c8887bb',
   autoStart: false,
   sessionID: '' as string | undefined,
-
+  showUpload: true,
+  showReasoning: false,
+  showLogin: true
 };
 
 

package/src/components/ui/Drawer.css

@@ -188,6 +188,14 @@ h2.memori-drawer--title {
   transition-duration: 200ms;
 }
 
+.duration-400 {
+  transition-duration: 400ms;
+}
+
+.duration-500 {
+  transition-duration: 500ms;
+}
+
 .opacity-0 {
   opacity: 0;
 }

package/src/components/ui/Drawer.tsx

@@ -40,13 +40,15 @@ export interface Props {
   confirmDialogMessage?: string;
   showBackdrop?: boolean;
   preventBackdropClose?: boolean;
+  enterDuration?: string;
+  leaveDuration?: string;
 }
 
 const Drawer: FC<Props> = ({
   title,
   open = false,
   data,
-  onClose = () => {},
+  onClose = () => { },
   children,
   width = '80%',
   footer,
@@ -63,6 +65,8 @@ const Drawer: FC<Props> = ({
   confirmDialogTitle,
   confirmDialogMessage,
   preventBackdropClose = false,
+  enterDuration = 'duration-300',
+  leaveDuration = 'duration-200',
 }: Props) => {
   const [originalData, setOriginalData] = useState<any>(null);
   const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
@@ -120,19 +124,19 @@ const Drawer: FC<Props> = ({
       <Transition appear show={open} as={React.Fragment}>
         <Dialog
           open={open}
-          onClose={preventBackdropClose ? () => {} : handleClose}
+          onClose={preventBackdropClose ? () => { } : handleClose}
           className={cx('memori-drawer', className)}
         >
           {showBackdrop && (
             <Transition.Child
-            as={React.Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
               <div className="memori-drawer--backdrop" />
             </Transition.Child>
           )}
@@ -141,10 +145,10 @@ const Drawer: FC<Props> = ({
               <Transition.Child
                 static
                 as={React.Fragment}
-                enter="ease-out duration-300"
+                enter={`ease-out ${enterDuration}`}
                 enterFrom={animated ? 'max-w-0 opacity-0' : 'opacity-0'}
                 enterTo="max-w-80 opacity-100"
-                leave="ease-in duration-200"
+                leave={`ease-in ${leaveDuration}`}
                 leaveFrom="max-w-80 opacity-100"
                 leaveTo={animated ? 'max-w-0 opacity-0' : 'opacity-0'}
               >