@memori.ai/memori-react 8.45.2 → 8.45.5

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

@@ -1,271 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { MediaPreviewModal } from './MediaPreviewModal';
-import type { Medium } from '@memori.ai/memori-api-client/dist/types';
-
-beforeAll(() => {
-  if (typeof window !== 'undefined' && !window.IntersectionObserver) {
-    (window as unknown as { IntersectionObserver: unknown }).IntersectionObserver = jest.fn().mockImplementation(() => ({
-      observe: jest.fn(),
-      unobserve: jest.fn(),
-      disconnect: jest.fn(),
-    }));
-  }
-  if (typeof global !== 'undefined' && !globalThis.IntersectionObserver) {
-    (globalThis as unknown as { IntersectionObserver: unknown }).IntersectionObserver = jest.fn().mockImplementation(() => ({
-      observe: jest.fn(),
-      unobserve: jest.fn(),
-      disconnect: jest.fn(),
-    }));
-  }
-});
-
-jest.mock('../../helpers/media', () => ({
-  getResourceUrl: jest.fn(({ resourceURI }: { resourceURI?: string }) =>
-    resourceURI ? `https://resolved.example.com/${resourceURI}` : ''
-  ),
-}));
-
-describe('MediaPreviewModal', () => {
-  const onClose = jest.fn();
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('images', () => {
-    it('renders image in ContentPreviewModal with title and src', () => {
-      const medium: Medium = {
-        mediumID: 'img-1',
-        mimeType: 'image/jpeg',
-        title: 'Photo',
-        url: 'https://example.com/photo.jpg',
-      };
-      render(
-        <MediaPreviewModal medium={medium} onClose={onClose} />
-      );
-      expect(screen.getByAltText('Photo')).toBeInTheDocument();
-      expect(screen.getByAltText('Photo')).toHaveAttribute('src', expect.stringContaining('photo.jpg'));
-    });
-
-    it('uses base64 data URL when image has content', () => {
-      const medium: Medium = {
-        mediumID: 'img-2',
-        mimeType: 'image/png',
-        title: 'Inline',
-        content: 'base64content',
-      };
-      render(
-        <MediaPreviewModal medium={medium} onClose={onClose} />
-      );
-      const img = screen.getByAltText('Inline');
-      expect(img).toHaveAttribute('src', expect.stringMatching(/^data:image\/png;base64,/));
-    });
-  });
-
-  describe('code', () => {
-    it('renders code snippet with Snippet component', () => {
-      const medium: Medium = {
-        mediumID: 'code-1',
-        mimeType: 'text/javascript',
-        title: 'Script',
-        content: 'console.log("hello");',
-      };
-      render(
-        <MediaPreviewModal medium={medium} onClose={onClose} />
-      );
-      expect(screen.getByText(/console\.log/)).toBeInTheDocument();
-    });
-  });
-
-  describe('PDF', () => {
-    it('renders PDF in iframe when url or content present', () => {
-      const medium: Medium = {
-        mediumID: 'pdf-1',
-        mimeType: 'application/pdf',
-        title: 'Document',
-        url: 'https://example.com/doc.pdf',
-      };
-      render(
-        <MediaPreviewModal medium={medium} onClose={onClose} sessionID="s1" baseURL="https://api.example.com" />
-      );
-      const iframe = screen.getByTitle('Document');
-      expect(iframe).toBeInTheDocument();
-      expect(iframe.tagName).toBe('IFRAME');
-    });
-  });
-
-  describe('Excel', () => {
-    it('renders Excel in iframe when url or content present', () => {
-      const medium: Medium = {
-        mediumID: 'xls-1',
-        mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-        title: 'Sheet',
-        url: 'https://example.com/sheet.xlsx',
-      };
-      render(
-        <MediaPreviewModal medium={medium} onClose={onClose} />
-      );
-      const iframe = screen.getByTitle('Sheet');
-      expect(iframe).toBeInTheDocument();
-    });
-  });
-
-  describe('HTML', () => {
-    it('renders HTML link in iframe when only url', () => {
-      const medium: Medium = {
-        mediumID: 'html-1',
-        mimeType: 'text/html',
-        title: 'Page',
-        url: 'example.com/page',
-      };
-      render(
-        <MediaPreviewModal medium={medium} onClose={onClose} />
-      );
-      const iframe = screen.getByTitle('Page');
-      expect(iframe).toBeInTheDocument();
-      expect(iframe).toHaveAttribute('src', 'https://example.com/page');
-    });
-
-    it('renders HTML with content as stripped text in Snippet', () => {
-      const medium: Medium = {
-        mediumID: 'html-2',
-        mimeType: 'text/html',
-        title: 'Inline HTML',
-        content: '<p>Hello world</p>',
-      };
-      render(
-        <MediaPreviewModal medium={medium} onClose={onClose} />
-      );
-      expect(screen.getByText(/Hello world/)).toBeInTheDocument();
-    });
-  });
-
-  describe('video and audio', () => {
-    it('renders video with native controls', () => {
-      const medium: Medium = {
-        mediumID: 'vid-1',
-        mimeType: 'video/mp4',
-        title: 'Clip',
-        url: 'https://example.com/video.mp4',
-      };
-      render(
-        <MediaPreviewModal medium={medium} onClose={onClose} />
-      );
-      const video = document.querySelector('video');
-      expect(video).toBeInTheDocument();
-      expect(video).toHaveAttribute('src', expect.stringContaining('video.mp4'));
-    });
-
-    it('renders audio with title and controls', () => {
-      const medium: Medium = {
-        mediumID: 'aud-1',
-        mimeType: 'audio/mpeg',
-        title: 'Track',
-        url: 'https://example.com/audio.mp3',
-      };
-      render(
-        <MediaPreviewModal medium={medium} onClose={onClose} />
-      );
-      expect(screen.getAllByText('Track').length).toBeGreaterThan(0);
-      const audio = document.querySelector('audio');
-      expect(audio).toBeInTheDocument();
-    });
-  });
-
-  describe('plain text and markdown', () => {
-    it('renders plain text in Snippet', () => {
-      const medium: Medium = {
-        mediumID: 'txt-1',
-        mimeType: 'text/plain',
-        title: 'Notes',
-        content: 'Some plain text.',
-      };
-      render(
-        <MediaPreviewModal medium={medium} onClose={onClose} />
-      );
-      expect(screen.getByText(/Some plain text/)).toBeInTheDocument();
-    });
-
-    it('renders markdown in Snippet', () => {
-      const medium: Medium = {
-        mediumID: 'md-1',
-        mimeType: 'text/markdown',
-        title: 'Readme',
-        content: '# Title\n\nParagraph.',
-      };
-      render(
-        <MediaPreviewModal medium={medium} onClose={onClose} />
-      );
-      expect(screen.getByText(/# Title/)).toBeInTheDocument();
-    });
-  });
-
-  describe('Word / fallback', () => {
-    it('shows "Preview not available" for Word docs with Open and Download', () => {
-      const medium: Medium = {
-        mediumID: 'doc-1',
-        mimeType: 'application/msword',
-        title: 'Report.doc',
-        url: 'https://example.com/report.doc',
-      };
-      render(
-        <MediaPreviewModal medium={medium} onClose={onClose} />
-      );
-      expect(screen.getByText(/Preview not available for this document/)).toBeInTheDocument();
-      expect(screen.getByText(/Open in new tab/)).toBeInTheDocument();
-      expect(screen.getByText(/Download/)).toBeInTheDocument();
-    });
-
-    it('shows generic fallback for unknown file type', () => {
-      const medium: Medium = {
-        mediumID: 'unk-1',
-        mimeType: 'application/octet-stream',
-        title: 'file.bin',
-        url: 'https://example.com/file.bin',
-      };
-      render(
-        <MediaPreviewModal medium={medium} onClose={onClose} />
-      );
-      expect(screen.getByText(/Preview not available for this file type/)).toBeInTheDocument();
-    });
-  });
-
-  describe('document attachment content', () => {
-    it('renders document attachment text in Snippet', () => {
-      const medium: Medium = {
-        mediumID: 'att-1',
-        mimeType: 'text/plain',
-        title: 'Extracted',
-        content: 'Extracted text from PDF',
-        properties: { isDocumentAttachment: true },
-      };
-      render(
-        <MediaPreviewModal medium={medium} onClose={onClose} />
-      );
-      expect(screen.getByText(/Extracted text from PDF/)).toBeInTheDocument();
-    });
-  });
-
-  describe('onClose', () => {
-    it('modal can be closed via ContentPreviewModal', () => {
-      const medium: Medium = {
-        mediumID: 'img-1',
-        mimeType: 'image/jpeg',
-        title: 'Photo',
-        url: 'https://example.com/photo.jpg',
-      };
-      render(
-        <MediaPreviewModal medium={medium} onClose={onClose} />
-      );
-      const closeWrapper = document.querySelector('.memori-modal--close');
-      expect(closeWrapper).toBeInTheDocument();
-      const closeButton = closeWrapper?.querySelector('button');
-      if (closeButton) {
-        fireEvent.click(closeButton);
-        expect(onClose).toHaveBeenCalled();
-      }
-    });
-  });
-});

package/src/components/MediaWidget/MediaPreviewModal.tsx

@@ -1,425 +0,0 @@
-import type { Medium } from '@memori.ai/memori-api-client/dist/types';
-import React from 'react';
-import { getResourceUrl } from '../../helpers/media';
-import { prismSyntaxLangs } from '../../helpers/constants';
-import { stripHTML, stripDocumentAttachmentTags } from '../../helpers/utils';
-import Snippet from '../Snippet/Snippet';
-import ContentPreviewModal from '../ContentPreviewModal';
-import ModelViewer from '../CustomGLBModelViewer/ModelViewer';
-import {
-  IMAGE_MIME_TYPES,
-  getImageDisplaySource,
-} from './MediaItemWidget.utils';
-
-/*
- * Media types handled in MediaPreviewModal and recommended UX:
- *
- * 1. IMAGES (image/jpeg, image/png, image/jpg, image/gif)
- *    → Full-size in modal with title. Object-fit contain, optional alt.
- *
- * 2. CODE (text/javascript, text/ecmascript, application/json, text/css, application/xml,
- *    application/x-sh, text/x-python, text/x-c++src, application/x-php, text/x-ruby, text/x-sql)
- *    → Snippet with syntax highlighting and copy button.
- *
- * 3. PDF (application/pdf)
- *    → Inline iframe preview; base64 or resource URL.
- *
- * 4. EXCEL (application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet)
- *    → Inline iframe preview; base64 or resource URL.
- *
- * 5. HTML WITH CONTENT (text/html + content)
- *    → Snippet showing stripped HTML as plain text.
- *
- * 6. HTML LINK (text/html + url only)
- *    → Iframe loading the URL (https normalized).
- *
- * 7. VIDEO (video/mp4, video/quicktime, video/avi, video/mpeg)
- *    → Native <video> with controls; base64 or resource URL.
- *
- * 8. AUDIO (audio/mpeg3, audio/wav, audio/mpeg)
- *    → Native <audio> with controls; clear label and optional poster.
- *
- * 9. 3D MODEL (model/gltf-binary)
- *    → ModelViewer in modal with fixed height and camera controls.
- *
- * 10. PLAIN TEXT (text/plain)
- *     → Snippet (language-text) for readable, copyable content.
- *
- * 11. MARKDOWN (text/markdown)
- *     → Snippet for now (readable as text); can be upgraded to rendered markdown later.
- *
- * 12. WORD / OTHER DOCS (application/msword, application/vnd...wordprocessingml.document, etc.)
- *     → No reliable in-browser preview; show “Preview not available” + Open in new tab + Download.
- *
- * 13. UNKNOWN / FALLBACK
- *     → Never empty: show title, type, and Open in new tab / Download.
- */
-
-// Collect supported code mime types for quick lookup
-const CODE_MIME_TYPES = prismSyntaxLangs.map((l) => l.mimeType);
-
-// Constants for file type mime types
-const MIME_PDF = 'application/pdf';
-const MIME_EXCEL_XLS = 'application/vnd.ms-excel';
-const MIME_EXCEL_XLSX =
-  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
-const MIME_HTML = 'text/html';
-const MIME_PLAIN = 'text/plain';
-const MIME_CSV = 'text/csv';
-const MIME_MARKDOWN = 'text/markdown';
-const MIME_WORD_DOC = 'application/msword';
-const MIME_WORD_DOCX =
-  'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
-const MIME_WORD_DOTX =
-  'application/vnd.openxmlformats-officedocument.wordprocessingml.template';
-
-const VIDEO_MIME_TYPES = [
-  'video/mp4',
-  'video/quicktime',
-  'video/avi',
-  'video/mpeg',
-] as const;
-
-const AUDIO_MIME_TYPES = [
-  'audio/mpeg3',
-  'audio/wav',
-  'audio/mpeg',
-] as const;
-
-const MIME_3D_GLB = 'model/gltf-binary';
-
-// Placeholder for 3D model loading (gray 200x200 SVG)
-const DEFAULT_GLB_POSTER =
-  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2U1ZTdlYiIvPjwvc3ZnPg==';
-
-function isVideo(mimeType: string): boolean {
-  return (VIDEO_MIME_TYPES as readonly string[]).includes(mimeType);
-}
-
-function isAudio(mimeType: string): boolean {
-  return (AUDIO_MIME_TYPES as readonly string[]).includes(mimeType);
-}
-
-function isWordDoc(mimeType: string): boolean {
-  return (
-    mimeType === MIME_WORD_DOC ||
-    mimeType === MIME_WORD_DOCX ||
-    mimeType === MIME_WORD_DOTX
-  );
-}
-
-// Document attachments (PDF, XLSX, TXT, CSV, etc.) are extracted as text, not binary.
-// Detect when content is actually plain text / XML from document_attachment so we render it as text.
-function isDocumentAttachmentContent(content: string | null | undefined): boolean {
-  if (!content || typeof content !== 'string') return false;
-  const trimmed = content.trim();
-  return (
-    trimmed.includes('document_attachment') ||
-    trimmed.includes('<document_attachment') ||
-    trimmed.includes('</document_attachment>') ||
-    trimmed.includes('&lt;document_attachment') ||
-    trimmed.includes('&lt;/document_attachment&gt;') ||
-    (trimmed.startsWith('<') && trimmed.includes('>') && trimmed.length < 10000) // Likely XML/text, not binary
-  );
-}
-
-// Props for the MediaPreviewModal component
-export interface MediaPreviewModalProps {
-  medium: Medium;
-  onClose: () => void;
-  sessionID?: string;
-  tenantID?: string;
-  baseURL?: string;
-  apiURL?: string;
-  customMediaRenderer?: (mimeType: string) => JSX.Element | null;
-  descriptionOneLine?: boolean;
-  onLinkPreviewInfo?: (info: import('./MediaItemWidget.types').LinkPreviewInfo) => void;
-  onMediumClick?: (mediumID: string) => void;
-}
-
-// MediaPreviewModal displays a modal preview of a media file, including special handling for code, PDF, HTML, etc.
-export function MediaPreviewModal({
-  medium,
-  onClose,
-  sessionID,
-  tenantID,
-  baseURL,
-  apiURL,
-  customMediaRenderer: _customMediaRenderer,
-  descriptionOneLine: _descriptionOneLine,
-  onLinkPreviewInfo: _onLinkPreviewInfo,
-  onMediumClick: _onMediumClick,
-}: MediaPreviewModalProps): React.ReactElement {
-  // Determine the preview url for the medium based on its properties and the current session
-  const previewUrl = getResourceUrl({
-    resourceURI: medium.url,
-    sessionID,
-    tenantID,
-    baseURL,
-    apiURL,
-  });
-
-  // Check if this is a document attachment (extracted text, not binary file)
-  // Document attachments can be PDF, XLSX, TXT, CSV, HTML, JSON, MD - all converted to text
-  // Also check for attached files uploaded by the user
-  const isDocumentAttachment =
-    medium.properties?.isDocumentAttachment === true ||
-    medium.properties?.isAttachedFile === true ||
-    isDocumentAttachmentContent(medium.content);
-
-  // Detect the type of the medium for custom rendering logic
-  const isImage = IMAGE_MIME_TYPES.includes(medium.mimeType as (typeof IMAGE_MIME_TYPES)[number]);
-  const isCode = CODE_MIME_TYPES.includes(medium.mimeType);
-  const isPdf = medium.mimeType === MIME_PDF && !isDocumentAttachment;
-  const isExcel =
-    (medium.mimeType === MIME_EXCEL_XLS || medium.mimeType === MIME_EXCEL_XLSX) &&
-    !isDocumentAttachment;
-  const isHtmlWithContent = medium.mimeType === MIME_HTML && !!medium.content;
-  const isHtmlLink =
-    medium.mimeType === MIME_HTML && !!medium.url;
-  const isVideoType = isVideo(medium.mimeType);
-  const isAudioType = isAudio(medium.mimeType);
-  const is3D = medium.mimeType === MIME_3D_GLB;
-  // CSV files are converted to text and should be rendered as plain text
-  const isCsv = medium.mimeType === MIME_CSV;
-  const isPlainText = medium.mimeType === MIME_PLAIN || isDocumentAttachment || isCsv;
-  const isMarkdown = medium.mimeType === MIME_MARKDOWN;
-  const isWordType = isWordDoc(medium.mimeType);
-
-  // Video/audio src: data URL from content or resource URL
-  const mediaSrc =
-    medium.content != null
-      ? `data:${medium.mimeType};base64,${medium.content}`
-      : previewUrl;
-  const hasMediaSrc = !!mediaSrc;
-  const glbSrc =
-    medium.content != null
-      ? `data:model/gltf-binary;base64,${medium.content}`
-      : previewUrl;
-
-  // Image: use shared resolution (resource URL, base64, or rgb) so modal matches grid
-  const imageDisplay = isImage
-    ? getImageDisplaySource(medium, previewUrl)
-    : { src: undefined as string | undefined, isRgb: false };
-  const { src: imageSrc, isRgb: isImageRgb } = imageDisplay;
-
-  // For Excel and similar types, prepare an iframe src using either content (data URL) or preview url
-  const iframeSrcFromContent = medium.content
-    ? `data:${medium.mimeType};base64,${medium.content}`
-    : previewUrl;
-
-  // For HTML links, ensure the link src starts with "http" or prepend "https://"
-  const htmlLinkSrc =
-    !medium.url || medium.url.startsWith('http')
-      ? medium.url
-      : `https://${medium.url}`;
-
-  // HTML/content as text: render inside Snippet (converted to text)
-  const htmlAsTextMedium: Medium = {
-    ...medium,
-    mimeType: 'text/plain',
-    content: stripHTML(medium.content || ''),
-  };
-
-  // Image preview: same source as grid (URL, base64, or rgb swatch)
-  if (isImage) {
-    if (isImageRgb && medium.url) {
-      return (
-        <ContentPreviewModal
-          open
-          onClose={onClose}
-          title={medium.title ?? undefined}
-        >
-          <div
-            className="memori-media-item-preview--content memori-media-item--modal-rgb"
-            style={{
-              width: '100%',
-              minHeight: 200,
-              backgroundColor: medium.url,
-            }}
-          />
-        </ContentPreviewModal>
-      );
-    }
-    if (imageSrc) {
-      return (
-        <ContentPreviewModal
-          open
-          onClose={onClose}
-          title={medium.title ?? undefined}
-          isImage
-          imageSrc={imageSrc}
-          imageAlt={medium.title ?? ''}
-        />
-      );
-    }
-  }
-
-  return (
-    <ContentPreviewModal
-      open
-      onClose={onClose}
-      title={medium.title ?? undefined}
-    >
-      {isCode ? (
-        <Snippet preview={false} medium={medium} />
-      ) : isDocumentAttachment && medium.content ? (
-        // Document attachments contain extracted text, not binary data
-        // For HTML document attachments, open in new tab; for others, render as plain text
-        (() => {
-          const isHtmlDocumentAttachment = 
-            medium.mimeType === MIME_HTML && isDocumentAttachment;
-          
-          if (isHtmlDocumentAttachment) {
-            // HTML document attachment: display HTML content in a code-like format
-            let htmlContent = medium.content || '';
-            if (htmlContent.includes('&lt;') || htmlContent.includes('&quot;')) {
-              htmlContent = stripHTML(htmlContent) || htmlContent;
-            } else {
-              htmlContent = stripDocumentAttachmentTags(htmlContent);
-            }
-            
-            // Create a medium object for HTML content to display in Snippet
-            // Use 'application/xml' mimeType so Prism highlights it (maps to tsx/HTML highlighting)
-            const htmlMedium: Medium = {
-              ...medium,
-              mimeType: 'application/xml', // Maps to HTML/XML highlighting in Prism
-              content: htmlContent,
-            };
-            
-            return (
-              <Snippet preview={false} medium={htmlMedium} />
-            );
-          } else {
-            // Other document attachments: render as plain text
-            let displayContent = medium.content;
-            if (displayContent.includes('&lt;') || displayContent.includes('&quot;')) {
-              displayContent = stripHTML(displayContent) || displayContent;
-            } else {
-              displayContent = stripDocumentAttachmentTags(displayContent);
-            }
-            
-            // Improve formatting for PDF text: normalize whitespace and ensure proper line breaks
-            // Replace multiple spaces with single space, but preserve line breaks
-            displayContent = displayContent
-              .replace(/[ \t]+/g, ' ') // Replace multiple spaces/tabs with single space
-              .replace(/\n{3,}/g, '\n\n') // Replace 3+ newlines with double newline
-              .trim();
-            
-            return (
-              <Snippet
-                preview={false}
-                medium={{
-                  ...medium,
-                  mimeType: 'text/plain',
-                  content: displayContent,
-                }}
-              />
-            );
-          }
-        })()
-      ) : isPdf && (previewUrl || medium.content) ? (
-        <div className="memori-media-item-preview--content memori-media-item--modal-iframe-wrap">
-          <iframe
-            title={medium.title || 'PDF preview'}
-            src={
-              medium.content
-                ? `data:application/pdf;base64,${medium.content}`
-                : previewUrl
-            }
-            className="memori-media-item--modal-iframe"
-          />
-        </div>
-      ) : isExcel && (previewUrl || medium.content) ? (
-        <div className="memori-media-item-preview--content memori-media-item--modal-iframe-wrap">
-          <iframe
-            title={medium.title || 'Spreadsheet preview'}
-            src={iframeSrcFromContent}
-            className="memori-media-item--modal-iframe"
-          />
-        </div>
-      ) : isHtmlWithContent && !isDocumentAttachment ? (
-        // HTML with content (not a document attachment) - show as text
-        <Snippet preview={false} medium={htmlAsTextMedium} />
-      ) : isHtmlLink ? (
-        <div className="memori-media-item-preview--content memori-media-item--modal-iframe-wrap">
-          <iframe
-            title={medium.title || 'Link preview'}
-            src={htmlLinkSrc}
-            className="memori-media-item--modal-iframe"
-          />
-        </div>
-      ) : isVideoType && hasMediaSrc ? (
-        <div className="memori-media-item-preview--content memori-media-item--modal-video-wrap">
-          <video
-            className="memori-media-item--modal-video"
-            controls
-            src={mediaSrc}
-            title={medium.title || 'Video preview'}
-          >
-            {medium.mimeType === 'video/quicktime' && (
-              <source src={mediaSrc} type="video/mp4" />
-            )}
-            Your browser does not support this video format.
-          </video>
-        </div>
-      ) : isAudioType && hasMediaSrc ? (
-        <div className="memori-media-item-preview--content memori-media-item--modal-audio-wrap">
-          <p className="memori-media-item--modal-audio-title">
-            {medium.title || 'Audio'}
-          </p>
-          <audio
-            className="memori-media-item--modal-audio"
-            controls
-            src={mediaSrc}
-            title={medium.title || 'Audio preview'}
-          >
-            Your browser does not support this audio format.
-          </audio>
-        </div>
-      ) : is3D && glbSrc ? (
-        <div className="memori-media-item-preview--content memori-media-item--modal-3d-wrap">
-          <ModelViewer
-            src={glbSrc}
-            poster={DEFAULT_GLB_POSTER}
-            alt={medium.title || '3D model'}
-          />
-        </div>
-      ) : isPlainText && medium.content ? (
-        <Snippet preview={false} medium={medium} />
-      ) : isMarkdown && medium.content ? (
-        <Snippet preview={false} medium={medium} />
-      ) : (
-        <div className="memori-media-item-preview--content memori-media-item--modal-fallback">
-          <p className="memori-media-item--modal-fallback-message">
-            {isWordType
-              ? 'Preview not available for this document.'
-              : 'Preview not available for this file type.'}
-          </p>
-          <p className="memori-media-item--modal-fallback-hint">
-            You can open it in a new tab or download it.
-          </p>
-          {previewUrl && (
-            <div className="memori-media-item--modal-fallback-actions">
-              <a
-                href={previewUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="memori-media-item--modal-fallback-link"
-              >
-                Open in new tab
-              </a>
-              <a
-                href={previewUrl}
-                download={medium.title || undefined}
-                className="memori-media-item--modal-fallback-link"
-              >
-                Download
-              </a>
-            </div>
-          )}
-        </div>
-      )}
-    </ContentPreviewModal>
-  );
-}