From 2b538ae54bbf9fa7840e8e13b87d1e88f075b5f8 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 8 Apr 2026 16:57:06 -0500
Subject: [PATCH] Make chat thumbnails attach to composer on click

---
 .../chat/ChatEventThumbnailsRow.tsx           | 45 +++++++++++++------
 1 file changed, 32 insertions(+), 13 deletions(-)

diff --git a/web/src/components/chat/ChatEventThumbnailsRow.tsx b/web/src/components/chat/ChatEventThumbnailsRow.tsx
index da26f8dd6b..89f385d4de 100644
--- a/web/src/components/chat/ChatEventThumbnailsRow.tsx
+++ b/web/src/components/chat/ChatEventThumbnailsRow.tsx
@@ -1,5 +1,6 @@
 import { useApiHost } from "@/api";
 import { useTranslation } from "react-i18next";
+import { LuExternalLink } from "react-icons/lu";
 import { cn } from "@/lib/utils";
 
 type ChatEvent = { id: string; score?: number };
@@ -7,17 +8,21 @@ type ChatEvent = { id: string; score?: number };
 type ChatEventThumbnailsRowProps = {
   events: ChatEvent[];
   anchor?: { id: string } | null;
+  onAttach?: (eventId: string) => void;
 };
 
 /**
  * Horizontal scroll row of event thumbnail images for chat.
  * Optionally renders an anchor thumbnail with a "reference" badge above the
  * results, and per-event similarity scores when provided.
+ * Clicking a thumbnail calls onAttach; a small external-link overlay opens
+ * the event in Explore.
  * Renders nothing when there is nothing to show.
  */
 export function ChatEventThumbnailsRow({
   events,
   anchor = null,
+  onAttach,
 }: ChatEventThumbnailsRowProps) {
   const apiHost = useApiHost();
   const { t } = useTranslation(["views/chat"]);
@@ -25,33 +30,47 @@ export function ChatEventThumbnailsRow({
   if (events.length === 0 && !anchor) return null;
 
   const renderThumb = (event: ChatEvent, isAnchor = false) => (
-    <a
+    <div
       key={event.id}
-      href={`/explore?event_id=${event.id}`}
-      target="_blank"
-      rel="noopener noreferrer"
       className={cn(
         "relative aspect-square size-32 shrink-0 overflow-hidden rounded-lg",
         isAnchor && "ring-2 ring-primary",
       )}
     >
-      <img
-        className="size-full object-cover"
-        src={`${apiHost}api/events/${event.id}/thumbnail.webp`}
-        alt=""
-        loading="lazy"
-      />
+      <button
+        type="button"
+        className="block size-full"
+        onClick={() => onAttach?.(event.id)}
+        aria-label={t("attach_event_aria", { eventId: event.id })}
+      >
+        <img
+          className="size-full object-cover"
+          src={`${apiHost}api/events/${event.id}/thumbnail.webp`}
+          alt=""
+          loading="lazy"
+        />
+      </button>
+      <a
+        href={`/explore?event_id=${event.id}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={(e) => e.stopPropagation()}
+        className="absolute right-1 top-1 flex size-6 items-center justify-center rounded bg-black/60 text-white hover:bg-black/80"
+        aria-label={t("open_in_explore")}
+      >
+        <LuExternalLink className="size-3" />
+      </a>
       {typeof event.score === "number" && !isAnchor && (
-        <span className="absolute bottom-1 right-1 rounded bg-black/60 px-1 text-[10px] text-white">
+        <span className="pointer-events-none absolute bottom-1 right-1 rounded bg-black/60 px-1 text-[10px] text-white">
           {Math.round(event.score * 100)}%
         </span>
       )}
       {isAnchor && (
-        <span className="absolute left-1 top-1 rounded bg-primary px-1 text-[10px] text-primary-foreground">
+        <span className="pointer-events-none absolute left-1 top-1 rounded bg-primary px-1 text-[10px] text-primary-foreground">
           {t("anchor")}
         </span>
       )}
-    </a>
+    </div>
   );
 
   return (