@memori.ai/memori-react 7.26.0 → 7.26.2

package/src/components/ChatBubble/ChatBubble.tsx

@@ -102,11 +102,8 @@ const ChatBubble: React.FC<Props> = ({
   const functionCacheData = message.media?.find(
     m => m.properties?.functionCache === 'true'
   );
-
-  // Render MathJax whenever message content changes
   useLayoutEffect(() => {
     if (typeof window !== 'undefined' && !message.fromUser) {
-      // Allow a short delay for the DOM to update
       const timer = setTimeout(() => {
         if (window.MathJax && window.MathJax.typesetPromise) {
           try {
@@ -114,9 +111,21 @@ const ChatBubble: React.FC<Props> = ({
               '.memori-chat--bubble-content'
             );
             if (elements.length > 0) {
+              // Salva la posizione di scroll corrente
+              const scrollContainer = document.querySelector('.memori-chat--history');
+              const currentScrollTop = scrollContainer?.scrollTop || 0;
+              const currentScrollHeight = scrollContainer?.scrollHeight || 0;
+              
               window.MathJax.typesetPromise([
                 '.memori-chat--bubble-content',
-              ]).catch(err =>
+              ]).then(() => {
+                // Ripristina la posizione di scroll dopo il rendering MathJax
+                if (scrollContainer) {
+                  const newScrollHeight = scrollContainer.scrollHeight;
+                  const heightDifference = newScrollHeight - currentScrollHeight;
+                  scrollContainer.scrollTop = currentScrollTop + heightDifference;
+                }
+              }).catch(err =>
                 console.error('MathJax typesetting failed:', err)
               );
             }
@@ -125,16 +134,10 @@ const ChatBubble: React.FC<Props> = ({
           }
         }
       }, 100);
-
+  
       return () => clearTimeout(timer);
     }
   }, [message.text, message.fromUser, renderedText]);
-
-  console.log(
-    'message',
-    message.media?.find(m => m.properties?.functionCache)
-  );
-
   return (
     <>
       {(message.initial || isFirst) && (

package/src/components/MediaWidget/LinkItemWidget.css

@@ -1,6 +1,7 @@
 .memori-link-items--grid {
     display: grid;
     padding: 1rem;
+    direction: rtl;
     grid-auto-flow: dense;
     grid-gap: 1rem;
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

package/src/components/MediaWidget/MediaItemWidget.css

@@ -1,6 +1,7 @@
 .memori-media-items--grid {
     display: grid;
     padding: 1rem;
+    direction: rtl;
     grid-auto-flow: dense;
     grid-gap: 1rem;
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
@@ -143,3 +144,12 @@ a.memori-media-item--link {
     border-color: #fff;
     color: #fff;
 }
+
+.memori-media-item-preview--modal {
+    z-index: 10000;
+    width: 100%;
+    max-width: 80%;
+    height: 100%;
+    max-height: 80%;
+    background: #fff;
+}

package/src/components/MediaWidget/MediaItemWidget.tsx

@@ -12,9 +12,10 @@ import FilePdf from '../icons/FilePdf';
 import FileExcel from '../icons/FileExcel';
 import FileWord from '../icons/FileWord';
 import { Transition } from '@headlessui/react';
+import { stripHTML } from '../../helpers/utils';
 
 export interface Props {
-  items: Medium[];
+  items: (Medium & { type?: string })[];
   sessionID?: string;
   tenantID?: string;
   translateTo?: string;
@@ -35,7 +36,7 @@ export const RenderMediaItem = ({
   customMediaRenderer,
 }: {
   isChild?: boolean;
-  item: Medium;
+  item: Medium & { type: string };
   sessionID?: string;
   tenantID?: string;
   preview?: boolean;
@@ -44,6 +45,8 @@ export const RenderMediaItem = ({
   onClick?: (mediumID: string) => void;
   customMediaRenderer?: (mimeType: string) => JSX.Element | null;
 }) => {
+  const [modalOpen, setModalOpen] = useState(false);
+
   const url = getResourceUrl({
     resourceURI: item.url,
     sessionID,
@@ -58,6 +61,128 @@ export const RenderMediaItem = ({
     return customRenderer;
   }
 
+  const renderMediaContent = (item: Medium) => {
+    switch (item.mimeType) {
+      case 'image/jpeg':
+      case 'image/png':
+      case 'image/jpg':
+      case 'image/gif':
+        return isImageRGB ? (
+          <picture className="memori-media-item--figure">
+            <div
+              className="memori-media-item--rgb-item"
+              style={{
+                backgroundColor: item.url,
+              }}
+            />
+            {item.title && (
+              <figcaption className="memori-media-item--figure-caption">
+                {item.title}
+              </figcaption>
+            )}
+          </picture>
+        ) : (
+          <picture className="memori-media-item--figure">
+            {!preview && (
+              <source
+                srcSet={[url, item.url, item.content].join(', ')}
+                type={item.mimeType}
+              />
+            )}
+            <img
+              alt={item.title}
+              src="data:image/png;base64,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"
+            />
+            {item.title && (
+              <figcaption className="memori-media-item--figure-caption">
+                {item.title}
+              </figcaption>
+            )}
+          </picture>
+        );
+
+      case 'application/msword':
+      case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+        return <FileWord className="memori-media-item--icon" />;
+
+      case 'application/vnd.ms-excel':
+      case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+        return <FileExcel className="memori-media-item--icon" />;
+
+      case 'application/pdf':
+        return <FilePdf className="memori-media-item--icon" />;
+
+      case 'video/mp4':
+      case 'video/quicktime':
+      case 'video/avi':
+      case 'video/mpeg':
+        return (
+          <video
+            style={{ width: '100%', height: '100%' }}
+            controls
+            src={url}
+            title={item.title}
+          >
+            {item.mimeType === 'video/quicktime' && (
+              <source src={item.url} type="video/mp4" />
+            )}
+            <source src={item.url} type={item.mimeType} />
+            Your browser does not support this video format.
+            <br />
+            <a href={item.url} target="_blank" rel="noopener noreferrer">
+              Download the video
+            </a>
+          </video>
+        );
+
+      case 'audio/mpeg3':
+      case 'audio/wav':
+      case 'audio/mpeg':
+        return (
+          <audio style={{ width: '100%', height: '100%' }} controls src={url} />
+        );
+
+      case 'model/gltf-binary':
+        return (
+          <ModelViewer
+            src={url}
+            alt=""
+            poster="data:image/png;base64,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"
+          />
+        );
+
+      default:
+        return <File className="memori-media-item--icon" />;
+    }
+  };
+
+  if (!item.url && item?.type === 'document' && item.content) {
+    return (
+      <>
+        <a
+          className="memori-media-item--link"
+          href="#"
+          onClick={e => {
+            e.preventDefault();
+            setModalOpen(true);
+          }}
+          title={item.title}
+        >
+          <Card hoverable cover={renderMediaContent(item)} title={item.title} />
+        </a>
+
+        <Modal
+          open={modalOpen}
+          onClose={() => setModalOpen(false)}
+          title={item.title}
+          className="memori-media-item-preview--modal"
+        >
+          <pre>{stripHTML(item.content)}</pre>
+        </Modal>
+      </>
+    );
+  }
+
   const isImageRGB =
     item.url?.startsWith('rgb(') || item.url?.startsWith('rgba(');
 
@@ -70,21 +195,7 @@ export const RenderMediaItem = ({
         <Card
           hoverable
           className="memori-media-item--card memori-media-item--image"
-          cover={
-            <picture className="memori-media-item--figure">
-              <div
-                className="memori-media-item--rgb-item"
-                style={{
-                  backgroundColor: item.url,
-                }}
-              />
-              {item.title && (
-                <figcaption className="memori-media-item--figure-caption">
-                  {item.title}
-                </figcaption>
-              )}
-            </picture>
-          }
+          cover={renderMediaContent(item)}
         />
       ) : (
         <a
@@ -106,65 +217,15 @@ export const RenderMediaItem = ({
           <Card
             hoverable
             className="memori-media-item--card memori-media-item--image"
-            cover={
-              <picture className="memori-media-item--figure">
-                {!preview && (
-                  <source
-                    srcSet={[url, item.url, item.content].join(', ')}
-                    type={item.mimeType}
-                  />
-                )}
-                <img
-                  alt={item.title}
-                  src="data:image/png;base64,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"
-                />
-                {item.title && (
-                  <figcaption className="memori-media-item--figure-caption">
-                    {item.title}
-                  </figcaption>
-                )}
-              </picture>
-            }
+            cover={renderMediaContent(item)}
           />
         </a>
       );
 
     case 'application/msword':
     case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
-      return (
-        <a
-          className="memori-media-item--link"
-          href={url}
-          target="_blank"
-          rel="noopener noreferrer"
-          title={item.title}
-        >
-          <Card
-            hoverable
-            cover={<FileWord className="memori-media-item--icon" />}
-            title={item.title}
-          />
-        </a>
-      );
-
     case 'application/vnd.ms-excel':
     case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
-      return (
-        <a
-          className="memori-media-item--link"
-          href={url}
-          target="_blank"
-          rel="noopener noreferrer"
-          title={item.title}
-        >
-          <Card
-            hoverable
-            cover={<FileExcel className="memori-media-item--icon" />}
-            title={item.title}
-          />
-        </a>
-      );
-
     case 'application/pdf':
       return (
         <a
@@ -174,11 +235,7 @@ export const RenderMediaItem = ({
           rel="noopener noreferrer"
           title={item.title}
         >
-          <Card
-            hoverable
-            cover={<FilePdf className="memori-media-item--icon" />}
-            title={item.title}
-          />
+          <Card hoverable cover={renderMediaContent(item)} title={item.title} />
         </a>
       );
 
@@ -203,28 +260,7 @@ export const RenderMediaItem = ({
           rel="noopener noreferrer"
           title={item.title}
         >
-          <Card
-            hoverable
-            cover={
-              <video
-                style={{ width: '100%', height: '100%' }}
-                controls
-                src={url}
-                title={item.title}
-              >
-                {item.mimeType === 'video/quicktime' && (
-                  <source src={item.url} type="video/mp4" />
-                )}
-                <source src={item.url} type={item.mimeType} />
-                Your browser does not support this video format.
-                <br />
-                <a href={item.url} target="_blank" rel="noopener noreferrer">
-                  Download the video
-                </a>
-              </video>
-            }
-            title={item.title}
-          />
+          <Card hoverable cover={renderMediaContent(item)} title={item.title} />
         </a>
       );
 
@@ -239,28 +275,12 @@ export const RenderMediaItem = ({
           rel="noopener noreferrer"
           title={item.title}
         >
-          <Card
-            hoverable
-            cover={
-              <audio
-                style={{ width: '100%', height: '100%' }}
-                controls
-                src={url}
-              />
-            }
-            title={item.title}
-          />
+          <Card hoverable cover={renderMediaContent(item)} title={item.title} />
         </a>
       );
 
     case 'model/gltf-binary':
-      return (
-        <ModelViewer
-          src={url}
-          alt=""
-          poster="data:image/png;base64,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"
-        />
-      );
+      return <Card hoverable cover={renderMediaContent(item)} />;
 
     default:
       return (
@@ -271,11 +291,7 @@ export const RenderMediaItem = ({
           rel="noopener noreferrer"
           title={item.title}
         >
-          <Card
-            hoverable
-            cover={<File className="memori-media-item--icon" />}
-            title={item.title}
-          />
+          <Card hoverable cover={renderMediaContent(item)} title={item.title} />
         </a>
       );
   }
@@ -373,6 +389,7 @@ const MediaItemWidget: React.FC<Props> = ({
                   title: item.title,
                   url: item.url,
                   content: item.content,
+                  type: 'document',
                 }}
                 customMediaRenderer={customMediaRenderer}
               />
@@ -422,6 +439,7 @@ const MediaItemWidget: React.FC<Props> = ({
               title: openModalMedium.title,
               url: openModalMedium.url,
               content: openModalMedium.content,
+              type: 'document',
             }}
             customMediaRenderer={customMediaRenderer}
           />

package/src/components/MediaWidget/MediaWidget.test.tsx

@@ -7,11 +7,12 @@ import { render } from '@testing-library/react';
 import { medium } from '../../mocks/data';
 import MediaWidget from './MediaWidget';
 
-const linkMedium: Medium = {
+const linkMedium: Medium & { type?: string } = {
   mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
   mimeType: 'text/html',
   title: 'Memori Srl',
   url: 'https://memori.ai/en',
+  type: 'document',
 };
 
 const hint: TranslatedHint = {

package/src/components/MediaWidget/MediaWidget.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 export interface Props {
   hints?: TranslatedHint[];
   links?: Medium[];
-  media?: Medium[];
+  media?: (Medium & { type?: string })[];
   simulateUserPrompt?: (item: string, translatedItem?: string) => void;
   sessionID?: string;
   baseUrl?: string;

package/src/components/UploadButton/UploadButton.tsx

@@ -52,9 +52,13 @@ const UploadButton: React.FC<UploadManagerProps> = ({
   const imageRef = useRef<HTMLDivElement>(null);
 
   // Calculate image count and remaining slots
-  const currentImageCount = documentPreviewFiles.filter(file => file.type === 'image').length;
+  const currentImageCount = documentPreviewFiles.filter(
+    file => file.type === 'image'
+  ).length;
   const remainingSlots = MAX_IMAGES - currentImageCount;
-  const currentDocumentCount = documentPreviewFiles.filter(file => file.type === 'document').length;
+  const currentDocumentCount = documentPreviewFiles.filter(
+    file => file.type === 'document'
+  ).length;
   const remainingDocumentSlots = MAX_DOCUMENTS - currentDocumentCount;
   const hasReachedImageLimit = remainingSlots <= 0;
   const hasReachedDocumentLimit = remainingDocumentSlots <= 0;
@@ -111,16 +115,25 @@ const UploadButton: React.FC<UploadManagerProps> = ({
     // For simplicity, we only take the first file
     const file = files[0];
 
-    // Format content with XML tags to improve readability for LLM
-    const formattedContent = `<Documento allegato al messaggio: ${file.name}>
-${file.content}
-</Documento allegato al messaggio: ${file.name}>`;
+    // 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;');
+    };
 
+    // ✅ MIGLIORE SOLUZIONE: Tag XML valido con attributi chiari
+    const escapedFileName = escapeAttributeValue(file.name);
+    const formattedContent = `<document_attachment filename="${escapedFileName}" type="${file.mimeType}">
+${file.content}
+</document_attachment>`;
     //keep just the images in the documentPreviewFiles
     const imageFiles = documentPreviewFiles.filter(
       (file: any) => file.type === 'image'
     );
-
     // Replace existing file with new one
     setDocumentPreviewFiles([
       {
@@ -156,26 +169,28 @@ ${file.content}
       closeMenu();
       return;
     }
-    
+
     if (!isMediaAccepted) {
       addError({
-        message: t('upload.mediaNotAccepted') ?? 'Media uploads are not accepted',
+        message:
+          t('upload.mediaNotAccepted') ?? 'Media uploads are not accepted',
         severity: 'info',
       });
       closeMenu();
       return;
     }
-    
+
     if (hasReachedImageLimit) {
       addError({
-        message: t('upload.maxImagesReached', { max: MAX_IMAGES }) ?? 
+        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) {
@@ -213,13 +228,14 @@ ${file.content}
           <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 }
-        )}>
+        <div
+          className={cx('memori--image-count', {
+            'memori--image-count-full': hasReachedImageLimit,
+          })}
+        >
           {currentImageCount}/{MAX_IMAGES}
         </div>
       )}
@@ -228,9 +244,8 @@ ${file.content}
       {menuOpen && (
         <div className="memori--upload-menu" ref={menuRef}>
           <div
-             className={cx('memori--upload-menu-item', {
-              'memori--upload-menu-item--disabled':
-                !authToken || hasReachedDocumentLimit,
+            className={cx('memori--upload-menu-item', {
+              'memori--upload-menu-item--disabled': hasReachedDocumentLimit,
             })}
             onClick={handleDocumentClick}
           >
@@ -241,8 +256,9 @@ ${file.content}
                 <span className="memori--upload-slots-info">
                   {hasReachedDocumentLimit
                     ? ` (${t('upload.maxReached') ?? 'Max reached'})`
-                    : ` (${remainingDocumentSlots} ${t('upload.remaining') ?? 'remaining'})`
-                  }
+                    : ` (${remainingDocumentSlots} ${
+                        t('upload.remaining') ?? 'remaining'
+                      })`}
                 </span>
               )}
             </span>
@@ -251,19 +267,21 @@ ${file.content}
           <div
             className={cx('memori--upload-menu-item', {
               'memori--upload-menu-item--disabled':
-                !isMediaAccepted || !authToken || hasReachedImageLimit,
+                !authToken || !isMediaAccepted || hasReachedImageLimit,
             })}
             onClick={handleImageClick}
             title={
               !authToken
                 ? t('upload.loginRequired') ?? 'Login Required'
                 : !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)`
+                ? 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" />
@@ -273,8 +291,9 @@ ${file.content}
                 <span className="memori--upload-slots-info">
                   {hasReachedImageLimit
                     ? ` (${t('upload.maxReached') ?? 'Max reached'})`
-                    : ` (${remainingSlots} ${t('upload.remaining') ?? 'remaining'})`
-                  }
+                    : ` (${remainingSlots} ${
+                        t('upload.remaining') ?? 'remaining'
+                      })`}
                 </span>
               )}
             </span>
@@ -284,7 +303,7 @@ ${file.content}
 
       {/* Hidden components */}
       <div className="memori--hidden-uploader" ref={documentRef}>
-        <UploadDocuments 
+        <UploadDocuments
           setDocumentPreviewFiles={handleDocumentFiles}
           maxDocuments={MAX_DOCUMENTS}
           documentPreviewFiles={documentPreviewFiles}
@@ -327,7 +346,10 @@ ${file.content}
           <Alert
             type="info"
             title={t('upload.loginRequired') ?? 'Login Required'}
-            description={t('upload.loginRequiredDescription') ?? 'Please login to upload images'}
+            description={
+              t('upload.loginRequiredDescription') ??
+              'Please login to upload images'
+            }
             width="350px"
             onClose={closeMenu}
           />
@@ -337,4 +359,4 @@ ${file.content}
   );
 };
 
-export default UploadButton;
+export default UploadButton;