@memori.ai/memori-react 8.17.3 → 8.18.1

package/src/components/ChatInputs/ChatInputs.test.tsx

@@ -1,7 +1,69 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import ChatInputs from './ChatInputs';
 import { dialogState } from '../../mocks/data';
+import {
+  PASTE_AS_CARD_CHAR_THRESHOLD,
+  PASTE_AS_CARD_LINE_THRESHOLD,
+} from '../../helpers/constants';
+
+jest.mock('react-hot-toast', () => ({
+  __esModule: true,
+  default: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+// jsdom does not define DataTransfer; UploadButton's paste handler uses it when clipboard has files
+if (typeof globalThis.DataTransfer === 'undefined') {
+  (globalThis as any).DataTransfer = class DataTransfer {
+    _files: File[] = [];
+    get files(): File[] {
+      return this._files;
+    }
+    items = {
+      add: (file: File) => {
+        this._files.push(file);
+      },
+    };
+  };
+}
+
+// jsdom does not define speechSynthesis/SpeechSynthesisUtterance; ChatInputs uses them in onSendMessage
+if (typeof (globalThis as any).speechSynthesis === 'undefined') {
+  (globalThis as any).speechSynthesis = { speak: jest.fn() };
+}
+if (typeof (globalThis as any).SpeechSynthesisUtterance === 'undefined') {
+  (globalThis as any).SpeechSynthesisUtterance = function () {};
+}
+
+const defaultProps = {
+  dialogState,
+  userMessage: '',
+  onChangeUserMessage: jest.fn(),
+  sendMessage: jest.fn(),
+  onTextareaFocus: jest.fn(),
+  onTextareaBlur: jest.fn(),
+  setAttachmentsMenuOpen: jest.fn(),
+  setSendOnEnter: jest.fn(),
+  listening: false,
+  isPlayingAudio: false,
+  stopAudio: jest.fn(),
+  startListening: jest.fn(),
+  stopListening: jest.fn(),
+  showMicrophone: true,
+};
+
+function createPasteEvent(plainText: string, files: File[] = []) {
+  return {
+    clipboardData: {
+      files,
+      getData: (type: string) => (type === 'text/plain' ? plainText : ''),
+    },
+    preventDefault: jest.fn(),
+  };
+}
 
 it('renders ChatInputs unchanged', () => {
   const { container } = render(
@@ -141,3 +203,268 @@ it('renders ChatInputs disabled unchanged', () => {
   );
   expect(container).toMatchSnapshot();
 });
+
+describe('paste as card (long text becomes attachment)', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('adds pasted long text (by chars) as attachment when showUpload is true', async () => {
+    const longText = 'x'.repeat(PASTE_AS_CARD_CHAR_THRESHOLD + 1);
+    render(
+      <ChatInputs
+        {...defaultProps}
+        showUpload={true}
+        dialogState={{ ...dialogState, acceptsMedia: true }}
+      />
+    );
+    const textarea = document.querySelector('textarea');
+    expect(textarea).toBeTruthy();
+
+    const paste = createPasteEvent(longText);
+    fireEvent.paste(textarea!, paste);
+
+    await waitFor(() => {
+      expect(screen.getByText('upload.pastedText')).toBeTruthy();
+    });
+  });
+
+  it('adds pasted long text (by lines) as attachment when showUpload is true', async () => {
+    const lines = Array(PASTE_AS_CARD_LINE_THRESHOLD + 1)
+      .fill('line')
+      .join('\n');
+    render(
+      <ChatInputs
+        {...defaultProps}
+        showUpload={true}
+        dialogState={{ ...dialogState, acceptsMedia: true }}
+      />
+    );
+    const textarea = document.querySelector('textarea');
+    const paste = createPasteEvent(lines);
+    fireEvent.paste(textarea!, paste);
+
+    await waitFor(() => {
+      expect(screen.getByText('upload.pastedText')).toBeTruthy();
+    });
+  });
+
+  it('adds card for short paste (all paste treated as document)', async () => {
+    const shortText = 'hello';
+    render(
+      <ChatInputs
+        {...defaultProps}
+        showUpload={true}
+        dialogState={{ ...dialogState, acceptsMedia: true }}
+      />
+    );
+    const textarea = document.querySelector('textarea');
+    const paste = createPasteEvent(shortText);
+    fireEvent.paste(textarea!, paste);
+
+    await waitFor(() => {
+      expect(screen.getByText('upload.pastedText')).toBeTruthy();
+    });
+  });
+
+  it('adds card even when showUpload is false (paste-as-card always enabled)', async () => {
+    const longText = 'x'.repeat(PASTE_AS_CARD_CHAR_THRESHOLD + 1);
+    render(
+      <ChatInputs
+        {...defaultProps}
+        showUpload={false}
+      />
+    );
+    const textarea = document.querySelector('textarea');
+    fireEvent.paste(textarea!, createPasteEvent(longText));
+
+    await waitFor(() => {
+      expect(screen.getByText('upload.pastedText')).toBeTruthy();
+    });
+  });
+
+  it('calls toast.error when max attachments reached', async () => {
+    const { MAX_DOCUMENTS_PER_MESSAGE } = require('../../helpers/constants');
+    const longText = 'x'.repeat(PASTE_AS_CARD_CHAR_THRESHOLD + 1);
+    render(
+      <ChatInputs
+        {...defaultProps}
+        showUpload={true}
+        dialogState={{ ...dialogState, acceptsMedia: true }}
+      />
+    );
+    const textarea = document.querySelector('textarea');
+    for (let i = 0; i < MAX_DOCUMENTS_PER_MESSAGE; i++) {
+      fireEvent.paste(textarea!, createPasteEvent(longText + i));
+      await waitFor(() => {
+        expect(document.querySelectorAll('.memori--preview-filename').length).toBe(i + 1);
+      });
+    }
+
+    fireEvent.paste(textarea!, createPasteEvent(longText + ' over'));
+
+    await waitFor(() => {
+      const toast = require('react-hot-toast').default;
+      expect(toast.error).toHaveBeenCalled();
+    });
+    expect(document.querySelectorAll('.memori--preview-filename').length).toBe(
+      MAX_DOCUMENTS_PER_MESSAGE
+    );
+  });
+
+  it('calls toast.error when pasted content exceeds size limit', async () => {
+    const { MAX_DOCUMENT_CONTENT_LENGTH } = require('../../helpers/constants');
+    const tooLongText = 'x'.repeat(MAX_DOCUMENT_CONTENT_LENGTH + 1);
+    render(
+      <ChatInputs
+        {...defaultProps}
+        showUpload={true}
+        dialogState={{ ...dialogState, acceptsMedia: true }}
+      />
+    );
+    const textarea = document.querySelector('textarea');
+    const paste = createPasteEvent(tooLongText);
+    fireEvent.paste(textarea!, paste);
+
+    await waitFor(() => {
+      const toast = require('react-hot-toast').default;
+      expect(toast.error).toHaveBeenCalled();
+    });
+    expect(screen.queryByText('upload.pastedText')).toBeNull();
+  });
+
+  it('adds card when paste has few lines', async () => {
+    const fewLines = Array(5).fill('line').join('\n');
+    render(
+      <ChatInputs
+        {...defaultProps}
+        showUpload={true}
+        dialogState={{ ...dialogState, acceptsMedia: true }}
+      />
+    );
+    const textarea = document.querySelector('textarea');
+    fireEvent.paste(textarea!, createPasteEvent(fewLines));
+    await waitFor(() => {
+      expect(screen.getByText('upload.pastedText')).toBeTruthy();
+    });
+  });
+
+  it('adds card when paste has few chars', async () => {
+    const fewChars = 'hi';
+    render(
+      <ChatInputs
+        {...defaultProps}
+        showUpload={true}
+        dialogState={{ ...dialogState, acceptsMedia: true }}
+      />
+    );
+    const textarea = document.querySelector('textarea');
+    fireEvent.paste(textarea!, createPasteEvent(fewChars));
+    await waitFor(() => {
+      expect(screen.getByText('upload.pastedText')).toBeTruthy();
+    });
+  });
+
+  it('does not add card when clipboard has files (handler returns early)', () => {
+    const longText = 'x'.repeat(PASTE_AS_CARD_CHAR_THRESHOLD + 1);
+    const file = new File(['a'], 'a.txt', { type: 'text/plain' });
+    const paste = createPasteEvent(longText, [file]);
+    render(
+      <ChatInputs
+        {...defaultProps}
+        showUpload={true}
+        dialogState={{ ...dialogState, acceptsMedia: true }}
+      />
+    );
+    const textarea = document.querySelector('textarea');
+    fireEvent.paste(textarea!, paste);
+    expect(screen.queryByText('upload.pastedText')).toBeNull();
+  });
+
+  it('does not add card for empty or whitespace-only paste', () => {
+    render(
+      <ChatInputs
+        {...defaultProps}
+        showUpload={true}
+        dialogState={{ ...dialogState, acceptsMedia: true }}
+      />
+    );
+    const textarea = document.querySelector('textarea');
+    fireEvent.paste(textarea!, createPasteEvent(''));
+    fireEvent.paste(textarea!, createPasteEvent('   \n\t  '));
+    expect(screen.queryByText('upload.pastedText')).toBeNull();
+  });
+
+  it('adds two cards when same long text is pasted twice (duplicate paste)', async () => {
+    const longText = 'x'.repeat(PASTE_AS_CARD_CHAR_THRESHOLD + 1);
+    render(
+      <ChatInputs
+        {...defaultProps}
+        showUpload={true}
+        dialogState={{ ...dialogState, acceptsMedia: true }}
+      />
+    );
+    const textarea = document.querySelector('textarea');
+    fireEvent.paste(textarea!, createPasteEvent(longText));
+    await waitFor(() => {
+      expect(screen.getByText('upload.pastedText')).toBeTruthy();
+    });
+    fireEvent.paste(textarea!, createPasteEvent(longText));
+    await waitFor(() => {
+      expect(document.querySelectorAll('.memori--preview-filename').length).toBe(2);
+    });
+  });
+
+  it('shows FilePreview when showUpload is false but pasted card was added', async () => {
+    const longText = 'x'.repeat(PASTE_AS_CARD_CHAR_THRESHOLD + 1);
+    render(
+      <ChatInputs
+        {...defaultProps}
+        showUpload={false}
+      />
+    );
+    expect(document.querySelector('.memori--preview-container')).toBeNull();
+    const textarea = document.querySelector('textarea');
+    fireEvent.paste(textarea!, createPasteEvent(longText));
+    await waitFor(() => {
+      expect(screen.getByText('upload.pastedText')).toBeTruthy();
+    });
+    expect(document.querySelector('.memori--preview-container')).toBeTruthy();
+  });
+
+  it('calls sendMessage with pasted card in media when user sends', async () => {
+    const sendMessageMock = jest.fn();
+    const pastedText = 'pasted content here';
+    const { container } = render(
+      <ChatInputs
+        {...defaultProps}
+        showUpload={true}
+        userMessage="hello"
+        sendMessage={sendMessageMock}
+        dialogState={{ ...dialogState, acceptsMedia: true }}
+      />
+    );
+    const textarea = document.querySelector('textarea');
+    fireEvent.paste(textarea!, createPasteEvent(pastedText));
+    await waitFor(() => {
+      expect(screen.getByText('upload.pastedText')).toBeTruthy();
+    });
+    const sendButton = container.querySelector('.memori-chat-inputs--send-btn');
+    expect(sendButton).toBeTruthy();
+    fireEvent.click(sendButton!);
+
+    expect(sendMessageMock).toHaveBeenCalledTimes(1);
+    const [, media] = sendMessageMock.mock.calls[0];
+    expect(media).toHaveLength(1);
+    expect(media![0]).toMatchObject({
+      mimeType: 'text/plain',
+      title: 'upload.pastedText',
+      type: 'document',
+      properties: expect.objectContaining({ isAttachedFile: true }),
+    });
+    expect(media![0].mediumID).toBeDefined();
+    expect(media![0].content).toContain('<document_attachment');
+    expect(media![0].content).toContain('</document_attachment>');
+    expect(media![0].content).toContain(pastedText);
+  });
+});

package/src/components/ChatInputs/ChatInputs.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { DialogState, Medium } from '@memori.ai/memori-api-client/dist/types';
+import { useTranslation } from 'react-i18next';
+import toast from 'react-hot-toast';
 import ChatTextArea from '../ChatTextArea/ChatTextArea';
 import Button from '../ui/Button';
-import { useTranslation } from 'react-i18next';
 import Send from '../icons/Send';
 import MicrophoneButton from '../MicrophoneButton/MicrophoneButton';
 import cx from 'classnames';
@@ -11,6 +12,11 @@ import UploadButton from '../UploadButton/UploadButton';
 import FilePreview from '../FilePreview/FilePreview';
 import memoriApiClient from '@memori.ai/memori-api-client';
 import Plus from '../icons/Plus';
+import {
+  MAX_DOCUMENTS_PER_MESSAGE,
+  MAX_DOCUMENT_CONTENT_LENGTH,
+  MAX_TOTAL_MESSAGE_PAYLOAD,
+} from '../../helpers/constants';
 export interface Props {
   dialogState?: DialogState;
   instruct?: boolean;
@@ -37,6 +43,8 @@ export interface Props {
   memoriID?: string;
   client?: ReturnType<typeof memoriApiClient>;
   onTextareaExpanded?: (expanded: boolean) => void;
+  /** Override total document payload limit (character count). */
+  maxTotalMessagePayload?: number;
 }
 
 const ChatInputs: React.FC<Props> = ({
@@ -60,6 +68,7 @@ const ChatInputs: React.FC<Props> = ({
   memoriID,
   client,
   onTextareaExpanded,
+  maxTotalMessagePayload,
 }) => {
   const { t } = useTranslation();
 
@@ -84,6 +93,8 @@ const ChatInputs: React.FC<Props> = ({
     dialog: { postMediumDeselectedEvent: null },
   };
 
+  const totalPayloadLimit = maxTotalMessagePayload ?? MAX_TOTAL_MESSAGE_PAYLOAD;
+
   /**
    * Handles sending a message, including any attached files
    */
@@ -100,6 +111,17 @@ const ChatInputs: React.FC<Props> = ({
   ) => {
     if (isTyping) return;
 
+    const totalContentLength = files.reduce((sum, f) => sum + f.content.length, 0);
+    if (totalContentLength > totalPayloadLimit) {
+      toast.error(
+        t('upload.contextSizeExceedsLimit', {
+          defaultValue:
+            'Context size exceeds the limit. Try reducing the number of files or content in the conversation.',
+        })
+      );
+      return;
+    }
+
     const mediaWithIds = files.map((file, index) => {
       const generatedMediumID =
         file.mediumID ||
@@ -142,6 +164,19 @@ const ChatInputs: React.FC<Props> = ({
 
     if (sendOnEnter === 'keypress' && userMessage?.length > 0) {
       stopListening();
+      const totalContentLength = documentPreviewFiles.reduce(
+        (sum, f) => sum + f.content.length,
+        0
+      );
+      if (totalContentLength > totalPayloadLimit) {
+        toast.error(
+          t('upload.contextSizeExceedsLimit', {
+            defaultValue:
+              'Context size exceeds the limit. Try reducing the number of files or content in the conversation.',
+          })
+        );
+        return;
+      }
       const mediaWithIds = documentPreviewFiles.map((file, index) => {
         const generatedMediumID =
           file.mediumID ||
@@ -199,6 +234,89 @@ const ChatInputs: React.FC<Props> = ({
     }
   };
 
+  /**
+   * All pasted text is treated as a document attachment: wrapped in <document_attachment>
+   * and added to the document preview, then sent as media via sendMessage (same as other media).
+   */
+  const handleTextareaPaste = useCallback(
+    (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+      if (e.clipboardData.files?.length) return;
+      const text = e.clipboardData.getData('text/plain');
+      if (!text?.trim()) return;
+
+      // Critical: max attachments reached – prevent dumping long text into textarea, show feedback
+      if (documentPreviewFiles.length >= MAX_DOCUMENTS_PER_MESSAGE) {
+        e.preventDefault();
+        toast.error(
+          t('upload.pasteMaxAttachmentsReached', {
+            max: MAX_DOCUMENTS_PER_MESSAGE,
+            defaultValue: `Maximum ${MAX_DOCUMENTS_PER_MESSAGE} attachments. Remove one to add this as a file.`,
+          })
+        );
+        return;
+      }
+
+      // Critical: pasted content exceeds single-document size limit – reject and inform (same prop as total limit)
+      const perDocumentLimit = maxTotalMessagePayload ?? MAX_DOCUMENT_CONTENT_LENGTH;
+      if (text.length > perDocumentLimit) {
+        e.preventDefault();
+        toast.error(
+          t('upload.contextSizeExceedsLimit', {
+            defaultValue:
+              'Context size exceeds the limit. Try reducing the number of files or content in the conversation.',
+          })
+        );
+        return;
+      }
+
+      const totalPayloadLimit = maxTotalMessagePayload ?? MAX_TOTAL_MESSAGE_PAYLOAD;
+      const currentTotal = documentPreviewFiles.reduce(
+        (sum, f) => sum + f.content.length,
+        0
+      );
+      if (currentTotal + text.length > totalPayloadLimit) {
+        e.preventDefault();
+        toast.error(
+          t('upload.contextSizeExceedsLimit', {
+            defaultValue:
+              'Context size exceeds the limit. Try reducing the number of files or content in the conversation.',
+          })
+        );
+        return;
+      }
+
+      e.preventDefault();
+      const displayName = t('upload.pastedText') || 'pasted-text';
+      const wrappedContent = `<document_attachment filename="pasted-text.txt" type="text/plain">
+
+${text}
+
+</document_attachment>`;
+      const newFile = {
+        name: displayName,
+        id: `paste_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`,
+        content: wrappedContent,
+        mediumID: undefined as string | undefined,
+        mimeType: 'text/plain',
+        type: 'document',
+      };
+      setDocumentPreviewFiles(
+        (
+          prev: {
+            name: string;
+            id: string;
+            content: string;
+            mediumID: string | undefined;
+            mimeType: string;
+            type: string;
+            url?: string;
+          }[]
+        ) => [...prev, newFile]
+      );
+    },
+    [documentPreviewFiles, maxTotalMessagePayload, t]
+  );
+
   const isDisabled =
     dialogState?.state === 'X2a' || dialogState?.state === 'X3';
   const textareaDisabled = ['R2', 'R3', 'R4', 'R5', 'G3', 'X3'].includes(
@@ -214,12 +332,14 @@ const ChatInputs: React.FC<Props> = ({
         })}
         disabled={isDisabled}
       >
-        {/* Preview for document files */}
-        {showUpload && (
-          <FilePreview
-            previewFiles={documentPreviewFiles}
-            removeFile={removeFile}
-          />
+        {/* Preview for document files (show when upload enabled or when paste added cards) */}
+        {(showUpload || documentPreviewFiles.length > 0) && (
+          <div className="memori-chat-inputs--preview-wrapper">
+            <FilePreview
+              previewFiles={documentPreviewFiles}
+              removeFile={removeFile}
+            />
+          </div>
         )}
         <div className="memori-chat-inputs--container">
           {/* Leading area - Plus button */}
@@ -234,6 +354,7 @@ const ChatInputs: React.FC<Props> = ({
                   setDocumentPreviewFiles={setDocumentPreviewFiles}
                   documentPreviewFiles={documentPreviewFiles}
                   memoriID={memoriID}
+                  maxTotalMessagePayload={maxTotalMessagePayload}
                 />
               </div>
             )}
@@ -245,6 +366,7 @@ const ChatInputs: React.FC<Props> = ({
               value={userMessage}
               onChange={onChangeUserMessage}
               onPressEnter={onTextareaPressEnter}
+              onPaste={handleTextareaPaste}
               onFocus={onTextareaFocus}
               onBlur={onTextareaBlur}
               onExpandedChange={handleTextareaExpanded}

package/src/components/ChatTextArea/ChatTextArea.tsx

@@ -11,6 +11,7 @@ export interface Props {
   value: string;
   onChange: (value: string) => void;
   onPressEnter?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  onPaste?: (e: React.ClipboardEvent<HTMLTextAreaElement>) => void;
   onFocus?: (e: React.FocusEvent) => void;
   onBlur?: (e: React.FocusEvent) => void;
   onExpandedChange?: (expanded: boolean) => void;
@@ -21,6 +22,7 @@ const ChatTextArea: React.FC<Props> = ({
   value,
   onChange,
   onPressEnter,
+  onPaste,
   onFocus,
   onBlur,
   onExpandedChange,
@@ -125,6 +127,7 @@ const ChatTextArea: React.FC<Props> = ({
               onPressEnter(e);
             }
           }}
+          onPaste={onPaste}
           onFocus={onFocus}
           onBlur={onBlur}
           maxLength={100000}

package/src/components/ContentPreviewModal/ContentPreviewModal.css

@@ -1,12 +1,27 @@
 /* ContentPreviewModal – modern preview modal for files and media */
 
+/* Stack above Chat History Drawer (z-index: 10000) and other drawers */
+.memori-content-preview-modal.memori-modal {
+  z-index: 10001;
+}
+
+.memori-content-preview-modal.memori-modal .memori-modal--backdrop,
+.memori-content-preview-modal.memori-modal .memori-modal--container {
+  z-index: 10001;
+}
+
 .memori-content-preview-modal.memori-modal .memori-modal--panel {
+  z-index: 10001;
   overflow: hidden;
+  min-width: 500px;
+  min-height: 500px;
+  max-height: 80vh;
   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);
+  overflow-y: auto;
 }
 
 /* Image variant: modal at least 600px wide (capped by viewport on small screens) */

package/src/components/FilePreview/FilePreview.css

@@ -2,13 +2,13 @@
 
 .memori--preview-container {
     z-index: 10;
-    min-width: 100%;
-    /* padding: 12px; */
+    overflow: hidden;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
     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;
 }
 
@@ -114,11 +114,16 @@
 
 .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;
 }
@@ -127,6 +132,7 @@
     position: relative;
     display: flex;
     max-width: fit-content;
+    flex-shrink: 0;
     align-items: center;
     padding: 8px;
     border-radius: 8px;
@@ -217,16 +223,18 @@
     transition: all 0.2s ease;
 }
 
-.memori--remove-button.visible {
-    opacity: 1;
-    transform: scale(1);
-}
-
 .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;

package/src/components/FilePreview/FilePreview.tsx

@@ -26,8 +26,6 @@ FilePreviewProps) => {
     type?: string;
   } | null>(null);
 
-  const [hoveredId, setHoveredId] = useState<string | null>(null);
-
   const getFileType = (filename: string, type?: string) => {
     // If type is explicitly provided, use it first
     if (type === 'image') {
@@ -136,8 +134,6 @@ FilePreviewProps) => {
                     ? 'memori--preview-item--image'
                     : 'memori--preview-item--document'
                 }`}
-                onMouseEnter={() => setHoveredId(file.id)}
-                onMouseLeave={() => setHoveredId(null)}
                 onClick={() => setSelectedFile(file)}
               >
                 {isImageContent(file.content, file.type) ? (
@@ -160,9 +156,7 @@ FilePreviewProps) => {
                     shape="rounded"
                     icon={<CloseIcon />}
                     danger
-                    className={`memori--remove-button ${
-                      hoveredId === file.id ? 'visible' : ''
-                    }`}
+                    className="memori--remove-button"
                     onClick={e => {
                       e.stopPropagation();
                       removeFile(file.id, file?.mediumID);