@memori.ai/memori-react 8.45.1 → 8.45.4

package/src/components/FilePreview/FilePreview.css

@@ -1,358 +0,0 @@
-/* Updated FilePreview Styles */
-
-.memori--preview-container {
-    z-index: 10;
-    overflow: hidden;
-    width: 100%;
-    min-width: 0;
-    max-width: 100%;
-    border-radius: 8px;
-    animation: slide-in 0.3s ease;
-    background: white;
-    transition: all 0.3s ease;
-}
-
-.memori--preview-container.slide-down {
-    animation: slide-down 0.3s ease;
-}
-
-/* Responsive adjustments for file preview */
-@media (max-width: 768px) {
-    .memori--absolute-preview {
-        max-height: 150px;
-    }
-
-    .memori--preview-container {
-        padding: 8px;
-        margin-bottom: 8px;
-    }
-
-    .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--preview-container {
-        padding: 6px;
-        margin-bottom: 6px;
-    }
-
-    .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;
-}
-
-.memori--preview-list {
-    display: flex;
-    width: 100%;
-    min-width: 0;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    padding: 0.875rem;
-    padding-bottom: 0.625rem;
-    gap: 8px;
-    -webkit-overflow-scrolling: touch;
-    overflow-x: auto;
-    overflow-y: hidden;
-    scrollbar-color: hsla(var(--border-300) / 35%) transparent;
-    scrollbar-width: thin;
-}
-
-.memori--preview-item {
-    position: relative;
-    display: flex;
-    max-width: fit-content;
-    flex-shrink: 0;
-    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);
-}
-
-.memori--preview-icon {
-    width: 20px;
-    height: 20px;
-    flex-shrink: 0;
-    color: #fff;
-    fill: #868e96;
-}
-
-.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;
-}
-
-.memori-modal--title {
-    overflow: hidden;
-    max-width: 100%;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.memori--preview-filename {
-    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;
-}
-
-.memori--modal-title-preview {
-    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;
-}
-
-.memori--remove-button:hover {
-    background-color: #c92a2a;
-    transform: scale(1.1);
-}
-
-/* Show remove button only when user hovers the preview item */
-.memori--preview-item:hover .memori--remove-button {
-    opacity: 1;
-    transform: scale(1);
-}
-
-.memori--remove-icon {
-    width: 12px;
-    height: 12px;
-}
-
-.memori--modal-preview-file {
-    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;
-}
-
-/* Skeleton loading card */
-.memori--preview-item--skeleton {
-    min-width: 140px;
-    cursor: default;
-    pointer-events: none;
-}
-
-.memori--preview-item--skeleton:hover {
-    background-color: #f8f9fa;
-    transform: none;
-}
-
-.memori--skeleton-icon {
-    width: 20px;
-    height: 20px;
-    flex-shrink: 0;
-    border-radius: 4px;
-    animation: memori-skeleton-pulse 1.5s ease-in-out infinite;
-    background: linear-gradient(90deg, #e9ecef 25%, #f1f3f5 50%, #e9ecef 75%);
-    background-size: 200% 100%;
-}
-
-.memori--skeleton-line {
-    border-radius: 4px;
-    animation: memori-skeleton-pulse 1.5s ease-in-out infinite;
-    background: linear-gradient(90deg, #e9ecef 25%, #f1f3f5 50%, #e9ecef 75%);
-    background-size: 200% 100%;
-}
-
-.memori--skeleton-line--name {
-    width: 80px;
-    height: 12px;
-    margin-bottom: 6px;
-}
-
-.memori--skeleton-line--type {
-    width: 40px;
-    height: 10px;
-}
-
-@keyframes memori-skeleton-pulse {
-    0% {
-        background-position: 200% 0;
-    }
-    100% {
-        background-position: -200% 0;
-    }
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes scaleIn {
-    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);
-    }
-}
-
-@keyframes slide-in {
-    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);
-    }
-}

package/src/components/FilePreview/FilePreview.stories.tsx

@@ -1,63 +0,0 @@
-import React, { useState } from 'react';
-import { Meta, Story } from '@storybook/react';
-import I18nWrapper from '../../I18nWrapper';
-import FilePreview from './FilePreview';
-
-import './FilePreview.css';
-
-const meta: Meta = {
-  title: 'Widget/File Preview',
-  component: FilePreview,
-  argTypes: {
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-
-type Props = {
-  onUpload: (text: string) => void;
-};
-
-export default meta;
-
-const Template: Story<Props> = args => {
-    const [previewFiles, setPreviewFiles] = useState<{ name: string; id: string; content: string; }[]>([]);
-
-  return (
-    <I18nWrapper>
-      <div
-        style={{
-          minHeight: '200px',
-          display: 'flex',
-          alignItems: 'flex-end',
-        }}
-      >
-        <FilePreview {...args} previewFiles={previewFiles} removeFile={
-            (id: string) => {
-                setPreviewFiles(previewFiles.filter(file => file.id !== id));
-            }
-        } />
-      </div>
-    </I18nWrapper>
-  );
-};
-
-// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
-// https://storybook.js.org/docs/react/workflows/unit-testing
-export const Default = Template.bind({});
-Default.args = {
-  onUpload: () => {},
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  onUpload: () => {},
-  disabled: true,
-};

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

@@ -1,26 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import FilePreview from './FilePreview';
-
-it('renders FilePreview unchanged', () => {
-  const { container } = render(
-    <FilePreview previewFiles={[]} removeFile={jest.fn()} />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders FilePreview with one file', () => {
-  const { container } = render(
-    <FilePreview previewFiles={[{ name: 'test.pdf', id: '1', content: 'test' }]} removeFile={jest.fn()} />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-
-it('renders FilePreview with two files', () => {
-  const { container } = render(
-    <FilePreview previewFiles={[{ name: 'test.pdf', id: '1', content: 'test' }, { name: 'test.pdf', id: '2', content: 'test' }]} removeFile={jest.fn()} />
-  );
-  expect(container).toMatchSnapshot();
-});
-

package/src/components/FilePreview/FilePreview.tsx

@@ -1,277 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import File from '../icons/File';
-import CloseIcon from '../icons/Close';
-import Button from '../ui/Button';
-import ContentPreviewModal from '../ContentPreviewModal';
-import Snippet from '../Snippet/Snippet';
-import {
-  stripHTML,
-  stripDocumentAttachmentTags,
-  isOfficeNativeFilename,
-  getDocumentAttachmentAssetUrl,
-} from '../../helpers/utils';
-import { getDocumentBadgeLabel } from '../MediaWidget/MediaItemWidget.utils';
-import { useTranslation } from 'react-i18next';
-
-type FilePreviewProps = {
-  previewFiles: any;
-  removeFile: (id: string, mediumID: string | undefined) => void;
-  allowRemove?: boolean;
-  showAnonymousRetentionNotice?: boolean;
-  uploadingCount?: number;
-};
-
-const FilePreview = ({
-  previewFiles,
-  removeFile,
-  allowRemove = true,
-  showAnonymousRetentionNotice = false,
-  uploadingCount = 0,
-}: FilePreviewProps) => {
-  const { t } = useTranslation();
-  const [selectedFile, setSelectedFile] = useState<{
-    name: string;
-    id: string;
-    content: string;
-    type?: string;
-  } | null>(null);
-
-  const getFileType = (filename: string, type?: string) => {
-    // If type is explicitly provided, use it first
-    if (type === 'image') {
-      const extension = filename.split('.').pop()?.toLowerCase();
-      switch (extension) {
-        case 'jpg':
-        case 'jpeg':
-          return 'JPEG';
-        case 'png':
-          return 'PNG';
-        default:
-          return 'Image';
-      }
-    }
-
-    // Otherwise use extension
-    const extension = filename.split('.').pop()?.toLowerCase();
-    switch (extension) {
-      case 'pdf':
-        return 'PDF';
-      case 'txt':
-        return 'Text';
-      case 'json':
-        return 'JSON';
-      case 'xlsx':
-        return 'Excel';
-      case 'csv':
-        return 'CSV';
-      case 'html':
-        return 'HTML';
-      case 'doc':
-      case 'docx':
-      case 'dotx':
-        return 'Word';
-      case 'xls':
-      case 'xltx':
-        return 'Excel';
-      case 'potx':
-        return 'PowerPoint';
-      case 'jpg':
-      case 'jpeg':
-        return 'JPEG';
-      case 'png':
-        return 'PNG';
-      default:
-        return 'Document';
-    }
-  };
-
-  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 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('&lt;') || htmlContent.includes('&quot;')) {
-        htmlContent = stripHTML(htmlContent) || htmlContent;
-      }
-      htmlContent = stripDocumentAttachmentTags(htmlContent);
-      return htmlContent;
-    }
-    return stripHTML(stripDocumentAttachmentTags(content));
-  };
-
-  // 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);
-
-    return isImageUrl || hasImageExtension;
-  };
-
-  return (
-    <>
-      {(previewFiles.length > 0 || uploadingCount > 0) && (
-        <div className="memori--preview-container">
-          {showAnonymousRetentionNotice && (
-            <small
-              style={{
-                color: 'rgb(138, 138, 138)',
-                display: 'block',
-                marginTop: '6px',
-                marginBottom: '6px',
-                fontSize: '0.7rem',
-              }}
-            >
-              {t('upload.anonymousRetentionNotice', {
-                defaultValue:
-                  'Note: uploaded files are retained for a maximum of 24 hours.',
-              })}
-            </small>
-          )}
-          <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'
-                    : 'memori--preview-item--document'
-                }`}
-                onClick={() => {
-                  if (isOfficeNativeFilename(file.name || '')) {
-                    const url = getDocumentAttachmentAssetUrl(file);
-                    if (url) {
-                      window.open(url, '_blank', 'noopener,noreferrer');
-                    }
-                  } else {
-                    setSelectedFile(file);
-                  }
-                }}
-              >
-                {isImageContent(file.content, file.type) ? (
-                  <div className="memori--preview-thumbnail">
-                    <img src={file.content} alt={file.name} />
-                  </div>
-                ) : (
-                  <File className="memori--preview-icon" />
-                )}
-
-                <div className="memori--preview-file-info">
-                  <span className="memori--preview-filename">{file.name}</span>
-                  <span className="memori--preview-filetype">
-                    {file.mimeType
-                      ? getDocumentBadgeLabel(file.mimeType, file.name)
-                      : getFileType(file.name, file.type)}
-                  </span>
-                </div>
-
-                {allowRemove && (
-                  <Button
-                    shape="rounded"
-                    icon={<CloseIcon />}
-                    danger
-                    className="memori--remove-button"
-                    onClick={e => {
-                      e.stopPropagation();
-                      removeFile(file.id, file?.mediumID);
-                    }}
-                  />
-                )}
-              </div>
-            ))}
-
-            {uploadingCount > 0 &&
-              Array.from({ length: uploadingCount }, (_, i) => (
-                <div
-                  key={`skeleton-${i}`}
-                  className="memori--preview-item memori--preview-item--document memori--preview-item--skeleton"
-                >
-                  <div className="memori--skeleton-icon" />
-                  <div className="memori--preview-file-info">
-                    <div className="memori--skeleton-line memori--skeleton-line--name" />
-                    <div className="memori--skeleton-line memori--skeleton-line--type" />
-                  </div>
-                </div>
-              ))}
-          </div>
-        </div>
-      )}
-
-      <ContentPreviewModal
-        open={!!selectedFile}
-        onClose={() => setSelectedFile(null)}
-        title={selectedFile?.name}
-        isImage={
-          !!selectedFile &&
-          isImageContent(selectedFile.content, selectedFile.type)
-        }
-        imageSrc={
-          selectedFile &&
-          isImageContent(selectedFile.content, selectedFile.type)
-            ? selectedFile.content
-            : undefined
-        }
-        imageAlt={selectedFile?.name ?? ''}
-      >
-        {selectedFile &&
-          !isImageContent(selectedFile.content, selectedFile.type) &&
-          (isHtmlFile(selectedFile) ? (
-            <Snippet
-              preview={false}
-              medium={{
-                mediumID: selectedFile.id,
-                mimeType: 'application/xml',
-                content: getDisplayContent(selectedFile),
-                title: selectedFile.name,
-              }}
-            />
-          ) : (
-            getDisplayContent(selectedFile)
-          ))}
-      </ContentPreviewModal>
-    </>
-  );
-};
-
-export default FilePreview;