@memori.ai/memori-react 8.12.0 → 8.13.0

package/src/components/FilePreview/FilePreview.css

@@ -1,223 +1,302 @@
 /* Updated FilePreview Styles */
 
 .memori--preview-container {
-  z-index: 10;
-  min-width: 100%;
-  padding: 12px;
-  border-radius: 8px;
-  margin-bottom: 12px;
-  animation: slide-in 0.3s ease;
-  background: white;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
+    z-index: 10;
+    min-width: 100%;
+    /* padding: 12px; */
+    border-radius: 8px;
+    /* margin-bottom: 12px; */
+    animation: slide-in 0.3s ease;
+    background: white;
+    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
+    transition: all 0.3s ease;
 }
 
 .memori--preview-container.slide-down {
-  animation: slide-down 0.3s ease;
-}
-
-.memori--absolute-preview {
-  position: absolute;
-  z-index: 10;
-  right: 0;
-  bottom: 100%;
-  left: 0;
-  max-height: 200px;
-  overflow-y: auto;
+    animation: slide-down 0.3s ease;
 }
 
 /* Responsive adjustments for file preview */
 @media (max-width: 768px) {
-  .memori--absolute-preview {
-    max-height: 150px;
-  }
+    .memori--absolute-preview {
+        max-height: 150px;
+    }
 
-  .memori--preview-container {
-    padding: 8px;
-    margin-bottom: 8px;
-  }
+    .memori--preview-container {
+        padding: 8px;
+        margin-bottom: 8px;
+    }
 
-  .memori--preview-filename {
-    max-width: 150px;
-    font-size: 12px;
-  }
+    .memori--preview-filename {
+        max-width: 150px;
+        font-size: 12px;
+    }
+
+    /* Make remove button always visible on mobile */
+    .memori--remove-button {
+        opacity: 1 !important;
+        transform: scale(1) !important;
+    }
+
+    /* Increase card size for easier interaction */
+    .memori--preview-item {
+        min-width: 140px;
+        min-height: 60px;
+        padding: 12px;
+    }
+
+    .memori--preview-icon {
+        width: 24px;
+        height: 24px;
+    }
+
+    .memori--preview-thumbnail {
+        min-width: 50px;
+        min-height: 50px;
+    }
+
+    .memori--preview-thumbnail img {
+        width: 50px;
+        height: 50px;
+        object-fit: cover;
+    }
 }
 
 @media (max-width: 480px) {
-  .memori--absolute-preview {
-    max-height: 120px;
-  }
+    .memori--absolute-preview {
+        max-height: 120px;
+    }
 
-  .memori--preview-container {
-    padding: 6px;
-    margin-bottom: 6px;
-  }
+    .memori--preview-container {
+        padding: 6px;
+        margin-bottom: 6px;
+    }
 
-  .memori--preview-filename {
-    max-width: 100px;
-    font-size: 11px;
-  }
+    .memori--preview-filename {
+        max-width: 100px;
+        font-size: 11px;
+    }
+
+    /* Make remove button always visible on mobile */
+    .memori--remove-button {
+        opacity: 1 !important;
+        transform: scale(1) !important;
+    }
+
+    /* Increase card size for easier interaction on small screens */
+    .memori--preview-item {
+        min-width: 160px;
+        min-height: 70px;
+        padding: 14px;
+    }
+
+    .memori--preview-icon {
+        width: 28px;
+        height: 28px;
+    }
+
+    .memori--preview-thumbnail {
+        min-width: 60px;
+        min-height: 60px;
+    }
+
+    .memori--preview-thumbnail img {
+        width: 60px;
+        height: 60px;
+        object-fit: cover;
+    }
 }
 
 .memori--message-preview {
-  max-width: 100%;
-  margin: 12px 0;
+    max-width: 100%;
+    margin: 12px 0;
 }
 
 .memori--preview-list {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  overflow-x: auto;
+    display: flex;
+    flex-direction: row;
+    padding: 0.875rem;
+    padding-bottom: 0.625rem;
+    gap: 8px;
+    overflow-x: auto;
+    scrollbar-color: hsla(var(--border-300) / 35%) transparent;
+    scrollbar-width: thin;
 }
 
 .memori--preview-item {
-  position: relative;
-  display: flex;
-  max-width: fit-content;
-  align-items: center;
-  padding: 8px;
-  border-radius: 8px;
-  animation: slide-in 0.3s ease;
-  background-color: #f8f9fa;
-  cursor: pointer;
-  gap: 8px;
-  transition: all 0.2s ease;
+    position: relative;
+    display: flex;
+    max-width: fit-content;
+    align-items: center;
+    padding: 8px;
+    border-radius: 8px;
+    animation: slide-in 0.3s ease;
+    background-color: #f8f9fa;
+    cursor: pointer;
+    gap: 8px;
+    transition: all 0.2s ease;
 }
 
 .memori--preview-item:hover {
-  background-color: #f1f3f5;
-  transform: translateX(4px);
+    background-color: #f1f3f5;
+    transform: translateX(4px);
 }
 
 .memori--preview-icon {
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-  color: #fff;
-  fill: var(--memori-primary);
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    color: #fff;
+    fill: var(--memori-primary);
+}
+
+.memori--preview-thumbnail {
+    display: flex;
+    overflow: hidden;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+}
+
+.memori--preview-thumbnail img {
+    width: 40px;
+    height: 40px;
+    border-radius: 4px;
+    object-fit: cover;
 }
 
 .memori--preview-file-info {
-  display: flex;
-  overflow: hidden;
-  flex-direction: column;
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+}
+
+.memori-modal--title {
+    overflow: hidden;
+    max-width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .memori--preview-filename {
-  overflow: hidden;
-  max-width: 200px;
-  color: #495057;
-  font-size: 14px;
-  font-weight: 500;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    overflow: hidden;
+    max-width: 100px;
+    color: #495057;
+    font-size: 14px;
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .memori--preview-filetype {
-  margin-top: 2px;
-  color: #868e96;
-  font-size: 12px;
+    margin-top: 2px;
+    color: #868e96;
+    font-size: 12px;
 }
 
 .memori--modal-title-preview {
-  margin-top: 12px;
-  margin-bottom: 12px;
-  font-size: 20px;
-  font-weight: 600;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    font-size: 20px;
+    font-weight: 600;
 }
 
 .memori--remove-button {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  padding: 4px;
-  border: none;
-  border-radius: 50%;
-  background-color: #e03131;
-  color: white;
-  cursor: pointer;
-  opacity: 0;
-  transform: scale(0.75);
-  transition: all 0.2s ease;
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    padding: 4px;
+    border: none;
+    border-radius: 50%;
+    background-color: #e03131;
+    color: white;
+    cursor: pointer;
+    opacity: 0;
+    transform: scale(0.75);
+    transition: all 0.2s ease;
 }
 
 .memori--remove-button.visible {
-  opacity: 1;
-  transform: scale(1);
+    opacity: 1;
+    transform: scale(1);
 }
 
 .memori--remove-button:hover {
-  background-color: #c92a2a;
-  transform: scale(1.1);
+    background-color: #c92a2a;
+    transform: scale(1.1);
 }
 
 .memori--remove-icon {
-  width: 12px;
-  height: 12px;
+    width: 12px;
+    height: 12px;
 }
 
 .memori--modal-preview-file {
-  width: 100%;
-  max-width: 800px;
-  height: 100%;
-  padding: 12px;
+    width: 100%;
+    max-width: 800px;
+    height: 100%;
+    padding: 12px;
 }
 
 .memori--preview-content {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f8f9fa;
-  font-family: monospace;
-  font-size: 14px;
-  line-height: 1.5;
+    padding: 16px;
+    border-radius: 8px;
+    /* background-color: #f8f9fa; */
+    font-family: monospace;
+    font-size: 14px;
+    line-height: 1.5;
 }
 
 @keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 @keyframes scaleIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
 }
 
 @keyframes slide-up {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 @keyframes slide-in {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 @keyframes slide-down {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-}
+    from {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+}

package/src/components/FilePreview/FilePreview.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { PreviewIcon } from '../icons/Preview';
 import { DocumentIcon } from '../icons/Document';
 import { ImageIcon } from '../icons/Image';
@@ -11,22 +11,22 @@ type FilePreviewProps = {
   previewFiles: any;
   removeFile: (id: string, mediumID: string | undefined) => void;
   allowRemove?: boolean;
-  isMessagePreview?: boolean;
+  // isMessagePreview?: boolean;
 };
 
 const FilePreview = ({
   previewFiles,
   removeFile,
   allowRemove = true,
-  isMessagePreview = false,
-}: FilePreviewProps) => {
+}: // isMessagePreview = false,
+FilePreviewProps) => {
   const [selectedFile, setSelectedFile] = useState<{
     name: string;
     id: string;
     content: string;
     type?: string;
   } | null>(null);
-  
+
   const [hoveredId, setHoveredId] = useState<string | null>(null);
 
   const getFileType = (filename: string, type?: string) => {
@@ -43,7 +43,7 @@ const FilePreview = ({
           return 'Image';
       }
     }
-    
+
     // Otherwise use extension
     const extension = filename.split('.').pop()?.toLowerCase();
     switch (extension) {
@@ -67,37 +67,45 @@ const FilePreview = ({
     }
   };
 
+  useEffect(() => {
+    const chat = document.getElementsByClassName('memori-chat--content');
+    if (chat) {
+      const lastChild = chat[chat.length - 1];
+      if (lastChild) {
+        //then scroll to the bottom of the chat
+        (chat[0] as HTMLElement).scrollTo({
+          top: (chat[0] as HTMLElement).scrollHeight,
+          behavior: 'smooth',
+        });
+      }
+    }
+  }, [previewFiles]);
   // Detect if the content is an image URL
   const isImageContent = (content: string, type?: string): boolean => {
     if (type === 'image') return true;
-    
+
     // Check if the content has image file extension or is an image URL
     const hasImageExtension = /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(content);
-    const isImageUrl = content.startsWith('http') && 
-                       (content.includes('/image/') || 
-                        content.includes('/img/') || 
-                        hasImageExtension);
-    
+    const isImageUrl =
+      content.startsWith('http') &&
+      (content.includes('/image/') ||
+        content.includes('/img/') ||
+        hasImageExtension);
+
     return isImageUrl || hasImageExtension;
   };
 
   return (
     <>
       {previewFiles.length > 0 && (
-        <div
-          className={`memori--preview-container  ${
-            isMessagePreview
-              ? 'memori--message-preview'
-              : 'memori--absolute-preview'
-          }`}
-        >
+        <div className="memori--preview-container">
           <div className="memori--preview-list">
             {previewFiles.map((file: any) => (
               <div
                 key={file.id}
                 className={`memori--preview-item ${
-                  isImageContent(file.content, file.type) 
-                    ? 'memori--preview-item--image' 
+                  isImageContent(file.content, file.type)
+                    ? 'memori--preview-item--image'
                     : 'memori--preview-item--document'
                 }`}
                 onMouseEnter={() => setHoveredId(file.id)}
@@ -111,14 +119,14 @@ const FilePreview = ({
                 ) : (
                   <DocumentIcon className="memori--preview-icon" />
                 )}
-                
+
                 <div className="memori--preview-file-info">
                   <span className="memori--preview-filename">{file.name}</span>
                   <span className="memori--preview-filetype">
                     {getFileType(file.name, file.type)}
                   </span>
                 </div>
-                
+
                 {allowRemove && (
                   <Button
                     shape="rounded"
@@ -138,7 +146,7 @@ const FilePreview = ({
           </div>
         </div>
       )}
-      
+
       <Modal
         width="80%"
         widthMd="80%"
@@ -148,22 +156,27 @@ const FilePreview = ({
         closable
         title={selectedFile?.name}
       >
-        <div 
-          className="memori--preview-content" 
-          style={{ 
-            maxHeight: '70vh', 
+        <div
+          className="memori--preview-content"
+          style={{
+            maxHeight: '70vh',
             overflowY: 'auto',
             textAlign: 'center',
-            whiteSpace: selectedFile && !isImageContent(selectedFile.content, selectedFile.type) ? 'pre-wrap' : 'normal'
+            whiteSpace:
+              selectedFile &&
+              !isImageContent(selectedFile.content, selectedFile.type)
+                ? 'pre-wrap'
+                : 'normal',
           }}
         >
-          {selectedFile && isImageContent(selectedFile.content, selectedFile.type) ? (
+          {selectedFile &&
+          isImageContent(selectedFile.content, selectedFile.type) ? (
             <>
-              <img 
-                src={selectedFile.content} 
-                alt={selectedFile.name} 
-                style={{ maxWidth: '100%', maxHeight: '60vh' }} 
-            />
+              <img
+                src={selectedFile.content}
+                alt={selectedFile.name}
+                style={{ maxWidth: '100%', maxHeight: '60vh' }}
+              />
             </>
           ) : (
             stripHTML(selectedFile?.content || '')
@@ -174,4 +187,4 @@ const FilePreview = ({
   );
 };
 
-export default FilePreview;
+export default FilePreview;

package/src/components/FilePreview/__snapshots__/FilePreview.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`renders FilePreview unchanged 1`] = `<div />`;
 exports[`renders FilePreview with one file 1`] = `
 <div>
   <div
-    class="memori--preview-container  memori--absolute-preview"
+    class="memori--preview-container"
   >
     <div
       class="memori--preview-list"
@@ -100,7 +100,7 @@ exports[`renders FilePreview with one file 1`] = `
 exports[`renders FilePreview with two files 1`] = `
 <div>
   <div
-    class="memori--preview-container  memori--absolute-preview"
+    class="memori--preview-container"
   >
     <div
       class="memori--preview-list"

package/src/components/Header/Header.css

@@ -1,6 +1,6 @@
 .memori-header {
     position: relative;
-    z-index: 999;
+    z-index: 1000;
     width: calc(50% - 1rem);
     height: 50px;
     padding: calc(var(--memori-inner-content-pad) / 4) calc(var(--memori-inner-content-pad) / 2);
@@ -106,4 +106,4 @@
 
 .memori-dropdown--avatar-initial:hover + .memori-dropdown--avatar-input,.memori-dropdown--avatar:hover + .memori-dropdown--avatar-input{
     display: block;
-}
+}

package/src/components/MediaWidget/MediaItemWidget.tsx

@@ -69,6 +69,7 @@ export const RenderMediaItem = ({
   const isCodeSnippet = prismSyntaxLangs
     .map(l => l.mimeType)
     .includes(item.mimeType);
+  const isHTML = item.mimeType === 'text/html';
   const isImageRGB =
     item.url?.startsWith('rgb(') || item.url?.startsWith('rgba(');
 
@@ -199,7 +200,7 @@ export const RenderMediaItem = ({
   };
 
   // Handle code snippets with modal
-  if (isCodeSnippet && item.content) {
+  if ((isCodeSnippet && item.content) || isHTML) {
     return (
       <>
         <a

package/src/components/MediaWidget/MediaWidget.css

@@ -129,7 +129,3 @@ button.memori-hints--show-more-button {
     background: #fff;
     color: #333;
 }
-
-.memori-media-widget {
-    z-index: -1;
-}