@memori.ai/memori-react 8.15.1 → 8.16.0

package/src/components/Snippet/Snippet.css

@@ -1,6 +1,8 @@
 .memori-snippet {
     position: relative;
     overflow: hidden;
+    width: 100%;
+    min-width: 0;
     border: 1px solid #e5e7eb;
     border-radius: 0.5rem;
     background: #f8fafc;
@@ -9,10 +11,13 @@
 .memori-snippet--content {
     position: relative;
     display: flex;
+    width: 100%;
+    min-width: 0;
     flex-direction: column;
 }
 
 .memori-snippet pre {
+    min-width: 0;
     padding: 1rem;
     border: none;
     border-radius: 0;
@@ -22,8 +27,31 @@
     font-size: 0.875rem;
     line-height: 1.6;
     overflow-x: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+    word-wrap: break-word;
 }
 
+pre[class*="language-"] {
+    margin: 0 !important;
+}
+/* Preview mode: full content with max height and scroll */
+.memori-snippet--preview .memori-snippet--content {
+    display: flex;
+    overflow: hidden;
+    max-height: 200px;
+    flex-direction: column;
+}
+
+.memori-snippet--preview .memori-snippet--content pre {
+    min-height: 0;
+    flex: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+
+
 .memori-snippet code {
     padding: 0;
     border-radius: 0;
@@ -32,11 +60,26 @@
     font-family: inherit;
 }
 
-button.memori-snippet--copy-button {
+.memori-snippet--copy-wrapper {
     position: absolute;
     z-index: 10;
     top: 0.5rem;
     right: 0.5rem;
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 0.5rem;
+    border-radius: 6px;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    background: rgba(0, 0, 0, 0.05);
+    background-color: #f8fafc;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+    gap: 0.5rem;
+}
+
+button.memori-snippet--copy-button {
     width: 32px !important;
     height: 32px !important;
     padding: 0;
@@ -64,6 +107,26 @@ button.memori-snippet--copy-button svg {
     color: #6b7280;
 }
 
+.memori-snippet--copied-text {
+    animation: fadeInOut 0.3s ease;
+    color: #10b981;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+@keyframes fadeInOut {
+    0% {
+        opacity: 0;
+        transform: translateX(-4px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
 .memori-snippet--caption {
     width: 100%;
     padding: 0.75rem 1rem;
@@ -77,35 +140,3 @@ button.memori-snippet--copy-button svg {
     text-align: left;
 }
 
-/* Dark theme support */
-@media (prefers-color-scheme: dark) {
-    .memori-snippet {
-        border-color: #374151;
-        background: #1e1e1e;
-    }
-    
-    .memori-snippet code {
-        color: #e5e7eb;
-    }
-    
-    .memori-snippet--copy-button {
-        border-color: rgba(255, 255, 255, 0.2);
-        background: rgba(255, 255, 255, 0.1);
-    }
-    
-    .memori-snippet--copy-button:hover,
-    .memori-snippet--copy-button:focus {
-        border-color: rgba(255, 255, 255, 0.3);
-        background: rgba(255, 255, 255, 0.2);
-    }
-    
-    .memori-snippet--copy-button svg {
-        color: #fff;
-    }
-    
-    .memori-snippet--caption {
-        border-top-color: rgba(255, 255, 255, 0.1);
-        background: rgba(0, 0, 0, 0.1);
-        color: #ccc;
-    }
-}

package/src/components/Snippet/Snippet.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Medium } from '@memori.ai/memori-api-client/dist/types';
 import Button from '../ui/Button';
 import Copy from '../icons/Copy';
@@ -64,6 +64,7 @@ const Snippet = ({
   showCopyButton = true,
 }: Props) => {
   const { t } = useTranslation();
+  const [copied, setCopied] = useState(false);
 
   const highlightCode = () => {
     // @ts-ignore
@@ -88,8 +89,21 @@ const Snippet = ({
     highlightCode();
   }, [medium.content, medium.mimeType]);
 
+  const handleCopy = async () => {
+    const contentToCopy = stripDocumentAttachmentTags(medium.content ?? '');
+    try {
+      await navigator.clipboard.writeText(contentToCopy);
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+    } catch (error) {
+      console.error('Failed to copy text:', error);
+    }
+  };
+
   return (
-    <div className="memori-snippet">
+    <div className={cx('memori-snippet', { 'memori-snippet--preview': preview })}>
       <div className="memori-snippet--content">
         <pre
           className={cx('line-numbers', className)}
@@ -107,31 +121,26 @@ const Snippet = ({
                 ?.lang ?? 'text'
             }
           >
-            {medium.content?.length && medium.content.length > 200 && preview
-              ? `${stripDocumentAttachmentTags(medium.content)?.slice(0, 200)}\n...`
-              : stripDocumentAttachmentTags(medium.content ?? '')}
+            {stripDocumentAttachmentTags(medium.content ?? '')}
           </code>
         </pre>
 
         {showCopyButton && (
-          <Button
-            padded={false}
-            ghost
-            className="memori-snippet--copy-button"
-            title={t('copy') || 'Copy'}
-            icon={<Copy />}
-            onClick={() => navigator.clipboard.writeText(medium.content ?? '')}
-          />
+          <div className="memori-snippet--copy-wrapper">
+            {copied && (
+              <span className="memori-snippet--copied-text">{t('copied') || 'Copied!'}</span>
+            )}
+            <Button
+              padded={false}
+              ghost
+              className="memori-snippet--copy-button"
+              title={t('copy') || 'Copy'}
+              icon={<Copy />}
+              onClick={handleCopy}
+            />
+          </div>
         )}
       </div>
-      {!!medium.title?.length && (
-        <p
-          id={`snippet-${medium.mediumID}`}
-          className="memori-snippet--caption"
-        >
-          {medium.title}
-        </p>
-      )}
     </div>
   );
 };