From 26139ee463b4dee432958e9aa37e5b2235d0feb4 Mon Sep 17 00:00:00 2001
From: victorjzq <118996546+victorjzq@users.noreply.github.com>
Date: Fri, 20 Mar 2026 02:07:19 +0700
Subject: [PATCH] fix: stop event propagation when removing file in AI chat
 preview (#18779)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

When clicking the ✕ button on an uploaded file in the AI chatbot context
preview, the click event bubbled up to the `StyledClickableContainer`
parent, which triggered `handleClick` (opening the file preview modal)
instead of — or in addition to — calling `onRemove`.

**Root cause:** `StyledClickableContainer` has `onClick={handleClick}`
at the div level. The `AvatarOrIcon` (X button) `onClick={onRemove}`
callback didn't stop propagation, so the event continued to bubble and
opened the preview.

**Fix:** Wrap `onRemove` in a `handleRemove` callback that calls
`e.stopPropagation()` before invoking the original handler.

Fixes #18298

---------

Co-authored-by: victorjzq <zhiqiangjia@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
---
 .../ai/components/internal/AgentChatFilePreview.tsx  | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/twenty-front/src/modules/ai/components/internal/AgentChatFilePreview.tsx b/packages/twenty-front/src/modules/ai/components/internal/AgentChatFilePreview.tsx
index 214d9a6341..df563e032f 100644
--- a/packages/twenty-front/src/modules/ai/components/internal/AgentChatFilePreview.tsx
+++ b/packages/twenty-front/src/modules/ai/components/internal/AgentChatFilePreview.tsx
@@ -72,11 +72,13 @@ export const AgentChatFilePreview = ({
   );
 
   const rightComponent = onRemove ? (
-    <AvatarOrIcon
-      Icon={IconX}
-      IconColor={theme.font.color.secondary}
-      onClick={onRemove}
-    />
+    <div onClick={(e) => e.stopPropagation()}>
+      <AvatarOrIcon
+        Icon={IconX}
+        IconColor={theme.font.color.secondary}
+        onClick={onRemove}
+      />
+    </div>
   ) : undefined;
 
   const hasRightDivider = isDefined(onRemove);