@memori.ai/memori-react 8.15.1 → 8.16.0

package/src/components/ChatBubble/ChatBubble.css

@@ -3,7 +3,7 @@
     align-items: flex-end;
     padding-right: 10px;
     padding-left: 10px;
-    margin-bottom: 5px;
+    margin-bottom: 1rem;
 }
 
 .memori-chat--bubble-initial {

package/src/components/ContentPreviewModal/ContentPreviewModal.css

@@ -0,0 +1,114 @@
+/* ContentPreviewModal – modern preview modal for files and media */
+
+.memori-content-preview-modal.memori-modal .memori-modal--panel {
+  overflow: hidden;
+  border-radius: 16px;
+  background: var(--memori-content-preview-bg, #fafafa);
+  box-shadow:
+    0 25px 50px -12px rgba(0, 0, 0, 0.25),
+    0 0 0 1px rgba(0, 0, 0, 0.05);
+}
+
+/* Image variant: modal at least 600px wide (capped by viewport on small screens) */
+.memori-content-preview-modal--image.memori-modal .memori-modal--panel {
+  min-width: min(600px, 100vw);
+}
+
+.memori-content-preview-modal .memori-modal--title {
+  padding: 1rem 1.25rem 0.75rem;
+  border-bottom: 1px solid var(--memori-content-preview-border, rgba(0, 0, 0, 0.06));
+  color: var(--memori-content-preview-title, #1f2937);
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.memori-content-preview-modal .memori-modal--close {
+  top: 0.75rem;
+  right: 0.75rem;
+}
+
+.memori-content-preview-modal .memori-modal--close button {
+  border-radius: 10px;
+  background: var(--memori-content-preview-close-bg, rgba(0, 0, 0, 0.05));
+  transition: background 0.2s ease, transform 0.15s ease;
+}
+
+.memori-content-preview-modal .memori-modal--close button:hover {
+  background: var(--memori-content-preview-close-hover, rgba(0, 0, 0, 0.1));
+  transform: scale(1.05);
+}
+
+/* Body area */
+.memori-content-preview-modal--body {
+  overflow: auto;
+  max-height: 70vh;
+  padding: 1.25rem;
+}
+
+.memori-content-preview-modal--body--image {
+  display: flex;
+  min-height: 400px;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  background: var(--memori-content-preview-image-bg, #f3f4f6);
+}
+
+.memori-content-preview-modal--body--content {
+  padding: 1rem 1.25rem;
+}
+
+/* Image */
+.memori-content-preview-modal--image-wrap {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+.memori-content-preview-modal--image {
+  width: 100%;
+  height: 100%;
+  max-height: 70vh;
+  border-radius: 8px;
+  object-fit: contain;
+}
+
+/* Snippet / text content area */
+.memori-content-preview-modal--snippet-wrap {
+  min-height: 120px;
+  border: 1px solid var(--memori-content-preview-snippet-border, #e2e8f0);
+  border-radius: 12px;
+  background: var(--memori-content-preview-snippet-bg, #f8fafc);
+  color: var(--memori-content-preview-snippet-text, #334155);
+  font-family: 'SF Mono', 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* When Snippet component is used inside, give it consistent spacing */
+.memori-content-preview-modal--snippet-wrap .memori-snippet {
+  border: none;
+  border-radius: 12px;
+  background: transparent;
+  box-shadow: none;
+}
+
+.memori-content-preview-modal--snippet-wrap .memori-snippet--content pre {
+  padding: 1rem 1.25rem;
+  overflow-wrap: break-word;
+  /* Override Prism theme so PDF/text content wraps instead of one long line */
+  white-space: pre-wrap !important;
+  word-break: break-word;
+}
+
+.memori-content-preview-modal--snippet-wrap .memori-snippet--content pre code {
+  overflow-wrap: break-word;
+  white-space: pre-wrap !important;
+  word-break: break-word;
+}

package/src/components/ContentPreviewModal/ContentPreviewModal.tsx

@@ -0,0 +1,69 @@
+import React, { FC } from 'react';
+import Modal from '../ui/Modal';
+import cx from 'classnames';
+
+import './ContentPreviewModal.css';
+
+export interface ContentPreviewModalProps {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  /** When true, renders image with min 600px width; otherwise renders children in snippet-style area */
+  isImage?: boolean;
+  imageSrc?: string;
+  imageAlt?: string;
+  /** Content for non-image preview (text, Snippet, iframe, etc.) */
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const ContentPreviewModal: FC<ContentPreviewModalProps> = ({
+  open,
+  onClose,
+  title,
+  isImage = false,
+  imageSrc,
+  imageAlt = '',
+  children,
+  className,
+}) => {
+  const width = 'min(90vw, 800px)';
+
+  return (
+    <Modal
+      open={open}
+      onClose={() => onClose()}
+      width={width}
+      widthMd={width}
+      className={cx('memori-content-preview-modal', className, {
+        'memori-content-preview-modal--image': isImage,
+      })}
+      closable
+      title={title}
+      footer={null}
+    >
+      <div
+        className={cx('memori-content-preview-modal--body', {
+          'memori-content-preview-modal--body--image': isImage,
+          'memori-content-preview-modal--body--content': !isImage,
+        })}
+      >
+        {isImage && imageSrc ? (
+          <div className="memori-content-preview-modal--image-wrap">
+            <img
+              src={imageSrc}
+              alt={imageAlt}
+              className="memori-content-preview-modal--image"
+            />
+          </div>
+        ) : (
+          <div className="memori-content-preview-modal--snippet-wrap">
+            {children}
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default ContentPreviewModal;

package/src/components/ContentPreviewModal/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ContentPreviewModal';
+export type { ContentPreviewModalProps } from './ContentPreviewModal';

package/src/components/FilePreview/FilePreview.css

@@ -147,7 +147,7 @@
     height: 20px;
     flex-shrink: 0;
     color: #fff;
-    fill: var(--memori-primary);
+    fill: #868e96;
 }
 
 .memori--preview-thumbnail {

package/src/components/FilePreview/FilePreview.tsx

@@ -1,11 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { PreviewIcon } from '../icons/Preview';
-import { DocumentIcon } from '../icons/Document';
-import { ImageIcon } from '../icons/Image';
+import File from '../icons/File';
 import CloseIcon from '../icons/Close';
 import Button from '../ui/Button';
-import Modal from '../ui/Modal';
-import { stripHTML } from '../../helpers/utils';
+import ContentPreviewModal from '../ContentPreviewModal';
+import Snippet from '../Snippet/Snippet';
+import { stripHTML, stripDocumentAttachmentTags } from '../../helpers/utils';
 
 type FilePreviewProps = {
   previewFiles: any;
@@ -57,6 +56,8 @@ FilePreviewProps) => {
         return 'Excel';
       case 'csv':
         return 'CSV';
+      case 'html':
+        return 'HTML';
       case 'jpg':
       case 'jpeg':
         return 'JPEG';
@@ -80,6 +81,33 @@ FilePreviewProps) => {
       }
     }
   }, [previewFiles]);
+  // Detect if the file is HTML (by type or filename)
+  const isHtmlFile = (file: { name?: string; type?: string; mimeType?: string } | null): boolean => {
+    if (!file) return false;
+    const ext = file.name?.split('.').pop()?.toLowerCase();
+    return (
+      file.type === 'document' && (ext === 'html' || file.mimeType === 'text/html')
+    ) || ext === 'html' || file.mimeType === 'text/html';
+  };
+
+  // Get display content for non-image files (strip document_attachment for HTML, stripHTML for others)
+  const getDisplayContent = (file: { content?: string; name?: string; type?: string; mimeType?: string } | null): string => {
+    if (!file?.content) return '';
+    const content = file.content;
+    if (isHtmlFile(file)) {
+      let htmlContent = content;
+      if (htmlContent.includes('<') || htmlContent.includes('"')) {
+        const div = document.createElement('div');
+        div.innerHTML = htmlContent;
+        htmlContent = div.textContent || div.innerText || htmlContent;
+      } else {
+        htmlContent = stripDocumentAttachmentTags(htmlContent);
+      }
+      return htmlContent;
+    }
+    return stripHTML(content);
+  };
+
   // Detect if the content is an image URL
   const isImageContent = (content: string, type?: string): boolean => {
     if (type === 'image') return true;
@@ -117,7 +145,7 @@ FilePreviewProps) => {
                     <img src={file.content} alt={file.name} />
                   </div>
                 ) : (
-                  <DocumentIcon className="memori--preview-icon" />
+                  <File className="memori--preview-icon" />
                 )}
 
                 <div className="memori--preview-file-info">
@@ -147,42 +175,37 @@ FilePreviewProps) => {
         </div>
       )}
 
-      <Modal
-        width="80%"
-        widthMd="80%"
+      <ContentPreviewModal
         open={!!selectedFile}
-        className="memori--modal-preview-file"
         onClose={() => setSelectedFile(null)}
-        closable
         title={selectedFile?.name}
+        isImage={
+          !!selectedFile &&
+          isImageContent(selectedFile.content, selectedFile.type)
+        }
+        imageSrc={
+          selectedFile && isImageContent(selectedFile.content, selectedFile.type)
+            ? selectedFile.content
+            : undefined
+        }
+        imageAlt={selectedFile?.name ?? ''}
       >
-        <div
-          className="memori--preview-content"
-          style={{
-            maxHeight: '70vh',
-            overflowY: 'auto',
-            textAlign: 'center',
-            whiteSpace:
-              selectedFile &&
-              !isImageContent(selectedFile.content, selectedFile.type)
-                ? 'pre-wrap'
-                : 'normal',
-          }}
-        >
-          {selectedFile &&
-          isImageContent(selectedFile.content, selectedFile.type) ? (
-            <>
-              <img
-                src={selectedFile.content}
-                alt={selectedFile.name}
-                style={{ maxWidth: '100%', maxHeight: '60vh' }}
-              />
-            </>
+        {selectedFile &&
+          !isImageContent(selectedFile.content, selectedFile.type) &&
+          (isHtmlFile(selectedFile) ? (
+            <Snippet
+              preview={false}
+              medium={{
+                mediumID: selectedFile.id,
+                mimeType: 'application/xml',
+                content: getDisplayContent(selectedFile),
+                title: selectedFile.name,
+              }}
+            />
           ) : (
-            stripHTML(selectedFile?.content || '')
-          )}
-        </div>
-      </Modal>
+            getDisplayContent(selectedFile)
+          ))}
+      </ContentPreviewModal>
     </>
   );
 };

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

@@ -14,45 +14,15 @@ exports[`renders FilePreview with one file 1`] = `
         class="memori--preview-item memori--preview-item--document"
       >
         <svg
+          aria-hidden="true"
           class="memori--preview-icon"
-          fill="none"
-          viewBox="0 0 24 24"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M14 2.5H6C5.60218 2.5 5.22064 2.65804 4.93934 2.93934C4.65804 3.22064 4.5 3.60218 4.5 4V20C4.5 20.3978 4.65804 20.7794 4.93934 21.0607C5.22064 21.342 5.60218 21.5 6 21.5H18C18.3978 21.5 18.7794 21.342 19.0607 21.0607C19.342 20.7794 19.5 20.3978 19.5 20V8L14 2.5Z"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-          />
-          <path
-            d="M14 2.5V8H19.5"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-          />
-          <path
-            d="M16 13H8"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-          />
-          <path
-            d="M16 17H8"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-          />
-          <path
-            d="M10 9H8"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
+            d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
           />
         </svg>
         <div
@@ -109,45 +79,15 @@ exports[`renders FilePreview with two files 1`] = `
         class="memori--preview-item memori--preview-item--document"
       >
         <svg
+          aria-hidden="true"
           class="memori--preview-icon"
-          fill="none"
-          viewBox="0 0 24 24"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M14 2.5H6C5.60218 2.5 5.22064 2.65804 4.93934 2.93934C4.65804 3.22064 4.5 3.60218 4.5 4V20C4.5 20.3978 4.65804 20.7794 4.93934 21.0607C5.22064 21.342 5.60218 21.5 6 21.5H18C18.3978 21.5 18.7794 21.342 19.0607 21.0607C19.342 20.7794 19.5 20.3978 19.5 20V8L14 2.5Z"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-          />
-          <path
-            d="M14 2.5V8H19.5"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-          />
-          <path
-            d="M16 13H8"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-          />
-          <path
-            d="M16 17H8"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-          />
-          <path
-            d="M10 9H8"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
+            d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
           />
         </svg>
         <div
@@ -191,45 +131,15 @@ exports[`renders FilePreview with two files 1`] = `
         class="memori--preview-item memori--preview-item--document"
       >
         <svg
+          aria-hidden="true"
           class="memori--preview-icon"
-          fill="none"
-          viewBox="0 0 24 24"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M14 2.5H6C5.60218 2.5 5.22064 2.65804 4.93934 2.93934C4.65804 3.22064 4.5 3.60218 4.5 4V20C4.5 20.3978 4.65804 20.7794 4.93934 21.0607C5.22064 21.342 5.60218 21.5 6 21.5H18C18.3978 21.5 18.7794 21.342 19.0607 21.0607C19.342 20.7794 19.5 20.3978 19.5 20V8L14 2.5Z"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-          />
-          <path
-            d="M14 2.5V8H19.5"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-          />
-          <path
-            d="M16 13H8"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-          />
-          <path
-            d="M16 17H8"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-          />
-          <path
-            d="M10 9H8"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
+            d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
           />
         </svg>
         <div

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { DocumentCard } from './DocumentCard';
+import File from '../icons/File';
+
+describe('DocumentCard', () => {
+  it('renders title and badge', () => {
+    render(
+      <DocumentCard
+        title="My Document"
+        badge="PDF"
+        icon={<File />}
+      />
+    );
+    expect(screen.getByText('My Document')).toBeInTheDocument();
+    expect(screen.getByText('PDF')).toBeInTheDocument();
+  });
+
+  it('applies document and badge classes', () => {
+    const { container } = render(
+      <DocumentCard
+        title="Report"
+        badge="DOCX"
+        meta="1.2 MB"
+        icon={<File />}
+      />
+    );
+    expect(container.querySelector('.memori-media-item--document')).toBeInTheDocument();
+    expect(container.querySelector('.memori-media-item--document-title')).toHaveTextContent('Report');
+    expect(container.querySelector('.memori-media-item--document-badge')).toHaveTextContent('DOCX');
+  });
+
+  it('renders unchanged snapshot', () => {
+    const { container } = render(
+      <DocumentCard
+        title="Spreadsheet"
+        badge="XLSX"
+        meta="256 KB"
+        icon={<File />}
+      />
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/MediaWidget/DocumentCard.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { DocumentCardProps } from './MediaItemWidget.types';
+
+export function DocumentCard({
+  title,
+  badge,
+}: DocumentCardProps): React.ReactElement {
+  return (
+    <div className="memori-media-item--document">
+      <div className="memori-media-item--document-header">
+        {/* <div className="memori-media-item--document-icon" aria-hidden>
+          {icon}
+        </div> */}
+        <div className="memori-media-item--document-title">{title}</div>
+      </div>
+      <span className="memori-media-item--document-badge">{badge}</span>
+    </div>
+  );
+}