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

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Meta, Story } from '@storybook/react';
+import { AlertProvider, AlertViewport } from '@memori.ai/ui';
 import I18nWrapper from '../../I18nWrapper';
 import UploadButton from './UploadButton';
 import FilePreview from '../FilePreview/FilePreview';
@@ -10,7 +11,11 @@ import './UploadButton.css';
 const createMockClient = () => {
   return {
     backend: {
-      uploadAsset: async (fileName: string, fileDataUrl: string, authToken: string) => {
+      uploadAsset: async (
+        fileName: string,
+        fileDataUrl: string,
+        authToken: string
+      ) => {
         // Simulate API delay
         await new Promise(resolve => setTimeout(resolve, 1000));
         return {
@@ -23,7 +28,12 @@ const createMockClient = () => {
           },
         };
       },
-      uploadAssetUnlogged: async (fileName: string, fileDataUrl: string, memoriID: string, sessionID: string) => {
+      uploadAssetUnlogged: async (
+        fileName: string,
+        fileDataUrl: string,
+        memoriID: string,
+        sessionID: string
+      ) => {
         // Simulate API delay
         await new Promise(resolve => setTimeout(resolve, 1000));
         return {
@@ -52,7 +62,10 @@ const createMockClient = () => {
           },
         };
       },
-      postMediumDeselectedEvent: async (sessionID: string, mediumID: string) => {
+      postMediumDeselectedEvent: async (
+        sessionID: string,
+        mediumID: string
+      ) => {
         await new Promise(resolve => setTimeout(resolve, 500));
         return { success: true };
       },
@@ -66,8 +79,26 @@ interface UploadButtonProps {
   client?: ReturnType<typeof memoriApiClient>;
   sessionID?: string;
   isMediaAccepted?: boolean;
-  setDocumentPreviewFiles: (files: { name: string; id: string; content: string; type?: string; mediumID?: string; mimeType?: string; url?: string }[]) => void;
-  documentPreviewFiles: { name: string; id: string; content: string; type?: string; mediumID?: string; mimeType?: string; url?: string }[];
+  setDocumentPreviewFiles: (
+    files: {
+      name: string;
+      id: string;
+      content: string;
+      type?: string;
+      mediumID?: string;
+      mimeType?: string;
+      url?: string;
+    }[]
+  ) => void;
+  documentPreviewFiles: {
+    name: string;
+    id: string;
+    content: string;
+    type?: string;
+    mediumID?: string;
+    mimeType?: string;
+    url?: string;
+  }[];
   memoriID?: string;
 }
 
@@ -132,16 +163,18 @@ A unified upload button that supports both images and documents with the followi
 export default meta;
 
 // Create the template
-const Template: Story<UploadButtonProps> = (args) => {
-  const [documentPreviewFiles, setDocumentPreviewFiles] = useState<{
-    name: string;
-    id: string;
-    content: string;
-    type?: string;
-    mediumID?: string;
-    mimeType?: string;
-    url?: string;
-  }[]>([]);
+const Template: Story<UploadButtonProps> = args => {
+  const [documentPreviewFiles, setDocumentPreviewFiles] = useState<
+    {
+      name: string;
+      id: string;
+      content: string;
+      type?: string;
+      mediumID?: string;
+      mimeType?: string;
+      url?: string;
+    }[]
+  >([]);
 
   const removeFile = (id: string, mediumID?: string) => {
     setDocumentPreviewFiles(prev => prev.filter(file => file.id !== id));
@@ -149,67 +182,130 @@ const Template: Story<UploadButtonProps> = (args) => {
 
   return (
     <I18nWrapper>
-      <div
-        style={{
-          minHeight: '500px',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'flex-start',
-          justifyContent: 'flex-start',
-          padding: '20px',
-          border: '1px solid #eee',
-          borderRadius: '8px',
-          backgroundColor: '#f9f9f9',
-        }}
-      >
-        <div style={{ 
-          alignSelf: 'flex-end', 
-          marginBottom: '20px',
-          position: 'relative',
-        }}>
-          <UploadButton 
-            {...args} 
-            setDocumentPreviewFiles={setDocumentPreviewFiles} 
-            documentPreviewFiles={documentPreviewFiles}
-            {...(args.client ? { client: args.client } : { client: createMockClient() as any })}
-          />
-        </div>
-        
-        <div style={{ width: '100%', marginTop: '20px' }}>
-          <h3 style={{ marginBottom: '10px', fontSize: '16px', fontWeight: '600' }}>
-            Uploaded Files ({documentPreviewFiles.length})
-          </h3>
-          {documentPreviewFiles.length > 0 ? (
-            <FilePreview 
-              previewFiles={documentPreviewFiles} 
-              removeFile={removeFile}
+      <AlertProvider>
+        <div
+          style={{
+            minHeight: '500px',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            justifyContent: 'flex-start',
+            padding: '20px',
+            border: '1px solid #eee',
+            borderRadius: '8px',
+            backgroundColor: '#f9f9f9',
+          }}
+        >
+          <div
+            style={{
+              alignSelf: 'flex-end',
+              marginBottom: '20px',
+              position: 'relative',
+            }}
+          >
+            <UploadButton
+              {...args}
+              setDocumentPreviewFiles={setDocumentPreviewFiles}
+              documentPreviewFiles={documentPreviewFiles}
+              {...(args.client
+                ? { client: args.client }
+                : { client: createMockClient() as any })}
             />
-          ) : (
-            <p style={{ color: '#999', fontStyle: 'italic', fontSize: '14px' }}>
-              No files uploaded yet. Click the upload button, drag & drop files, or use Cmd+V / Ctrl+V to upload.
-            </p>
-          )}
-        </div>
+          </div>
+
+          <div style={{ width: '100%', marginTop: '20px' }}>
+            <h3
+              style={{
+                marginBottom: '10px',
+                fontSize: '16px',
+                fontWeight: '600',
+              }}
+            >
+              Uploaded Files ({documentPreviewFiles.length})
+            </h3>
+            {documentPreviewFiles.length > 0 ? (
+              <FilePreview
+                previewFiles={documentPreviewFiles}
+                removeFile={removeFile}
+              />
+            ) : (
+              <p
+                style={{ color: '#999', fontStyle: 'italic', fontSize: '14px' }}
+              >
+                No files uploaded yet. Click the upload button, drag & drop
+                files, or use Cmd+V / Ctrl+V to upload.
+              </p>
+            )}
+          </div>
 
-        <div style={{ 
-          marginTop: '30px', 
-          padding: '15px', 
-          backgroundColor: '#fff', 
-          borderRadius: '6px',
-          border: '1px solid #ddd',
-          fontSize: '13px',
-          color: '#666',
-        }}>
-          <strong>Try these features:</strong>
-          <ul style={{ marginTop: '8px', paddingLeft: '20px' }}>
-            <li>Click the upload button to open file chooser</li>
-            <li>Drag and drop files anywhere in this area</li>
-            <li>Press <kbd style={{ padding: '2px 6px', backgroundColor: '#f0f0f0', borderRadius: '3px' }}>Cmd+V</kbd> / <kbd style={{ padding: '2px 6px', backgroundColor: '#f0f0f0', borderRadius: '3px' }}>Ctrl+V</kbd> to open file chooser</li>
-            <li>Paste files from clipboard using <kbd style={{ padding: '2px 6px', backgroundColor: '#f0f0f0', borderRadius: '3px' }}>Cmd+V</kbd> / <kbd style={{ padding: '2px 6px', backgroundColor: '#f0f0f0', borderRadius: '3px' }}>Ctrl+V</kbd></li>
-            <li>Upload both images (.jpg, .jpeg, .png) and documents (.pdf, .txt, .json, .xlsx, .csv, .md)</li>
-          </ul>
+          <div
+            style={{
+              marginTop: '30px',
+              padding: '15px',
+              backgroundColor: '#fff',
+              borderRadius: '6px',
+              border: '1px solid #ddd',
+              fontSize: '13px',
+              color: '#666',
+            }}
+          >
+            <strong>Try these features:</strong>
+            <ul style={{ marginTop: '8px', paddingLeft: '20px' }}>
+              <li>Click the upload button to open file chooser</li>
+              <li>Drag and drop files anywhere in this area</li>
+              <li>
+                Press{' '}
+                <kbd
+                  style={{
+                    padding: '2px 6px',
+                    backgroundColor: '#f0f0f0',
+                    borderRadius: '3px',
+                  }}
+                >
+                  Cmd+V
+                </kbd>{' '}
+                /{' '}
+                <kbd
+                  style={{
+                    padding: '2px 6px',
+                    backgroundColor: '#f0f0f0',
+                    borderRadius: '3px',
+                  }}
+                >
+                  Ctrl+V
+                </kbd>{' '}
+                to open file chooser
+              </li>
+              <li>
+                Paste files from clipboard using{' '}
+                <kbd
+                  style={{
+                    padding: '2px 6px',
+                    backgroundColor: '#f0f0f0',
+                    borderRadius: '3px',
+                  }}
+                >
+                  Cmd+V
+                </kbd>{' '}
+                /{' '}
+                <kbd
+                  style={{
+                    padding: '2px 6px',
+                    backgroundColor: '#f0f0f0',
+                    borderRadius: '3px',
+                  }}
+                >
+                  Ctrl+V
+                </kbd>
+              </li>
+              <li>
+                Upload both images (.jpg, .jpeg, .png) and documents (.pdf,
+                .txt, .json, .xlsx, .csv, .md)
+              </li>
+            </ul>
+          </div>
         </div>
-      </div>
+      </AlertProvider>
     </I18nWrapper>
   );
 };
@@ -226,7 +322,8 @@ Default.args = {
 Default.parameters = {
   docs: {
     description: {
-      story: 'Default state with documents only (no images). Users can upload up to 5 documents. Click the button to open the file chooser directly.',
+      story:
+        'Default state with documents only (no images). Users can upload up to 5 documents. Click the button to open the file chooser directly.',
     },
   },
 };
@@ -242,7 +339,8 @@ AuthenticatedDocumentsOnly.args = {
 AuthenticatedDocumentsOnly.parameters = {
   docs: {
     description: {
-      story: 'Authenticated user can upload documents. The button opens the file chooser directly when clicked.',
+      story:
+        'Authenticated user can upload documents. The button opens the file chooser directly when clicked.',
     },
   },
 };
@@ -259,7 +357,8 @@ AuthenticatedWithImages.args = {
 AuthenticatedWithImages.parameters = {
   docs: {
     description: {
-      story: 'Full functionality: authenticated user can upload both images and documents. Supports drag & drop, Cmd+V / Ctrl+V shortcut, and paste from clipboard.',
+      story:
+        'Full functionality: authenticated user can upload both images and documents. Supports drag & drop, Cmd+V / Ctrl+V shortcut, and paste from clipboard.',
     },
   },
 };
@@ -293,7 +392,8 @@ WithExistingFiles.args = {
 WithExistingFiles.parameters = {
   docs: {
     description: {
-      story: 'Shows the upload button with existing files. The document count indicator shows 2/5. You can still upload more files up to the limit.',
+      story:
+        'Shows the upload button with existing files. The document count indicator shows 2/5. You can still upload more files up to the limit.',
     },
   },
 };
@@ -306,17 +406,48 @@ AtMaximumCapacity.args = {
   isMediaAccepted: true,
   memoriID: 'memori-123',
   documentPreviewFiles: [
-    { id: '1', name: 'doc1.pdf', content: 'Content 1', type: 'document', mimeType: 'application/pdf' },
-    { id: '2', name: 'doc2.pdf', content: 'Content 2', type: 'document', mimeType: 'application/pdf' },
-    { id: '3', name: 'doc3.pdf', content: 'Content 3', type: 'document', mimeType: 'application/pdf' },
-    { id: '4', name: 'doc4.pdf', content: 'Content 4', type: 'document', mimeType: 'application/pdf' },
-    { id: '5', name: 'doc5.pdf', content: 'Content 5', type: 'document', mimeType: 'application/pdf' },
+    {
+      id: '1',
+      name: 'doc1.pdf',
+      content: 'Content 1',
+      type: 'document',
+      mimeType: 'application/pdf',
+    },
+    {
+      id: '2',
+      name: 'doc2.pdf',
+      content: 'Content 2',
+      type: 'document',
+      mimeType: 'application/pdf',
+    },
+    {
+      id: '3',
+      name: 'doc3.pdf',
+      content: 'Content 3',
+      type: 'document',
+      mimeType: 'application/pdf',
+    },
+    {
+      id: '4',
+      name: 'doc4.pdf',
+      content: 'Content 4',
+      type: 'document',
+      mimeType: 'application/pdf',
+    },
+    {
+      id: '5',
+      name: 'doc5.pdf',
+      content: 'Content 5',
+      type: 'document',
+      mimeType: 'application/pdf',
+    },
   ],
 };
 AtMaximumCapacity.parameters = {
   docs: {
     description: {
-      story: 'Button is disabled when maximum capacity (5 documents) is reached. The count indicator shows 5/5.',
+      story:
+        'Button is disabled when maximum capacity (5 documents) is reached. The count indicator shows 5/5.',
     },
   },
 };
@@ -333,7 +464,8 @@ UnauthenticatedWithMediaAccepted.args = {
 UnauthenticatedWithMediaAccepted.parameters = {
   docs: {
     description: {
-      story: 'Unauthenticated user with media accepted. Images can be uploaded using unlogged API. Documents work normally.',
+      story:
+        'Unauthenticated user with media accepted. Images can be uploaded using unlogged API. Documents work normally.',
     },
   },
 };
@@ -353,7 +485,8 @@ MobileView.parameters = {
   },
   docs: {
     description: {
-      story: 'Mobile view simulation. All features work on mobile: tap to upload, drag & drop (on supported devices), and paste from clipboard.',
+      story:
+        'Mobile view simulation. All features work on mobile: tap to upload, drag & drop (on supported devices), and paste from clipboard.',
     },
   },
 };
@@ -370,7 +503,8 @@ DragAndDropDemo.args = {
 DragAndDropDemo.parameters = {
   docs: {
     description: {
-      story: 'Try dragging files from your file system into this area. The overlay will appear when dragging files over the chat area. Files are automatically categorized as images or documents.',
+      story:
+        'Try dragging files from your file system into this area. The overlay will appear when dragging files over the chat area. Files are automatically categorized as images or documents.',
     },
   },
-};
+};

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

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