frigate/web/src/components/chat/ChatEventThumbnailsRow.tsx

import { useApiHost } from "@/api";
import { baseUrl } from "@/api/baseUrl";
import { useTranslation } from "react-i18next";
import { LuExternalLink } from "react-icons/lu";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";

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"]);

  if (events.length === 0 && !anchor) return null;

  const renderThumb = (event: ChatEvent, isAnchor = false) => (
    <div
      key={event.id}
      className="relative aspect-square size-32 shrink-0 overflow-hidden rounded-lg"
    >
      <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>
      <Tooltip>
        <TooltipTrigger asChild>
          <a
            href={`${baseUrl}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>
        </TooltipTrigger>
        <TooltipContent>{t("open_in_explore")}</TooltipContent>
      </Tooltip>
      {isAnchor && (
        <>
          <span
            aria-hidden="true"
            className="pointer-events-none absolute inset-0 rounded-lg ring-2 ring-inset ring-primary"
          />
          <span className="pointer-events-none absolute left-1 top-1 rounded bg-primary px-1 text-[10px] text-primary-foreground">
            {t("anchor")}
          </span>
        </>
      )}
    </div>
  );

  return (
    <div className="flex min-w-0 max-w-full flex-col gap-2 self-start">
      {anchor && (
        <div className="scrollbar-container min-w-0 overflow-x-auto">
          <div className="flex w-max gap-2">{renderThumb(anchor, true)}</div>
        </div>
      )}
      {events.length > 0 && (
        <div className="scrollbar-container min-w-0 overflow-x-auto">
          <div className="flex w-max gap-2">
            {events.map((event) => renderThumb(event))}
          </div>
        </div>
      )}
    </div>
  );
}