@memori.ai/memori-react 8.8.3 → 8.8.4

package/src/components/MediaWidget/MediaItemWidget.css

@@ -3,7 +3,7 @@
     padding: 1rem;
     grid-auto-flow: dense;
     grid-gap: 1rem;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 }
 
 /* Allineamento media per messaggi dell'utente */
@@ -119,8 +119,8 @@ a.memori-media-item--link {
 }
 
 .memori-media-item--modal .memori-modal--panel {
-    width: 75vw;
-    height: 85vh;
+    max-width: 75vw;
+    max-height: 85vh;
     -webkit-backdrop-filter: blur(var(--memori-blur-background, 10px));
     backdrop-filter: blur(var(--memori-blur-background, 10px));
     background: rgba(0, 0, 0, 0.25);
@@ -165,18 +165,16 @@ a.memori-media-item--link {
 }
 
 .memori-media-item-preview--content {
-  min-height: 50vh;
-  max-height: 50vh;
-  padding: 1rem;
-  border: 1px solid var(--memori-border);
-  border-radius: 0.5rem;
-  background-color: var(--memori-background-color, #fff);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  overflow-y: auto;
-}
-
-.memori-media-item--snippet{
-    min-width: 450px;
+    display: flex;
+    overflow: hidden;
+    min-height: 60vh;
+    max-height: 80vh;
+    flex-direction: column;
+    padding: 0;
+    border: none;
+    border-radius: 0.75rem;
+    background-color: var(--memori-background-color, #fff);
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
 .memori-media-item-preview--text {
@@ -266,29 +264,208 @@ a.memori-media-item--link {
     text-decoration: none;
 }
 
+.memori-media-item--snippet {
+    min-width: 450px;
+    max-width: 100%;
+}
+
+.memori-media-item--snippet-direct {
+    display: flex;
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+/* Enhanced snippet grid layout */
+.memori-media-items--grid .memori-media-item--snippet-direct {
+    max-width: none;
+    grid-column: 1 / -1;
+}
+
+.memori-media-items--grid .memori-media-item--snippet {
+    min-width: 100%;
+    max-width: 100%;
+}
+
+.memori-media-item--snippet-direct .memori-media-item--snippet {
+    overflow: hidden;
+    width: 100%;
+    min-width: auto;
+    border: 1px solid var(--memori-border, #e5e7eb);
+    border-radius: 0.75rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
+    transition: all 0.2s ease;
+}
+
+.memori-media-item--snippet-direct .memori-media-item--snippet:hover {
+    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.15);
+    transform: translateY(-1px);
+}
+
+.memori-media-item--snippet-direct .memori-snippet {
+    border-radius: 0.75rem;
+    background: #f8fafc;
+}
+
+.memori-media-item--snippet-direct .memori-snippet pre {
+    padding: 1rem;
+    border: none;
+    margin: 0;
+    background: #f8fafc;
+    font-size: 0.875rem;
+    line-height: 1.6;
+    overflow-x: auto;
+}
+
+.memori-media-item--snippet-direct .memori-snippet code {
+    padding: 0;
+    border-radius: 0;
+    background: transparent;
+    color: #374151;
+    font-family: 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.memori-media-item--snippet-direct .memori-snippet--copy-button {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    background: rgba(0, 0, 0, 0.05);
+    transition: all 0.2s ease;
+}
+
+
+.memori-media-item--snippet-direct .memori-snippet--copy-button svg {
+    width: 14px;
+    height: 14px;
+    color: #6b7280;
+}
+
+.memori-media-item--snippet-direct .memori-snippet--caption {
+    padding: 0.75rem 1rem;
+    border-top: 1px solid rgba(0, 0, 0, 0.05);
+    background: rgba(0, 0, 0, 0.02);
+    color: #6b7280;
+    font-size: 0.8rem;
+    font-weight: 500;
+}
+
+/* Enhanced snippet styles for modal */
+.memori-media-item-preview--content .memori-snippet {
+    display: flex;
+    overflow: hidden;
+    height: 100%;
+    flex-direction: column;
+    border-radius: 0.75rem;
+    background: #1e1e1e;
+}
+
+.memori-media-item-preview--content .memori-snippet--content {
+    display: flex;
+    overflow: hidden;
+    flex: 1;
+    flex-direction: column;
+}
+
+.memori-media-item-preview--content .memori-snippet pre {
+    overflow: auto;
+    flex: 1;
+    padding: 1.5rem;
+    border: none;
+    border-radius: 0;
+    margin: 0;
+    background: #1e1e1e;
+    font-size: 0.875rem;
+    line-height: 1.6;
+}
+
+.memori-media-item-preview--content .memori-snippet code {
+    padding: 0;
+    border-radius: 0;
+    background: transparent;
+    font-family: 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.memori-media-item-preview--content .memori-snippet--copy-button {
+    position: absolute;
+    z-index: 10;
+    top: 1rem;
+    right: 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+    background: rgba(255, 255, 255, 0.1);
+    transition: all 0.2s ease;
+}
+
+
+.memori-media-item-preview--content .memori-snippet--copy-button:hover {
+    border-color: rgba(255, 255, 255, 0.3);
+    background: rgba(255, 255, 255, 0.2);
+    transform: scale(1.05);
+}
+
+.memori-media-item-preview--content .memori-snippet--copy-button svg {
+    width: 16px;
+    height: 16px;
+    color: #fff;
+}
+
+.memori-media-item-preview--content .memori-snippet--caption {
+    padding: 1rem 1.5rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.1);
+    color: #ccc;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
 /* Responsive design */
 @media (max-width: 768px) {
-  .memori-media-items--grid {
-    padding: 0.75rem;
-    grid-gap: 0.75rem;
-    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-  }
-  
-  .memori-media-item--figure-caption {
-    padding: 0.375rem 0.5rem;
-    font-size: 0.65rem;
-    line-height: 1.2;
-  }
-  
-  .memori-media-item-preview--text {
-    font-size: 0.8rem;
-  }
-  
-  .memori-media-item-preview--text pre {
-    padding: 0.75rem;
-  }
-  
-  .memori-media-item-preview--content {
-    max-height: 40vh;
-  }
-}
+    .memori-media-items--grid {
+        padding: 0.75rem;
+        grid-gap: 0.75rem;
+        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    }
+
+    .memori-media-item--figure-caption {
+        padding: 0.375rem 0.5rem;
+        font-size: 0.65rem;
+        line-height: 1.2;
+    }
+
+    .memori-media-item-preview--text {
+        font-size: 0.8rem;
+    }
+
+    .memori-media-item-preview--text pre {
+        padding: 0.75rem;
+    }
+
+    .memori-media-item-preview--content {
+        min-height: 40vh;
+        max-height: 50vh;
+    }
+
+    /* Mobile snippet improvements */
+    .memori-media-item--snippet-direct {
+        margin-bottom: 0.75rem;
+    }
+
+    .memori-media-item--snippet-direct .memori-snippet pre {
+        padding: 0.75rem;
+        font-size: 0.8rem;
+    }
+
+    .memori-media-item--snippet-direct .memori-snippet--copy-button {
+        top: 0.5rem;
+        right: 0.5rem;
+        width: 28px !important;
+        height: 28px !important;
+    }
+
+    .memori-media-item--snippet-direct .memori-snippet--copy-button svg {
+        width: 12px;
+        height: 12px;
+    }
+
+    .memori-media-item-preview--content .memori-snippet pre {
+        padding: 1rem;
+        font-size: 0.8rem;
+    }
+}

package/src/components/MediaWidget/MediaItemWidget.stories.tsx

@@ -113,73 +113,160 @@ JavaScript.args = {
       mediumID: '65ca4a6d-f20b-402e-9d79-5e470f247928',
       mimeType: 'text/javascript',
       title: 'JavaScript',
-      content: `[
-  {
-    "name": "France",
-    "capital": "Paris",
-    "population": 67364357,
-    "area": 551695,
-    "currency": "Euro",
-    "languages": [
-      "French"
-    ],
-    "region": "Europe",
-    "subregion": "Western Europe",
-    "flag": "https://upload.wikimedia.org/wikipedia/commons/c/c3/Flag_of_France.svg"
-  },
-  {
-    "name": "Germany",
-    "capital": "Berlin",
-    "population": 83240525,
-    "area": 357022,
-    "currency": "Euro",
-    "languages": [
-      "German"
-    ],
-    "region": "Europe",
-    "subregion": "Western Europe",
-    "flag": "https://upload.wikimedia.org/wikipedia/commons/b/ba/Flag_of_Germany.svg"
-  },
-  {
-    "name": "United States",
-    "capital": "Washington, D.C.",
-    "population": 331893745,
-    "area": 9833517,
-    "currency": "USD",
-    "languages": [
-      "English"
-    ],
-    "region": "Americas",
-    "subregion": "Northern America",
-    "flag": "https://upload.wikimedia.org/wikipedia/commons/a/a4/Flag_of_the_United_States.svg"
-  },
-  {
-    "name": "Belgium",
-    "capital": "Brussels",
-    "population": 11589623,
-    "area": 30528,
-    "currency": "Euro",
-    "languages": [
-      "Flemish",
-      "French",
-      "German"
-    ],
-    "region": "Europe",
-    "subregion": "Western Europe",
-    "flag": "https://upload.wikimedia.org/wikipedia/commons/6/65/Flag_of_Belgium.svg"
-    ]`,
+      content: `{
+        "name": "John Doe",
+        "age": 43,
+        "city": "New York",
+        "items": [
+          {
+            "name": "Item 1",
+            "price": 10
+          },
+          {
+            "name": "Item 2",
+            "price": 20
+          }
+        ]
+      }
+        `,
+    },
+  ],
+};
+
+export const ShortCodeSnippets = Template.bind({});
+ShortCodeSnippets.args = {
+  items: [
+    {
+      mediumID: 'short-js-1',
+      mimeType: 'text/javascript',
+      title: 'Short JS Function',
+      content: 'function greet() {\n  return "Hello World!";\n}',
+    },
+    {
+      mediumID: 'short-python-1',
+      mimeType: 'text/python',
+      title: 'Python Print',
+      content: 'print("Hello, World!")',
+    },
+    {
+      mediumID: 'short-css-1',
+      mimeType: 'text/css',
+      title: 'CSS Rule',
+      content: 'body {\n  background: #f0f0f0;\n  color: #333;\n}',
+    },
+  ],
+};
+
+export const LongCodeSnippets = Template.bind({});
+LongCodeSnippets.args = {
+  items: [
+    {
+      mediumID: 'long-js-1',
+      mimeType: 'text/javascript',
+      title: 'Long JavaScript Function',
+      content: `function processData(data) {
+  // Validate input
+  if (!data || typeof data !== 'object') {
+    throw new Error('Invalid data provided');
+  }
+  
+  // Process each item
+  return data.map(item => {
+    const processed = {
+      id: item.id,
+      name: item.name.toUpperCase(),
+      value: item.value * 2,
+      timestamp: new Date().toISOString()
+    };
+    
+    return processed;
+  });
+}`,
+    },
+    {
+      mediumID: 'long-python-1',
+      mimeType: 'text/python',
+      title: 'Python Class',
+      content: `class DataProcessor:
+    def __init__(self, config):
+        self.config = config
+        self.cache = {}
+    
+    def process(self, data):
+        if data in self.cache:
+            return self.cache[data]
+        
+        result = self._transform(data)
+        self.cache[data] = result
+        return result
+    
+    def _transform(self, data):
+        # Complex transformation logic
+        return data.upper()`,
+    },
+  ],
+};
+
+export const MixedSnippets = Template.bind({});
+MixedSnippets.args = {
+  items: [
+    {
+      mediumID: 'short-1',
+      mimeType: 'text/javascript',
+      title: 'Quick Function',
+      content: 'const add = (a, b) => a + b;',
+    },
+    {
+      mediumID: 'long-1',
+      mimeType: 'text/javascript',
+      title: 'Complex Component',
+      content: `import React, { useState, useEffect } from 'react';
+
+const MyComponent = ({ data, onUpdate }) => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  
+  useEffect(() => {
+    if (data) {
+      setLoading(true);
+      processData(data)
+        .then(result => {
+          onUpdate(result);
+          setLoading(false);
+        })
+        .catch(err => {
+          setError(err.message);
+          setLoading(false);
+        });
+    }
+  }, [data, onUpdate]);
+  
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error}</div>;
+  
+  return <div>Data processed successfully</div>;
+};
+
+export default MyComponent;`,
+    },
+    {
+      mediumID: 'short-2',
+      mimeType: 'text/css',
+      title: 'Simple Style',
+      content: '.button {\n  padding: 10px;\n  background: blue;\n}',
     },
   ],
 };
 
-export const longTXT = Template.bind({});
-longTXT.args = {
+export const LongTXT = Template.bind({});
+LongTXT.args = {
   items: [
     {
       mediumID: '65ca4a6d-f20b-402e-9d79-5e470f247928',
       mimeType: 'text/plain',
       title: 'Long Text',
-      content: '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.',
+      content:
+        '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.',
     },
   ],
 };

package/src/components/MediaWidget/MediaItemWidget.tsx

@@ -187,7 +187,7 @@ export const RenderMediaItem = ({
           widthMd="90%"
         >
           <div className="memori-media-item-preview--content">
-            <Snippet medium={item} showCopyButton={true} />
+            <Snippet  medium={item} showCopyButton={true} />
           </div>
         </Modal>
       </>
@@ -368,6 +368,12 @@ export const RenderMediaItem = ({
   }
 };
 
+// Helper function to count lines in content
+const countLines = (content: string | undefined): number => {
+  if (!content) return 0;
+  return content.split('\n').length;
+};
+
 export const RenderSnippetItem = ({
   item,
   sessionID: _sessionID,
@@ -383,6 +389,23 @@ export const RenderSnippetItem = ({
   apiURL?: string;
   onClick?: (mediumID: string) => void;
 }) => {
+  const lineCount = countLines(item.content);
+  const isShortSnippet = lineCount <= 5;
+
+  // For short snippets, show them directly without the clickable link
+  if (isShortSnippet) {
+    return (
+      <div className="memori-media-item--snippet-direct">
+        <Card className="memori-media-item--card memori-media-item--snippet">
+          <div className="memori-media-item--snippet-preview">
+            <Snippet showCopyButton={true} preview={false} medium={item} />
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
+  // For longer snippets, show preview with click to open modal
   return (
     <>
       <a

package/src/components/MediaWidget/__snapshots__/MediaItemWidget.test.tsx.snap

@@ -25,13 +25,11 @@ exports[`renders MediaItemWidget unchanged with css snippet to show 1`] = `
       <div
         class="memori-media-item ease-out duration-500 delay-0 opacity-0 scale-95"
       >
-        <a
-          class="memori-media-item--link"
-          href="#"
-          title="Snippet"
+        <div
+          class="memori-media-item--snippet-direct"
         >
           <div
-            class="memori-card memori-media-item--card memori-media-item--snippet memori-card--hoverable"
+            class="memori-card memori-media-item--card memori-media-item--snippet"
           >
             <div
               class="memori-spin"
@@ -57,12 +55,46 @@ exports[`renders MediaItemWidget unchanged with css snippet to show 1`] = `
                         >
                           <code
                             class="language-scss"
+                            data-language="scss"
                           >
                             body{
   background-color: #f00;
 }
                           </code>
                         </pre>
+                        <button
+                          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
+                          title="copy"
+                        >
+                          <span
+                            class="memori-button--icon"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              fill="none"
+                              focusable="false"
+                              role="img"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="1.5"
+                              viewBox="0 0 24 24"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <rect
+                                height="14"
+                                rx="2"
+                                ry="2"
+                                width="14"
+                                x="8"
+                                y="8"
+                              />
+                              <path
+                                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+                              />
+                            </svg>
+                          </span>
+                        </button>
                       </div>
                       <p
                         class="memori-snippet--caption"
@@ -92,7 +124,7 @@ exports[`renders MediaItemWidget unchanged with css snippet to show 1`] = `
               </div>
             </div>
           </div>
-        </a>
+        </div>
       </div>
     </div>
   </div>
@@ -280,13 +312,11 @@ exports[`renders MediaItemWidget unchanged with js snippet to show 1`] = `
       <div
         class="memori-media-item ease-out duration-500 delay-0 opacity-0 scale-95"
       >
-        <a
-          class="memori-media-item--link"
-          href="#"
-          title="Snippet"
+        <div
+          class="memori-media-item--snippet-direct"
         >
           <div
-            class="memori-card memori-media-item--card memori-media-item--snippet memori-card--hoverable"
+            class="memori-card memori-media-item--card memori-media-item--snippet"
           >
             <div
               class="memori-spin"
@@ -312,10 +342,44 @@ exports[`renders MediaItemWidget unchanged with js snippet to show 1`] = `
                         >
                           <code
                             class="language-jsx"
+                            data-language="jsx"
                           >
                             console.log("Hello World!");
                           </code>
                         </pre>
+                        <button
+                          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
+                          title="copy"
+                        >
+                          <span
+                            class="memori-button--icon"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              fill="none"
+                              focusable="false"
+                              role="img"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="1.5"
+                              viewBox="0 0 24 24"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <rect
+                                height="14"
+                                rx="2"
+                                ry="2"
+                                width="14"
+                                x="8"
+                                y="8"
+                              />
+                              <path
+                                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+                              />
+                            </svg>
+                          </span>
+                        </button>
                       </div>
                       <p
                         class="memori-snippet--caption"
@@ -345,7 +409,7 @@ exports[`renders MediaItemWidget unchanged with js snippet to show 1`] = `
               </div>
             </div>
           </div>
-        </a>
+        </div>
       </div>
     </div>
   </div>