@memori.ai/memori-react 7.26.0 → 7.26.1

package/src/components/ChatBubble/ChatBubble.stories.tsx

@@ -91,7 +91,6 @@ FromUserWithLink.args = {
   },
 };
 
-
 export const Initial = Template.bind({});
 Initial.args = {
   memori,
@@ -155,31 +154,6 @@ WithLongLink.args = {
   },
 };
 
-export const WithFunctionCache = Template.bind({});
-WithFunctionCache.args = {
-  memori,
-  tenant,
-  message: {
-    fromUser: false,
-    text: 'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
-    initial: false,
-    translatedText:
-      'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
-    generatedByAI: true,
-    media: [
-      {
-        functionCache: "true",
-        title: "Test",
-        content: "Test",
-        properties: {
-          functionCache: "true",
-        },
-      },
-    ],
-  },
-  showFunctionCache: true,
-};
-
 export const WithFeedbackButtons = Template.bind({});
 WithFeedbackButtons.args = {
   memori,
@@ -642,3 +616,206 @@ WithHTML.args = {
 `,
   },
 };
+
+// 9. Complex HTML Table
+export const ComplexHTMLTable = Template.bind({});
+ComplexHTMLTable.args = {
+  memori,
+  tenant,
+  message: {
+    fromUser: false,
+    text: `<table border="1" style="border-collapse: collapse; width: 100%;">
+    <thead>
+      <tr style="background-color: #f2f2f2;">
+        <th colspan="3" style="text-align: center; padding: 8px;">Project Timeline</th>
+      </tr>
+      <tr style="background-color: #f2f2f2;">
+        <th style="text-align: left; padding: 8px;">Phase</th>
+        <th style="text-align: left; padding: 8px;">Start Date</th>
+        <th style="text-align: left; padding: 8px;">End Date</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td style="padding: 8px;">Planning</td>
+        <td style="padding: 8px;">Jan 15, 2025</td>
+        <td style="padding: 8px;">Feb 28, 2025</td>
+      </tr>
+      <tr style="background-color: #f9f9f9;">
+        <td style="padding: 8px;">Development</td>
+        <td style="padding: 8px;">Mar 1, 2025</td>
+        <td style="padding: 8px;">Jun 30, 2025</td>
+      </tr>
+      <tr>
+        <td style="padding: 8px;">Testing</td>
+        <td style="padding: 8px;">Jul 1, 2025</td>
+        <td style="padding: 8px;">Aug 15, 2025</td>
+      </tr>
+      <tr style="background-color: #f9f9f9;">
+        <td style="padding: 8px;">Deployment</td>
+        <td style="padding: 8px;">Aug 16, 2025</td>
+        <td style="padding: 8px;">Sep 30, 2025</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr style="background-color: #f2f2f2;">
+        <td colspan="3" style="text-align: center; padding: 8px;">Total Duration: 8.5 months</td>
+      </tr>
+    </tfoot>
+  </table>`,
+    initial: false,
+  },
+};
+ComplexHTMLTable.parameters = {
+  docs: {
+    description: {
+      story:
+        'A message containing a complex HTML table that should trigger the loading spinner before rendering.',
+    },
+  },
+};
+
+//10. Long text message
+export const MediumLongTextMessage = Template.bind({});
+MediumLongTextMessage.args = {
+  memori,
+  tenant,
+  message: {
+    fromUser: false,
+    text: Array(100)
+      .fill(
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.'
+      )
+      .join('\n\n'),
+    initial: false,
+  },
+};
+
+export const LongTextMessage = Template.bind({});
+LongTextMessage.args = {
+  memori,
+  tenant,
+  message: {
+    fromUser: false,
+    text: Array(200)
+      .fill(
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.'
+      )
+      .join('\n\n'),
+    initial: false,
+  },
+};
+
+export const LongTextMessageWithHTML = Template.bind({});
+LongTextMessageWithHTML.args = {
+  memori,
+  tenant,
+  message: {
+    fromUser: false,
+    text:
+      Array(200)
+        .fill(
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.'
+        )
+        .join('\n\n') +
+      `
+    <div>
+    <div style="width: 30%; margin-bottom: 20px;">
+    <img src="https://www.e-stayon.com/images/thumbs/0244280_lenovo-ideapad-3-chromebook-15-intel-celeron-4gb-64gb_360.jpeg" style="width:100%">
+    <h3>Lenovo IdeaPad 3 Chromebook</h3>
+    <p>Intel Celeron, 15", 4GB RAM, 64GB</p>
+    <p>Prezzo: €194,88 (sconto 12% da €221,59)</p>
+    </div>`,
+  },
+};
+
+// 10. Message with an embedded helper function to show requiresFormatting detection
+export const FormattingDetectionDemo = Template.bind({});
+FormattingDetectionDemo.args = {
+  memori,
+  tenant,
+  message: {
+    fromUser: false,
+    text: 'This message demonstrates how the formatting detection works.\n\nBelow are some examples of content that will be detected as requiring formatting:\n\n1. HTML tags: <div>Example</div>\n2. Markdown tables: | Header | Content |\n3. Code blocks: ```javascript\nconst x = 1;\n```\n4. Math formulas: $E = mc^2$\n5. Tabbed data: Name\tAge\tLocation\n\nThe requiresFormatting function will detect these patterns and show a loading spinner.',
+    initial: false,
+  },
+};
+FormattingDetectionDemo.parameters = {
+  docs: {
+    description: {
+      story:
+        'A demonstration of different content patterns that trigger the loading spinner.',
+    },
+  },
+};
+
+export const HTMLTable = Template.bind({});
+HTMLTable.args = {
+  memori,
+  tenant,
+  message: {
+    fromUser: false,
+    text: `Ecco la lista formattata in HTML dei task e dei relativi assegnatari:
+<table>
+ <tr>
+ <th>Task</th>
+ <th>Assegnato a</th>
+ </tr>
+ <tr><td>Market Research</td><td>Alice</td></tr>
+ <tr><td>Content Creation</td><td>Bob</td></tr>
+ <tr><td>Social Media Planning</td><td>Charlie</td></tr>
+ <tr><td>Campaign Analysis</td><td>Daisy</td></tr>
+ <tr><td>Prototype Development</td><td>Ethan</td></tr>
+ <tr><td>Quality Assurance</td><td>Fiona</td></tr>
+ <tr><td>User Interface Design</td><td>Gabriel</td></tr>
+ <tr><td>Service Improvement</td><td>Hannah</td></tr>
+ <tr><td>Ticket Resolution</td><td>Ian</td></tr>
+ <tr><td>Customer Feedback</td><td>Julia</td></tr>
+ <tr><td>Budget Analysis</td><td>Kevin</td></tr>
+ <tr><td>Financial Reporting</td><td>Mark</td></tr>
+ <tr><td>Investment Planning</td><td>Mark</td></tr>
+ <tr><td>Market Trends Analysis</td><td>Nathan</td></tr>
+ <tr><td>Data Collection</td><td>Olivia</td></tr>
+ <tr><td>Research Paper Writing</td><td>Peter</td></tr>
+ <tr><td>Software Development</td><td>Quinn</td></tr>
+ <tr><td>Feature Enhancement</td><td>Rachel</td></tr>
+ <tr><td>Code Review</td><td>Sam</td></tr>
+ <tr><td>Manufacturing</td><td>Tim</td></tr>
+ <tr><td>Product Design</td><td>Uma</td></tr>
+ <tr><td>UX Research</td><td>Victor</td></tr>
+ <tr><td>API Development</td><td>Wendy</td></tr>
+ <tr><td>Database Management</td><td>Xavier</td></tr>
+ <tr><td>Cloud Infrastructure</td><td>Yara</td></tr>
+ <tr><td>Security Testing</td><td>Zack</td></tr>
+ <tr><td>Documentation</td><td>Adam</td></tr>
+ <tr><td>Technical Support</td><td>Beth</td></tr>
+ <tr><td>Project Management</td><td>Carl</td></tr>
+ <tr><td>Business Analysis</td><td>Diana</td></tr>
+ <tr><td>DevOps Engineering</td><td>Erik</td></tr>
+ <tr><td>Mobile Development</td><td>Faith</td></tr>
+ <tr><td>Frontend Development</td><td>George</td></tr>
+ <tr><td>Backend Development</td><td>Helen</td></tr>
+ <tr><td>System Architecture</td><td>Isaac</td></tr>
+ <tr><td>Data Analysis</td><td>Jane</td></tr>
+ <tr><td>Machine Learning</td><td>Kyle</td></tr>
+ <tr><td>AI Development</td><td>Lisa</td></tr>
+ <tr><td>Network Security</td><td>Mike</td></tr>
+ <tr><td>Performance Testing</td><td>Nina</td></tr>
+ <tr><td>Load Testing</td><td>Oscar</td></tr>
+ <tr><td>Penetration Testing</td><td>Penny</td></tr>
+ <tr><td>Automation Testing</td><td>Quentin</td></tr>
+ <tr><td>Release Management</td><td>Rose</td></tr>
+ <tr><td>Configuration Management</td><td>Steve</td></tr>
+ <tr><td>Change Management</td><td>Tina</td></tr>
+ <tr><td>Risk Management</td><td>Ulysses</td></tr>
+ <tr><td>Resource Planning</td><td>Violet</td></tr>
+ <tr><td>Capacity Planning</td><td>Walter</td></tr>
+ <tr><td>Strategic Planning</td><td>Xena</td></tr>
+ <tr><td>Operations Management</td><td>Yuki</td></tr>
+ <tr><td>Quality Management</td><td>Zara</td></tr>
+</table>
+
+Ho mostrato i primi 20 task per brevità. La tabella include il nome del task e la persona assegnata.`,
+    initial: false,
+  },
+};

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;
+}