From bd0c157f9981f133968e259df97d34a4cdf304a9 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Wed, 4 Nov 2026 13:23:21 +0100
Subject: [PATCH] fix(LinkPreviewList): take the preview thumbnail from
 image_url or thumb_url

LinkPreviewCard used title_link, the page URL, as the image source. It now
uses image_url, then thumb_url, the same order as the sent message's Card.
A preview with neither shows no thumbnail.

Refs REACT-1298
---
 .../MessageComposer/LinkPreviewList.tsx       |  4 +-
 .../__tests__/LinkPreviewList.test.tsx        | 54 +++++++++++++++++++
 2 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/src/components/MessageComposer/LinkPreviewList.tsx b/src/components/MessageComposer/LinkPreviewList.tsx
index bfe57e862d..d8a463846b 100644
--- a/src/components/MessageComposer/LinkPreviewList.tsx
+++ b/src/components/MessageComposer/LinkPreviewList.tsx
@@ -51,7 +51,7 @@ export const LinkPreviewCard = ({ linkPreview }: LinkPreviewProps) => {
   const { handleEnter, handleLeave, tooltipVisible } =
     useEnterLeaveHandlers<HTMLDivElement>();
   const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
-  const { image_url, thumb_url, title, title_link } = linkPreview;
+  const { image_url, thumb_url, title } = linkPreview;
 
   if (
     !LinkPreviewsManager.previewIsLoaded(linkPreview) &&
@@ -59,7 +59,7 @@ export const LinkPreviewCard = ({ linkPreview }: LinkPreviewProps) => {
   )
     return null;
 
-  const previewImageSrc = title_link || image_url || thumb_url;
+  const previewImageSrc = image_url || thumb_url;
   return (
     <div
       className={clsx('str-chat__link-preview-card', {
diff --git a/src/components/MessageComposer/__tests__/LinkPreviewList.test.tsx b/src/components/MessageComposer/__tests__/LinkPreviewList.test.tsx
index 4b3189204b..76e7cdff5a 100644
--- a/src/components/MessageComposer/__tests__/LinkPreviewList.test.tsx
+++ b/src/components/MessageComposer/__tests__/LinkPreviewList.test.tsx
@@ -244,6 +244,60 @@ describe('LinPreviewCard', () => {
     });
     expect(screen.queryByTestId(LINK_PREVIEW_TEST_ID)).not.toBeInTheDocument();
   });
+  it('uses image_url as the thumbnail source, never title_link', async () => {
+    const { channel, client } = await setup();
+    await renderLinkPreviewCard({
+      channel,
+      client,
+      linkPreview: generateScrapedImageAttachment(
+        fromPartial<Partial<Attachment>>({
+          image_url: 'https://example.com/image.png',
+          status: LinkPreviewStatus.LOADED,
+          thumb_url: 'https://example.com/thumb.png',
+          title_link: 'https://example.com/page',
+        }),
+      ),
+    });
+    expect(screen.getByTestId('str-chat__base-image')).toHaveAttribute(
+      'src',
+      'https://example.com/image.png',
+    );
+  });
+  it('falls back to thumb_url when the preview has no image_url', async () => {
+    const { channel, client } = await setup();
+    await renderLinkPreviewCard({
+      channel,
+      client,
+      linkPreview: generateScrapedImageAttachment(
+        fromPartial<Partial<Attachment>>({
+          image_url: undefined,
+          status: LinkPreviewStatus.LOADED,
+          thumb_url: 'https://example.com/thumb.png',
+          title_link: 'https://example.com/page',
+        }),
+      ),
+    });
+    expect(screen.getByTestId('str-chat__base-image')).toHaveAttribute(
+      'src',
+      'https://example.com/thumb.png',
+    );
+  });
+  it('renders no thumbnail when the preview has only a title_link', async () => {
+    const { channel, client } = await setup();
+    await renderLinkPreviewCard({
+      channel,
+      client,
+      linkPreview: generateScrapedImageAttachment(
+        fromPartial<Partial<Attachment>>({
+          image_url: undefined,
+          status: LinkPreviewStatus.LOADED,
+          thumb_url: undefined,
+          title_link: 'https://example.com/page',
+        }),
+      ),
+    });
+    expect(screen.queryByTestId('str-chat__base-image')).not.toBeInTheDocument();
+  });
   it('allows to dismiss a preview', async () => {
     const { channel, client } = await setup();
     const dismissPreviewMock = vi.spyOn(