fix: stop event propagation on file remove in AI chat to prevent preview open

When clicking the X button on an uploaded file in the AI chat context preview, the click event bubbled up to the StyledClickableContainer parent, triggering handleClick (open file preview) instead of just removing the file. Fixes #18298
2026-03-20 00:10:54 +07:00
1 changed files with 10 additions and 3 deletions
@@ -7,7 +7,7 @@ import { filePreviewState } from '@/ui/field/display/states/filePreviewState';
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
-import { useCallback, useContext } from 'react';
+import { type MouseEvent, useCallback, useContext } from 'react';
 import { type ExtendedFileUIPart } from 'twenty-shared/ai';
 import { isDefined } from 'twenty-shared/utils';
 import { AvatarOrIcon, Chip, ChipVariant } from 'twenty-ui/components';
@@ -71,11 +71,18 @@ export const AgentChatFilePreview = ({
    />
  );

-  const rightComponent = onRemove ? (
+  const handleRemove = onRemove
+    ? (e: MouseEvent) => {
+        e.stopPropagation();
+        onRemove();
+      }
+    : undefined;
+
+  const rightComponent = handleRemove ? (
    <AvatarOrIcon
      Icon={IconX}
      IconColor={theme.font.color.secondary}
-      onClick={onRemove}
+      onClick={handleRemove}
    />
  ) : undefined;